Вызов двух вызовов Html2Canvas с использованием jQuery.when () - PullRequest
Новая
       19

Вызов двух вызовов Html2Canvas с использованием jQuery.when ()

1 голос
/ 20 мая 2019

Я пытаюсь сделать скриншот двух div с использованием html2canvas.Я пытаюсь добиться этого с помощью обещаний, чтобы после завершения обоих вызовов html2canvas мой вызов AJAX выполнялся в then().

Я не знаю, где я иду не так.Я получаю сообщение об ошибке:

Uncaught TypeError: canvas.toDataURL не является функцией 

$.when(
  html2canvas(div_elem1),
  html2canvas(div_elem2)
).then(function(canvas, canvas2) {
  myImage1 = canvas.toDataURL();
  //tried with this too, myImage1 = canvas[ 0 ].toDataURL();
  myImage = canvas2.toDataURL();
  var data = {
    action: 'save_data',
    a: $.extend({}, a),
    b: $.extend({}, b),
    base64data: {
      x: myImage,
      y: myImage1
    },
  };

  $.post(ajaxurl, data, function(response) {

  });
});

Я использую html2canvas 1.0.0-alpha.12

Редактировать: Это работает, если я делаю так ниже.Но это займет больше времени относительно 

html2canvas(div_elem1).then(function(canvas) {

            myImage1 = canvas.toDataURL();

            html2canvas(div_elem2).then(function(canvas2) {

                    myImage = canvas2.toDataURL();

                      //ajaxcall...

1 Ответ

1 голос
/ 20 мая 2019

Метод .when Jquery в версии ниже 3 не был совместим с Обещаниями, только с отложенными объектами jQuery. 

$.when(Promise.resolve('done')).then(console.log);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Вам нужно обновить версию jQuery до версии выше v3, чтобы можно было передавать ему Promises и использовать свой код как есть. 

$.when(Promise.resolve('done')).then(console.log);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

Но учтите, что вам не нужно полагаться на jQuery здесь, html2canvas требует, чтобы браузер поддерживал обещания javascript, поэтому вы вполне можете просто использовать собственный метод Promise.all: 

Promise.all([
  Promise.resolve('first'), // html2canvas(...),
  Promise.resolve('second') // html2canvas(...)
]).then(function(canvases) {
  var canvas = canvases[0],
    canvas_1 = canvases[1];
  console.log(canvas, canvas_1);
});
...