Javascript Canvas 序列化/反序列化？

Question

你能在 javascript 中序列化/反序列化 Canvas 对象吗？

Answer 1

除了getImageData 方法之外，您还可以使用canvas.toDataURL() 来获取数据URL 编码的PNG。如果您需要序列化为字符串，则无需手动将原始数据转换为字符串。您可以通过创建图像并将 src 设置为数据 URL，然后将其绘制到 Canvas 来反序列化。

[编辑以说明异步加载(由 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;
}

如果我没记错的话，一些旧版本的 Safari，也许 Opera 不支持 toDataURL，但较新的版本支持。