SVG 到画布图像工作一半的时间答案

【问题标题】：SVG to canvas Image working half of the timeSVG 到画布图像工作一半的时间
【发布时间】：2019-04-05 20:05:46
【问题描述】：

我想在某个时候比较两个 svg 路径（用户和模型）。这个想法是将它们中的每一个转换为 ImageData 以便能够进行像素比较。我遇到的问题是使用 drawImage 导致我有一半的时间是一个空的画布。

let modelCanvas = document.createElement("canvas");
let modelContext = modelCanvas.getContext("2d");
modelCanvas.width = 898;
    modelCanvas.height = 509;
document.body.appendChild(modelCanvas);
let modelImg = new Image(898, 509);
modelImg.src = 'data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3ZnLW[....]';
modelContext.drawImage(modelImg, 0, 0, 898, 509);

代码非常简单，并且始终运行而不会产生错误。仍然 drawImage 似乎多次默默地失败。

这是 JSFiddle（带有完整的数据字符串）： https://jsfiddle.net/Ldgpuo03/

非常感谢您的帮助。

【问题讨论】：

试试modelImg.onload = function() {modelContext.drawImage(modelImg, 0, 0, 898, 509);}
非常感谢，我在这里挣扎！但是我并没有真正了解问题的出处：btoa 方法似乎不是异步的：developer.mozilla.org/fr/docs/Web/API/WindowBase64/…。你有关于这个修复的额外信息吗？谢谢

标签： javascript svg drawimage

【解决方案1】：

网页浏览器加载图片是一个异步操作。

当不能保证加载图像时，您正在尝试调用modelContext.drawImage。

您必须将绘图代码放在image.onload 回调函数中

该函数会在图片加载完成后调用一次。

let modelCanvas = document.createElement("canvas");
let modelContext = modelCanvas.getContext("2d");
modelCanvas.width = 40;
modelCanvas.height = 40;
document.body.appendChild(modelCanvas);

let modelImg = new Image();
modelImg.src = 'https://i.stack.imgur.com/EK1my.png?s=48';
modelImg.onload = function(){
  modelContext.drawImage(modelImg, 0, 0, 40, 40);
}

【讨论】：