html2canvas loading issue when saving the image

JavaScript
1

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

$(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?

2

I’ve moved this topic to Javascript because the code you’re showing is Javascript. Although I suspect you’re right, and most likely the problem is not the Javascript itself. As you haven’t showed us the PHP that mus be behind…

Now, according to html2canvas documentation, this piece of Javascript does not create an image but a represetantion of the page.

Like you did, I assume that the problem lies on the uploading of the picture (might be bad PHP, network problem or a permissions problem).

You may want to post that code and I’ll move it back to PHP and see if we can help

1 Like
3

i have used html here.

4

i have used html here

the div “body740” is the main div and canvas is the div where the output image is generated and shown.
i have not used php code to implement this functionality.

//some code here 
	<img id="rsimg" src="" style="height:333px;">

//some code

5 
  This is my html code
  
   <div class="body740">
 //some code
 </div>
  <div id="canvas" style="display:none;  float: left;width: 500px;">

	<img id="rsimg" src="" style="height:333px;">
           //some code
      </div>
6

As @molona has said the preview image that displays on the canvas is not the same as the one the one being used in the final save. I could upload a 300dpi image to your server which would take a while on a slow connection.

What you will need to do is convert the image to Base64 (have it start uploading before the user hits save).

Then create low quality image from the orginal (downsampled if needed using imagemagick or something) and save it in memory for use when the does hit save.

7

I think the problem with my code is that the image is generated on the same page. So will it make a difference if I save the image on server and then display the stored image?

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.