使用 jQuery.when() 调用两个 Html2Canvas 调用

Question

我正在尝试使用 html2canvas 截取两个 div 的屏幕截图。我正在尝试使用承诺来实现这一点，这样一旦 html2canvas 调用完成，我运行我的 AJAX 调用 then()。

我不知道我哪里错了。我收到错误消息：

Uncaught TypeError: canvas.toDataURL is not a function

$.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) {

  });
});

I am using 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...

Answer 1

Jquery 3 以下版本中的 .when 方法与 Promises 不兼容，仅与 jQuery 的 Deferred 对象兼容。

$.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 以上，以便能够将 Promise 传递给它并按原样使用您的代码。

$.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需要浏览器支持javascriptPromises，所以你可以很好的直接使用原生的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);
});

使用 jQuery.when() 调用两个 Html2Canvas 调用

Calling two Html2Canvas calls using jQuery.when()

javascript

jquery

promise

html2canvas