Javascript画布序列化/反序列化？

Question

你能在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，以便发布到服务器。

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