Javascript Canvas Serialización/Deserialización?

Question

¿Se puede serializar/deserializar un objeto canvas en javascript?

Answer 1

Puede obtener acceso directo a píxeles con canvas.getImageData() y .putImageData(). También puede serializar imágenes a una URL de datos con canvas.toDataURL() para publicar en un servidor.

Esto solo funciona en los navegadores más nuevos.

Answer 2

Además del método getImageData, puede usar canvas.toDataURL() para obtener un archivo PNG con codificación de URL de datos. Si necesita serializar a una cadena, ahorrará tener que convertir los datos sin formato a una cadena manualmente. Puede deserializar creando una imagen y configurando el src en la URL de datos, y luego dibujándolo en un lienzo.

[Editado para dar cuenta de carga asíncrona (sugerido por olliej).]

function serialize(canvas) { 
    return canvas.toDataURL(); 
} 

function deserialize(data, canvas) { 
    var img = new Image(); 
    img.onload = function() { 
     canvas.width = img.width; 
     canvas.height = img.height; 
     canvas.getContext("2d").drawImage(img, 0, 0); 
    }; 

    img.src = data; 
} 

Si no recuerdo mal, algunas versiones anteriores de Safari, Opera y puede que no apoyaron toDataURL, pero las versiones más recientes hacer.