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

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); }