html2canvas not working for multiple div as canvas

问题

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()

回答1:

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.

来源：https://stackoverflow.com/questions/22633795/html2canvas-not-working-for-multiple-div-as-canvas

标签

javascript

jquery

html

html5

html2canvas