html2canvas不能用于多个div作为画布 [英] html2canvas not working for multiple div as canvas

问题描述

我试过html2canvas单div，它工作正常。现在我在页面上有两个图表，所以我想要在不同的画布上捕获这两个div并将其作为图像传递。我试过以下，但它总是设置为undefined。我不知道是什么问题。当我在firebug中进入调试模式时，我发现它并不是首先在html2canvas中执行，它在ajax中执行，执行ajax后执行到html2canvas。

<$ p （$（'＃loadchart1'）），{$ b $（$＃$）; $（$＃$ c $） b 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'，
成功：函数（msg）{
alert（'Image saved successfully！'）;
}
}）;
}
}）;

编辑完async后：

<$ p $点击（函数（）{
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（）;
} ，
函数（回调）{
if（count ！= 0）{
$ .ajax（{
type：'POST'，
url：/ ChartReport / makePDF，
contentType：'application / json; charset = utf-8'，
dataType：'json'，
成功：函数（msg）{
alert（'Image saved successfully！'）;
}
}）;
}
callback（）;
}]，
函数（err，results）{
alert（results [0]）;
}）;
}）;

注意：div loadchart1在局部视图中，它在document.ready（）上加载>

解决方案

好吧，我不知道html2canvas库，但从外观看，有什么问题是你混淆了流通代码。您在html2canvas函数的回调中分配给 imageChartN ，因此在可以分配变量之前已达到 if 。你应该检查的是 async.js 和使用 async.parallel 函数。

I have tried html2canvas for single div and it is working fine. Now I have 2 charts on page, so I want to capture both div in separate canvas and pass it as image. I tried following but it always set to undefined. I don't know what is the problem. When I go to debug mode in firebug I found that it doesn't go in html2canvas first, it goes in ajax and after execution of ajax, it goes to 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 !');
            }
            });
    }
});

After edit for async:

$("#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]);
  });
});

Note: div loadchart1 is in partial view and it gets load on document.ready()

解决方案

Ok, I don't know the html2canvas library, but from the looks what is going wrong is that you're confusing the flow through the code. You are assigning to imageChartN in a callback of the html2canvas function, so the if is reached before the variables can be assigned. What you should check out is async.js and use the async.parallel function.

这篇关于html2canvas不能用于多个div作为画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！