Javascript Canvas Serialization/Deserialization?

Question

Can you serialize/deserialize a canvas object in javascript?

Answer 1

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.

Answer 2

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.