Question

我正在尝试使用html2canvas截取两个div的屏幕截图。我正在尝试使用Promise来实现这一点，以便一旦两个html2canvas调用都完成后，我将在then()中运行我的AJAX调用。

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

未捕获的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...

Answer 1

低于3版本的Jquery的.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);
});

使用jQuery.when（）调用两个Html2Canvas调用

1 个答案: