CODEWITHSUNDEEP
javascripthtmlcssscreenshothtml2canvas
Michael Kim
Michael Kim

Reputation: 23

html2canvas not getting the whole image

I have an extremely long webpage that I want to take a picture of.

The dimensions are roughly around 1100x6600 and everytime I use html2canvas, it does get the full width and length, but the image ends up just being a very small portion of what I want to see.

Is there a simpler way to get the entire image to fit onto that 1100x6600 area?

Here is a snippet of code that got me a portion of the header onto the bottom of the image.

function getScreenshot(){
    html2canvas(document.getElementById("entireBody")).then(function(canvas) {
      var image = document.createElement("canvas");

      image.setAttribute('width', 1163);
      image.setAttribute('height', 6659);

      var context = image.getContext("2d");
      context.drawImage(canvas, 0, 0, 1163, 6659);

      var dataURL = image.toDataURL();

      window.open(dataURL);
    });
  }

Upvotes: 1

Views: 1322

Answers (1)

Eric
Eric

Reputation: 111

I think I had a similar issue to this while using html2canvas. I found that it was the parts of the page that were not on the screen were not put into the canvas.

I have put in a temporary workaround for this by changing the library a little bit to render all parts that I want even if they are off screen.

Using version 0.5.0 I changed this part:

return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index)

to

return renderDocument(node.ownerDocument, options, 10000, 10000, index)

Which is essentially telling html2canvas to render outside the visible window (10,000 pixels width and height). I changed it to be 10000 each way as it suited my needs, but you could do something a bit more intuitive here if you wanted to.

I see the the project is being actively developed again, so there's hope that this issue will be fixed, but in the mean time, I hope this helps!

Upvotes: 0

Related Questions