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

Question

我正在尝试使用html2canvas截取两个div的屏幕截图。我正在尝试使用承诺来实现这一点，这样一旦两个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，以便能够将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要求浏览器支持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);
});