Can you serialize/deserialize a canvas object in javascript?
2 Answers
Besides the getImageData
method, you can use canvas.toDataURL()
to get an data-URL-encoded PNG. If you need to serialize to a string, it would save having to convert the raw data to a string manually. You could deserialize by creating an image and setting the src to the data URL, then drawing it to a canvas.
[Edited to account for asynchronous loading (suggested by 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;
}
If I remember correctly, some older versions of Safari, and maybe Opera didn't support toDataURL
, but the more recent versions do.
-
2Technically the image is not guaranteed to be loaded synchronously so you should really do the remainder of the work in the images onload handler– olliejApr 20, 2009 at 7:40
You can get direct pixel access with canvas.getImageData() and .putImageData(). You can also serialize images to a data URL with canvas.toDataURL() for posting to a server.
This only works in newer browsers.