Javascript Canvas 序列化/反序列化？答案

【问题标题】：Javascript Canvas Serialization/Deserialization?Javascript Canvas 序列化/反序列化？
【发布时间】：2010-10-20 10:48:27
【问题描述】：

你能在 javascript 中序列化/反序列化一个画布对象吗？

【问题讨论】：

标签： javascript html canvas

【解决方案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，但更新的版本支持。

【讨论】：

从技术上讲，图像不能保证同步加载，所以你应该在图像加载处理程序中完成剩余的工作

【解决方案2】：

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

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

【讨论】：