【问题标题】:canvas.toDataURL() generate wrong DataURLcanvas.toDataURL() 生成错误的 DataURL
【发布时间】:2013-08-11 10:19:57
【问题描述】:

我的代码中的toDataURL() 函数有什么问题!?
我的问题是,p0 画布将保持为空!
dataurl.net 上传我的图片后,我发现它的DataUrl 代码和我保存在LocalStorage 中的DataUrl 代码不同!这就是为什么它不能显示任何东西!

<canvas id="p0" width="512" height="176" style="margin-left: 200px; margin-top: 216px; position: absolute"></canvas>
<script>
function init() {
    var p0 = document.getElementById("p0");
    var P0 = p0.getContext('2d');
    var img = new Image;
    img.onload = function () {
        P0.drawImage(img, 0, 0);
    };
    if (localStorage.getItem("version") == Version) {
        img.src = localStorage.getItem("p0");
    } else {
        localStorage.setItem("version", Version);
        img.src = "Index/2/logo.png";
        localStorage.setItem("p0", p0.toDataURL("image/png"));
    }
}
init();
</script>

【问题讨论】:

  • 您是从空画布中获取 dataUrl 吗?等到图片加载完毕,画完再序列化!

标签: javascript html canvas html5-canvas data-uri


【解决方案1】:

感谢贝尔吉,
它只需要输入这一行:

localStorage.setItem("p0", p0.toDataURL("image/png"));

进入 img.onload 函数。

img.onload = function () {
    P0.drawImage(img, 0, 0);
    localStorage.setItem("p0", p0.toDataURL("image/png"));
};

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2012-03-09
    • 2012-12-29
    • 2015-11-23
    • 2011-08-16
    • 2014-11-03
    • 2011-06-03
    • 2015-06-21
    • 1970-01-01
    相关资源
    最近更新 更多