html2canvas returns black image

Question

I have a problem rendering divs as images via html2canvas.

Here is my javascript code:

function saveImages(i)
        {
            html2canvas($("#page"+i), {
                logging:true,
                onrendered: function(canvas){
                    var url = canvas.toDataURL();
                    $.post("saveImage.php", {"path": url, "index":i}, function(data){
                        var p = Math.round(((i+1)/totalPages)*100);
                        $("#progressGraphical").css("width", p+"%");
                        if(p>=100){p = "fertig!"}else{p += "%";}
                        $("#progress").html((i+1)+"/"+totalPages+" Seiten gespeichert - "+p);
                        if(i<totalPages) saveImages(i+1);
                    });
                }
            });
        }
        $(document).ready(function(){
            saveImages(0);
        });

I had to work recursively because of the post-request done with jquery functions. The php file which is requested takes the base64 encoded url generated by the canvas.toDataUrl-Method, decodes it and saves it to a image file called "page0/1/2/.../n.png".

All this works fine - Until a total number of about 24 recursive calls is exceeded. If this is the case, then all the images generated by html2canvas(even the images before the 24th recursive call) are drawn blank. I already looked at the base64-encoded urls - And there are just two equal strings which alternate.

Where is the error?

Just noticed that it's not the number of recursive calls that affects the correct image rendering. It must have something to do with the number of html elements that exist. — dezajno, Mar 20 '14 at 17:13
Spotted: The error occurs if there exist more than 27 html elements — dezajno, Mar 20 '14 at 17:21

score 3 · Answer 1 · edited May 23 '17 at 12:15

https://stackoverflow.com/a/23928038/1815624

simply add css background-color:#ffffff to your table :)

hope this helps

I wrapped the content into a div for each desired page and gave class="pdfpage" then set the css as pdfpage{background:#FFFFFF;}

As I had commented it was not first thoughts that I needed to set the background of the rendered element as white since it was white already...But in truth it was colorless...

copied my answer from: https://stackoverflow.com/a/25457584/1815624

html2canvas returns black image

1 Answers1