SVG 到 canvas 图片工作一半的时间

Question

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

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

通过网络浏览器加载图像是一个异步操作。

您正在尝试调用 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);
}

SVG 到 canvas 图片工作一半的时间

SVG to canvas Image working half of the time

javascript

svg

drawimage