Salva canvas HTML 5 in un file in Chrome?

Question

Salva PNG (ecc.) Funziona in this demo in Firefox, ma non in Chrome.

Converti in PNG (ecc.) Funziona in Firefox e Chrome.

C'è un modo * in Chrome * per salvare un'immagine di un elemento canvas in un file locale o su un server?

Answer 1

Il modo più semplice per farlo è utilizzare la funzione toDataURL().

Diciamo che avete una tela:

var canvas = document.getElementById("myCanvas"); 

Poi, con un pulsante con ID "saveButton", si può fare pop aprire una nuova finestra con la tela come un png, e l'utente può salvare che pagina.

document.getElementById("saveButton").onClick = function() { 
    window.open(canvas.toDataURL()); 
} 

Answer 2

Sam Dutton: (per quanto riguarda commento lasciato in risposta di Timothy Armstrong) Il 'SECURITY_ERR: DOM Exception 18' errore che stai ricevendo è probabilmente perché nella tua tela che hai caricato un'immagine che proviene da una diversa dominio, ad es. forse l'immagine è ospitata sul tuo server quindi perché vedi l'errore localmente ma non quando è ospitato sul tuo server. Ogni volta che si caricano immagini da un dominio esterno in una tela, alcune chiamate API vengono bandite per motivi di sicurezza, come ad esempioDataUrl() e getPixelData(). È simile allo stesso problema relativo alle norme di origine riscontrato con le chiamate Ajax tra domini.

Per quanto riguarda SaveAs Canvas, l'implementazione del browser è discutibile, per i browser che non la supportano, credo che si possa ancora visualizzare la tela come immagine all'interno di un tag <img />. Basta impostare l'attributo src ai dati che si ricevono daDataUrl(), quindi è possibile invitare l'utente a fare clic con il pulsante destro del mouse -> Salva come. Credo che la demo nel link che hai postato lo faccia.

Answer 3

questo può aiutare: Canvas to file