当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《Javascript画布序列化/反序列化?》经验,为你挑选了1个好方法。

你能在javascript中序列化/反序列化画布对象吗?



1> Matthew Crum..:

除了该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,但更新的版本可以.


从技术上讲,图像不能保证同步加载,因此您应该在图像加载处理程序中完成剩余的工作
推荐阅读
mobiledu2402852357
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有