Javascript не дожидаясь отправки формы «тогда»

Question

Я пытаюсь перехватить отправку формы на достаточно долгое время, чтобы я мог использовать третью библиотеку для создания изображения div. Но он никогда не дожидается создания холста.

jQuery(window).on('dpo_before_form_submit', function (e, form) {

e.preventDefault();

jQuery('#dpo_base_image').remove();
jQuery('body').append('<div id="dpo_base_image" style="width:2000px;height:2479px;overflow:hidden;"></div>');
window.updateBaseImage();

alert($("#dpo_base_image img").length);

if ($('#dpo_base_image').length) {

    alert("starting image capture");

    html2canvas(document.querySelector('#dpo_base_image'),
        {
            useCORS: true,
            allowTaint: true,
            width: 2000,
            height: 2479
        }
    ).then(canvas => {
        alert("canvas built!");
        $('<input>').attr('type', 'hidden').attr('name', 'properties[_DataUrl]').attr('value', canvas.toDataURL()).appendTo('form');
        e.currentTarget.submit();
    });

}
else {
    alert("Image div missing!");
}

alert("finished!");

});

Он предупреждает меня, что в div есть 7 изображений

Он предупреждает меня, что «начало захвата изображения»

и просто перескакивает к «готово!»

он никогда не предупреждает «холст построен!» или добавляет свойство в форму.

Я не понимаю, как ждать обещания?

Любая помощь будет принята с благодарностью.

Answer 1

То, что вы пытаетесь сделать, мне нравится. Я бы сделал следующее:

Непосредственно перед вашим вызовом html2canvas попробуйте записать то, что обнаруживает ваш селектор.

const dpoBaseImageEl = querySelector('#dpo_base_image');
console.log(dpoBaseImageEl);

html2canvas(dpoBaseImageEl, ....

поставьте точку останова на console.log и убедитесь, что вы возвращая селектор, который вы ожидаете.

затем удалите все дополнительные реквизиты, которые вы передаете (только для целей тестирования), и посмотрите, поможет ли это вообще.

Я бы также попробовал просто сделав это предельно простым и сделав что-то вроде этого:

document.body.innerHTML += '<div id="dpo_base_image">THIS IS A TEST HERE</div>';

html2canvas(document.querySelector('#dpo_base_image')).then(canvas => {
    alert("canvas built!");
});

ПРИМЕЧАНИЕ. Мы удалили ВСЕ другие if условия, представления и журналы консоли. Цель состоит в том, чтобы сделать его простым ...

как уже упоминалось, promises являются асинхронными, поэтому вы должны ожидать, что ваше оповещение "Canvas built" будет

Я предполагаю, что либо

1. Ваш селектор не работает
2. Реквизиты, которые вы пытаетесь передать, либо неверны, находятся за пределами границ, либо мешают
3. Изображение, которое вы надеетесь захватить, не разрешено
4. Захвачена пустая страница, поэтому заполнить его нечем. (таким образом добавляя контент к div, который вы пытаетесь захватить)

Если вышеперечисленное работает, попробуйте постепенно добавлять некоторые из ваших свойств конфигурации обратно, пока они не сломаются. Я бы сказал, тогда вы сразу узнаете, что вызывает у вас проблемы.