Guardar PNG (etc.) funciona en this demo en Firefox, pero no en Chrome.¿Guardar el lienzo de HTML 5 en un archivo en Chrome?
Convierte a PNG (etc.) en Firefox y Chrome.
¿Hay alguna forma * en Chrome * de guardar una imagen de un elemento de lienzo en un archivo local, o en un servidor?
La forma más sencilla de hacerlo es usar la función toDataURL().
Digamos que tiene un lienzo:
var canvas = document.getElementById("myCanvas");
Luego, con un botón con id "SaveButton", puede hacer que el pop abrir una nueva ventana con el lienzo como un png, y el usuario puede guardar esa página.
document.getElementById("saveButton").onClick = function() {
window.open(canvas.toDataURL());
}
Sam Dutton: (en relación comentario dejado en la respuesta de Timoteo Armstrong) El 'SECURITY_ERR: Excepción DOM 18' de error que está recibiendo es probablemente porque en su lienzo que haya cargado una imagen que proviene de una distinta dominio, ej. tal vez la imagen está alojada en su servidor, por lo tanto, por qué ve el error localmente pero no cuando está alojado en su servidor. Cada vez que carga imágenes de un dominio externo en un lienzo, ciertas llamadas a API están prohibidas por razones de seguridad como toDataUrl() y getPixelData(). Es similar al problema de política de origen que ves con las llamadas Ajax de dominios cruzados.
En cuanto a Guardar como lienzo, la aplicación del navegador es irregular, para los navegadores que lo soportan, creo que todavía puede tener el lienzo aparece como una imagen dentro de una etiqueta <img />. Simplemente configure el atributo src con los datos que obtiene de toDataUrl(), luego puede invitar al usuario a hacer clic con el botón derecho -> guardar como. Creo que la demostración en el enlace que publicó hace esto.
Gracias por sus comentarios. El 'error' de seguridad se produce cuando toDataURL() se ejecuta localmente (es decir, no en un servidor). Para crear el contenido del elemento lienzo, llamo a drawImage con un archivo de video local como fuente, es decir: canvasContext.drawImage (videoEl, 0, 0, videoWidth/2, videoHeight/2); –
¿Estás seguro de que el archivo de video es local y no proviene de tu servidor? –
>> ¿Está seguro de que el archivo de video en sí es local? << Sí: el video está en un directorio local y se accede a través de una ruta src como esta: 'video/myVideo.ogv'. –
El problema con esto es que (desde Chrome) que da un error: SECURITY_ERR: DOM Excepción 18. que he encontrado referencias a este error (http: // lists.w3.org/Archives/Public/public-webapi/2006May/0027.html, por ejemplo), pero no hay información sobre si (o no) es posible evitarlo. –
Acabo de descubrir que el error ocurre localmente, pero no si el código se ejecuta en un servidor. Sin embargo, todavía estoy buscando una forma de proporcionar un cuadro de diálogo Guardar como (como en Firefox) y no solo abrir el archivo PNG en una nueva ventana. –
Estoy bastante seguro de que no puede hacer que aparezca el cuadro de diálogo Guardar; lo mejor que puede hacer es abrir el archivo PNG resultante en una nueva pestaña y hacer que el usuario guarde. Este es el comportamiento que veo en todas las aplicaciones de lienzo que he visto. Editado mi respuesta para la ventana abierta. –