Html2Canvas is not able to render multiple DIVs properly

Question

Html2Canvas is not able to render multiple DIVs properly when

The number of DIVs increases significantly, OR
The size of each DIV increases significantly (then it fails with fewer number of DIVs)

I am using Html2Canvas Plugin to convert div (containing image) to canvas. I have implemented a recursive function to convert multiple images at a time (see code below).

JavaScript

//counter 
var div_number = 0;

    function image2canvas() {
        var img2canvasObj = {
            logging:true,
            onrendered: function (canvas) {
                canvas.id = "cvs" + div_number;
                $("#canvasid").append(canvas);
         //incrementing the counter
                div_number = div_number + 1;

                if (div_number <= 18) {
                    html2canvas($("#tempDivforpublishplan" + div_number), img2canvasObj);

                    }
                    if (div_number === 19) {
        <Some Ajax Call>
                    }
                }
            };
            html2canvas($("#Content_to_convert" + div_number), img2canvasObj);
        }

The HTML for multiple images (which I am converting to canvas) is as follows. Note that I am using images as background of div elements. Each of these elements have a base64 string appended to the image URL which is used to convert the image to canvas. HTML:

<div id="tempDivforpublishplan0" style='background: url("data:image/png;base64,iVBORw0KGgo…..") 0% 0% / 634px 2266.26px; width: 634px; height: 2266.26px; position: relative; cursor: auto;'> </div>
<div id="tempDivforpublishplan1" style='background: url("data:image/png;base64,iVBORw0KGgo…..") 0% 0% / 634px 2266.26px; width: 634px; height: 2266.26px; position: relative; cursor: auto;'> </div>
.
.
.
<div id="tempDivforpublishplan19" style='background: url("data:image/png;base64,iVBORw0KGgo…..") 0% 0% / 634px 2266.26px; width: 634px; height: 2266.26px; position: relative; cursor: auto;'> </div>

When image count is more, or the size and resolution of images is high, only few images are converted properly. Remaining images are either converted partially or not converted at all. Is there any workaround which can be used to fix this issue?

were you ever able to figure this out? – whatsTheDiff Jun 27 '16 at 15:49 — whatsTheDiff, Jun 27 '16 at 15:49

score 0 · Answer 1 · answered Jan 29 '15 at 12:55

0

i have achieved this using callback and delay.... before calling your recursive function use delay and use callback as html2canvas is asynchronous call

answered Jan 29 '15 at 12:55

anant khannekar

1
1

Can you please provide me with particular example – lofty khanna Feb 05 '15 at 08:03
I applied the delay to if (div_number <= 18) { setTimeout(function(){ html2canvas($("#tempDivforpublishplan" + div_number), img2canvasObj); }, 3000); } But still the same issue Please help :) – lofty khanna Feb 05 '15 at 08:04

score 0 · Answer 2 · edited May 23 '17 at 12:16

I think you are having this trouble because you reach CanvasRenderer height limit during rendering. Assuming all your divs your page height is more than 40000px. Html2Canvas renders your page completely and then crops your div from it according to your div's position. You can see how big your canvas object is if you take a look throw your console having 'logging: true' in html2canvas options. Here is some more info about this subject: Maximum size of a <canvas> element

Html2Canvas is not able to render multiple DIVs properly

2 Answers2