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

Question

你可以序列化/反序列化JavaScript中的画布对象？

Answer 1

您可以通过canvas.getImageData（）和.putImageData（）获得直接像素访问。您也可以使用canvas.toDataURL（）将图像序列化到数据URL以发布到服务器。

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

Answer 2

除了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，也许歌剧不支持toDataURL，但较新版本做。