javascript - Javascript Canvas Serialization/Deserialization?

Question

Can you serialize/deserialize a canvas object in javascript?

Answer 1

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

[编辑以考虑异步加载（由 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，但更新的版本支持。

Answer 2

您可以使用 canvas.getImageData() 和 .putImageData() 直接访问像素。您还可以使用 canvas.toDataURL() 将图像序列化为数据 URL，以发布到服务器。

这仅适用于较新的浏览器。