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

Question

我正在尝试使用 html2canvas 截取两个 div。我正在尝试使用 Promise 来实现这一点，这样一旦两个 html2canvas 调用都完成了，我就会在 then() 中运行我的 AJAX 调用。

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

未捕获的类型错误：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...

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 以便能够将 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 Promises，因此您可以很好地使用原生 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);
});