SVG to canvas图像工作的一半时间

Question

我想在某些时候比较两个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/

非常感谢您的帮助。

Answer 1

Web浏览器加载图像是一种异步操作。

当您无法保证加载图像时，您正试图调用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);
}