html2canvas 不适用于多个 div 作为画布

Question

我已经为单个 div 尝试了 html2canvas，它工作正常。现在我在页面上有 2 个图表，所以我想在单独的画布中捕获两个 div 并将其作为图像传递。我尝试关注，但它总是设置为未定义。我不知道是什么问题。当我在firebug中进入调试模式时，我发现它没有先进入html2canvas，它进入ajax，执行ajax后，它进入html2canvas。

$("#getPdf").click(function () {
    var imageChart1, imageChart2;
    html2canvas($('#loadchart1'), { 
        onrendered: function (canvas1) {
            imageChart1 = canvas1.toDataURL("image/png"); 
            alert(imageChart1); 
            imageChart1 = imageChart1.replace('data:image/png;base64,', '');
        }
    });
    html2canvas($('#loadchart2'), { 
        onrendered: function (canvas2) { 
            imageChart2 = canvas2.toDataURL("image/png"); 
            imageChart2 = imageChart2.replace('data:image/png;base64,', ''); 
        }
    });
    if (imageChart1 != undefined && imageChart2 != undefined) {
        $.ajax({
            type: 'POST',
            url: "/ChartReport/UploadImage",
            data: ' { "image1" : "' + imageChart1 + '","image2":"' + imageChart2 + '"}',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (msg) {
                alert('Image saved successfully !');
            }
            });
    }
});

异步编辑后：

$("#getPdf").click(function () {
 var count = 0;
 var imageArray = new Array("#loadchart1", "#loadchart2");
 async.parallel([
  function (callback) {
    for (var i = 0; i < imageArray.length; i = i + 1) {
      html2canvas($(imageArray[i]), {
      onrendered: function (canvas) {
        var imageChart1 = canvas.toDataURL("image/png").replace(' :image/png;base64,', '');
        $.ajax({
         type: 'POST',
         url: "/ChartReport/UploadImage",
         data: ' { "image1" : "' + imageChart1 + '" }',
         contentType: 'application/json; charset=utf-8',
         dataType: 'json',
         success: function (msg) {
          count = count + 1;
         }
        });
      }
    });
   }
   callback();
  },
  function (callback) {
   if (count != 0) {
    $.ajax({
     type: 'POST',
     url: "/ChartReport/makePDF",
     contentType: 'application/json; charset=utf-8',
     dataType: 'json',
     success: function (msg) {
      alert('Image saved successfully !');
     }
    });
   }
   callback();
  } ],
  function (err, results) {
   alert(results[0]);
  });
});

注意：div loadchart1 处于局部视图中，它会在 document.ready() 上加载

Answer 1

好的，我不知道 html2canvas 库，但从外观上看，问题在于您混淆了代码的流程。您在 html2canvas 函数的回调中分配给imageChartN，因此在分配变量之前到达if。您应该检查的是async.js 并使用async.parallel 函数。