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

Question

I want to compare two svg paths (user and model) at some point. The idea is to transform each of them onto ImageData to be able to make pixel comparisons. The problem I have is using the drawImage which leads me to an empty canvas half of the time.

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

The code is pretty straightforward and always run without producing error. Still drawImage seems to fail silently times to times.

Here is the JSFiddle (with the full data string) : https://jsfiddle.net/Ldgpuo03/

Thank you very much for your help.

Answer 1

Image loading by web browser is an asynchronous operation.

You are trying to call modelContext.drawImage when the image is not guaranteed to be loaded.

You must place your drawing code inside the image.onload callback function

This function will be called once when the image loading is fully finished.

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