使用 base64 字符串恢复画布答案

【问题标题】：Restore canvas with base64 string使用 base64 字符串恢复画布
【发布时间】：2011-08-02 20:34:57
【问题描述】：

每当我第一次加载页面时。图像没有恢复，但是一旦我加载页面并按 F5。然后它工作。我不是我的代码有什么问题。

// variable r contains the base64 string which is retrieved via a ajax call.

    var myImage = new Image();
    myImage.src = r;
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.drawImage(myImage, 0, 0);

好的。我没有在页面加载时自动调用 ajax，而是通过按钮手动触发了 ajax 调用，但我仍然得到相同的结果。成功检索 base64 字符串并且未加载图像。但是当我第二次单击该按钮时。图像已加载完毕。

【问题讨论】：

图片加载需要时间。你确定图片已经完全加载了吗？
我想。在 document.ready 之后调用 ajax 调用，但我设法在 alert() 中显示 base64 字符串，但未加载图像。

标签： javascript image html canvas

【解决方案1】：

var myImage = new Image();
myImage.src = r;
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// wait for it to load before calling draw
myImage.onload = function() {
  ctx.drawImage(myImage, 0, 0);
}

【讨论】：