Как сделать снимок страницы с помощью html2canvas с помощью события beforeunload - PullRequest
Новая
       3

Как сделать снимок страницы с помощью html2canvas с помощью события beforeunload

1 голос
/ 07 марта 2019

Я пытаюсь привязать страницу и опубликовать результат canvas.toDataURL на внешнем сервере. Все отлично работает, но мне нужно сделать скриншот прямо перед тем, как посетитель покинет страницу (чаще всего после отправки формы). Что я делаю, так это добавляю обработчик для beforeunload события, используя JQ так: 

$(window).bind('beforeunload', function(){
    html2canvas(document.body, {async: true, logging: true}).then(function(canvas){
        var data = canvas.toDataURL('image/png', 0.5);

        $.ajax({
            type: 'POST',
            url: 'apiurl.php',
            data: {"screenshot":data},
            success: function(){},
            async:true
        });
    });
});

Проблема в том, что html2canvas является асинхронным, и его асинхронный флаг, установленный в true или false, не меняет своего поведения. Кажется, нет собственного способа заставить html2canvas делать снимки экрана синхронно. Таким образом, страница не ждет, пока она выполнится, и просто позволяет посетителю уйти, и, таким образом, html2canvas и $. Ajax внутри нее не имеют возможности правильно завершить.

И даже если я сделаю пост $. Ajax синхронным, это все равно не решит проблему, потому что оригинальный вызов html2canvas все еще асинхронный.

Как заставить страницу ждать html2canvas и $. Ajax для завершения? У кого-нибудь есть предложения?

...