html2canvas работает правильно после помещения его в обратный вызов setTimeout, почему и каково идеальное решение для этого?

Question

Я играю с html2canvas, и я понял, что он неправильно отображает мой DOM.

Я пытался Google, но вижу только некоторую информацию о размещении html2canvas внутри обратного вызова setTimeout, например:

var delay = 1000;
$('#image').css('width', 64);
// if I stopped running the following code, the image is correctly rendered.
setTimeout(function(){
  html2canvas($("#h2cwrap")[0]).then(function (canvas) {
    showImage64(canvas.toDataURL());
  });
},delay)

Я заметил, что даже изменение настройки var delay = 1000 приведет к другим результатам. Например, если он установлен на var delay = 1, размер изображения будет изменен правильно, но выровнен неправильно. Если он установлен на var delay = 1000, изображение будет изменено и выровнено правильно.

Как мне убедиться, что html2canvas отображает именно то, что я вижу, без использования таких странных хаков?

Answer 1

setTimeout может подождать, пока браузер загрузит все ресурсы, включая ваше изображение и стили.

Вы также можете прослушать событие load, которое сработает после загрузки всех ресурсов.

window.addEventListener('load', (event) => {
    // All resources in document loaded and parsed
    console.log('page is fully loaded');

    html2canvas($("#h2cwrap")[0]).then(function (canvas) {
      showImage64(canvas.toDataURL());
    });

});