Javascript帆布序列化/反序列化？ [英] Javascript Canvas Serialization/Deserialization?

问题描述

解决方案

除了 getImageData

code>方法，您可以使用 canvas.toDataURL（）获取数据URL编码的PNG。如果你需要序列化一个字符串，它将保存必须手动将原始数据转换为字符串。您可以通过创建图像并将src设置为数据网址，然后将其绘制到画布上来反序列化。

  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， t支持 toDataURL ，但是最近的版本。

Can you serialize/deserialize a canvas object in javascript?

解决方案

Besides the getImageData method, you can use canvas.toDataURL() to get an data-URL-encoded PNG. If you need to serialize to a string, it would save having to convert the raw data to a string manually. You could deserialize by creating an image and setting the src to the data URL, then drawing it to a canvas.

[Edited to account for asynchronous loading (suggested by 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;
}

If I remember correctly, some older versions of Safari, and maybe Opera didn't support toDataURL, but the more recent versions do.

这篇关于Javascript帆布序列化/反序列化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！