[英]html2canvas not working for multiple div as canvas
I have tried html2canvas for single div and it is working fine. 我已经为单个div尝试了html2canvas,它工作正常。 Now I have 2 charts on page, so I want to capture both div in separate canvas and pass it as image.
现在页面上有2个图表,因此我想在单独的画布中捕获两个div并将其作为图像传递。 I tried following but it always set to undefined.
我尝试了以下操作,但始终将其设置为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.
当我在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 !');
}
});
}
});
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() 注意:div loadchart1在局部视图中,并已加载到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. 好的,我不知道html2canvas库,但是从外观上看,出问题的是您混淆了代码流。 You are assigning to
imageChartN
in a callback of the html2canvas function, so the if
is reached before the variables can be assigned. 您正在html2canvas函数的回调中分配给
imageChartN
,因此在分配变量之前已到达if
。 What you should check out is async.js
and use the async.parallel
function. 您应该检查的是
async.js
并使用async.parallel
函数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.