Przechwytywanie/zapisać/eksportować obrazu z efektami filtrów CSS stosowane

Question

jestem oprzyrządowanie wokół zrobić prosty edytor obrazu, który wykorzystuje efekty filtrów CSS3 (nasycenie, sepia, kontrast itp)

Making redaktor obraz łatwa część, jednak czy możliwe jest zapisanie lub wyeksportowanie obrazu z zastosowanymi filtrami, wydaje się niesamowicie trudna.

Początkowo miałem duże nadzieje, że będzie to możliwe z @niklasvh's html2canvas. Niestety, nie przechwytuje większości właściwości CSS3, nie mówiąc już o filtrowaniu efektów.

Jeśli ktoś ma rozwiązanie lub niestety, ostateczną wiedzę, że to po prostu niemożliwe, byłoby to bardzo cenne! Dzięki!

Answer 1

Nie jestem, o ile mi wiadomo, w stanie zastosować CSS do grafiki w elemencie canvas HTML5 (ponieważ nie są one częścią DOM).

Jednak jest OK! Nadal możemy wykonać podstawowe efekty filtrowania stosunkowo łatwo i zapisać je jako obraz z zaledwie kilkoma liniami JavaScript.

Znalazłem dobry artykuł, który przechodzi przez zastosowanie sepia-like effect to the canvas and saving it as an image. Zamiast kopiować, podświetlę większe artykuły z tego artykułu.

Modyfikowanie obraz płótno:

var canvas = document.getElementById('canvasElementId'), 
    context = canvas.getContext('2d'); 

var imageData = context.getImageData(0, 0, canvas.width, canvas.height); 

for (var i = 0; i < imageData.data.length; i+=4) { 
    ... 
} 

W celu uzyskania dostępu do niektórych płótnie API, musisz aktywować 2d kontekst na płótnie przy użyciu wyżej JavaScript. MDN ma świetną dokumentację na temat interfejsu API, która jest dostępna dla użytkownika pod numerem context object, ale ważną rzeczą, o której warto pamiętać, jest wywołanie getImageData(). Zasadniczo pobierze wszystkie wartości pikseli w zdefiniowanym obszarze (w powyższym przypadku przechwytywamy cały obraz). Następnie, mając te dane w ręce, możemy dokonać iteracji poprzez wszystkie piksele i zmienić je w razie potrzeby. W modelu sepia article można oczywiście wprowadzić pewne interesujące zmiany, ale w razie potrzeby można również wykonać skalę szarości, rozmycie lub wszelkie inne zmiany, a do tego jest niesamowity canvas filters library on Github.

Jak zapisać obraz płótno:

var canvas = document.getElementById('canvasElementId'), 
    image = document.createElement("img"); 

image.src = canvas.toDataURL('image/jpeg'); 

document.body.appendChild(image); 

Powyższy skrypt wybrać płótno (zakładając, że już zrobione rysunki) i utworzyć element obrazu. Używa ich toDataURL() do generowania adresu URL, którego można użyć do ustawienia źródła na elemencie obrazu. W powyższym przykładzie element obrazu jest dołączany do treści dokumentu. Możesz zobaczyć więcej informacji na MDN's canvas page.

Answer 2

Dostałem twoją odpowiedź. Zrobiłem ten program, w końcu to działa.

tych krokiem jest:
1. Prześlij zdjęcie (JPG/PNG)
2. Konwersja na płótno
3. zwyczaj z filtrów CSS.
4. renderuj używając camanJS, aby zapisać jako obraz.
5. wykonane.

możesz także zresetować wartość efektu, modyfikując wartość filtrów do wartości domyślnych.

powodzenia!