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

Загрузка изображения через веб-браузер является асинхронной операцией.

Вы пытаетесь вызвать 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);
}