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

能否在javascript中序列化/反序列化画布对象？

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

---

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

除了使用

getImageData

方法外，还可以使用

canvas.toDataURL（）

获取数据URL编码的PNG。如果需要序列化为字符串，那么就不必手动将原始数据转换为字符串。您可以通过创建图像并将src设置为数据URL，然后将其绘制到画布来进行反序列化

[编辑以说明异步加载（由olliej建议）。]

---

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

toDataURL

，但较新的版本支持。

从技术上讲，图像不能保证同步加载，因此您应该在images onload处理程序中完成剩余的工作

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;
}