Search code examples
html2canvas

html2canvas loading issue when saving the image


I am using the following code to save the content of div (image and text) as an image using html2canvas.

$(function() { 

    $("#save").click(function() {

        var flag = true;
        var imgpath = document.getElementById('file').value;
        if(imgpath.length == 0)
        {
            alert('Please select image file to upload.');
            flag = false;   
        }
        else
        {
            html2canvas($('.body740'), {
                onrendered: function(canvas) {
                theCanvas = canvas;

                var url = canvas.toDataURL("image/png");
                var br = document.createElement("br"); 
                var center = document.createElement("center"); 
                var newImg = document.createElement("img"); // create img tag   
                newImg.src = url;

                $(".body740").hide();
                $("#canvas").show(); //div where the final image is shown
                document.getElementById("rsimg").src=url;
                document.getElementById("rsa").href=url;
                }
            });
        }
    });
});

This is my link : http://www.aamras.com/greetings2/

But, when I click the save image button, it takes a lot of time to generate the image. Why is it taking so much time to load? What is the issue?


Solution

  • Solved : Change the version of html2cannvas. I was previously using html2canvas 0.5.0-alpha 2014 version I Switched to html2canvas 0.5.0-alpha1. It generates the image properly and takes no time to do so. You can download the files from https://github.com/niklasvh/html2canvas/releases