Capture/salvare/esportare un'immagine con effetti filtro CSS applicato

Question

Sono lavorazione con utensili circa per fare un semplice editor di immagini che utilizza effetti filtro CSS3 (saturazione, seppia, contrasto, ecc)

Fare l'editor di immagini è la parte facile, tuttavia, se è possibile salvare o esportare l'immagine con i filtri applicati sembra incredibilmente difficile ..

Inizialmente avevo avuto grandi speranze che sarebbe stato possibile con @niklasvh's html2canvas. Sfortunatamente, non cattura la maggior parte delle proprietà CSS3, per non parlare degli effetti filtro.

Se qualcuno ha una soluzione o, purtroppo, la consapevolezza definitiva che questo non è possibile, sarebbe molto apprezzato! Grazie!

Answer 1

Non sei, che io sappia, in grado di applicare CSS alla grafica nell'elemento canvas HTML5 (dato che non fanno parte del DOM).

Tuttavia, va bene! Possiamo ancora fare effetti di filtro di base relativamente semplici e salvarli come un'immagine con solo poche righe di JavaScript.

Ho trovato un buon articolo che va oltre l'applicazione di uno sepia-like effect to the canvas and saving it as an image. Piuttosto che copiarlo, metterò in evidenza i suggerimenti più importanti sull'articolo.

Modifica l'immagine tela:

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) { 
    ... 
} 

Al fine di ottenere l'accesso ad alcuni API tela, è necessario attivare il contesto 2d sulla tela utilizzando il sopra JavaScript. MDN ha una buona documentazione sull'API disponibile con lo context object, ma la parte importante da notare qui è la chiamata getImageData(). Fondamentalmente, prenderà tutti i valori dei pixel nell'area che hai definito (nel caso sopra, stiamo afferrando l'intera immagine). Quindi, con questi dati in mano, possiamo scorrere tutti i pixel e cambiarli se necessario. Nello sepia article, ovviamente, si apportano alcune modifiche interessanti, ma è anche possibile eseguire la scala di grigi, la sfocatura o qualsiasi altra modifica in base alle esigenze e c'è un fantastico canvas filters library on Github per questo.

come salvare l'immagine tela:

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

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

document.body.appendChild(image); 

Lo script precedente selezionare la tela (supponendo che hai già fatto i disegni) e creare un elemento dell'immagine. Li utilizza toDataURL() per generare un URL che è possibile utilizzare per impostare l'origine su un elemento immagine. Nell'esempio sopra, l'elemento immagine viene aggiunto al corpo del documento. È possibile visualizzare maggiori informazioni su MDN's canvas page.

Answer 2

Ho la tua risposta. Ho fatto questo programma, finalmente funziona.

coloro passo è:
1. caricare l'immagine (JPG/PNG)
2. convertito alla tela
3. personalizzato con filtri CSS.
4. rendering utilizzando camanJS per salvare come immagine.
5. done.

è inoltre possibile ripristinare il valore dell'effetto modificando il valore dei filtri sui valori predefiniti.

buona fortuna!