HTML2Canvas does not render full div, only what is visible on screen?

Question

I'm trying to use HTML2Canvas to render the contents of a div. Here is the code:

var htmlSource = $('#potenzial-page')[0];

$('#btn').on("click", function() {          

    html2canvas(htmlSource).then(function(canvas) {
        var img = canvas.toDataURL();
        window.open(img);
    });

});

I'm using v5 beta 3.

When this code runs, it only renders what is visible on the screen. The #potenzial-page div is essentially the entire page, minus the header and footer. All content in this div is visible by scrolling (there are some hidden elements, but I do not want the hidden elements visible in the image.)

I cannot find what's wrong or why it won't save the entire div. I should also note that it appears the image is as tall as the div but only partially visible.

To give an example of what I mean, here is a comparison:

The left is how HTML2Canvas should render the div. The right shows how it renders when it runs the code above. The right image is what's visible in my browsers screen.

I did try adding the height option but it doesn't make a difference.

UPDATE

If I scroll to the very top of the page then run the script it will render the entire div as it should.

How do I render the div without having to scroll to the top?

Have you seen this solution in SO : "[Html2canvas converting overflowed content to image](https://stackoverflow.com/q/18012044/445600)" A workaround solution is proposed with setting overflow to visible then render then overflow hidden. — Devernay Stéphane, Mar 25 '16 at 03:42
This probleme is solved : https://github.com/niklasvh/html2canvas/issues/1438#issuecomment-739244530 — zerbene, May 07 '21 at 17:36

score 54 · Answer 1 · answered Jan 21 '20 at 12:39

54

I hope thet help you

html2canvas(htmlSource, {scrollY: -window.scrollY}).then(function(canvas) {
            var img = canvas.toDataURL();
            window.open(img);
        });

answered Jan 21 '20 at 12:39

Роман Слабік

541
4
4

8

The only answer that worked for me. (My particular case is the map is only partially off-screen and only vertically.) – devuxer Apr 27 '20 at 23:02
Thank you for this! I had a button at the bottom of a page which converts some content way above it to an image. This was the key! – Gurnzbot Feb 19 '21 at 03:38
Great job. this really helped me – A.Dumas Apr 06 '21 at 09:07

score 40 · Answer 2 · answered Sep 08 '17 at 13:26

40

A solution that worked for me was to add the following to my css:

.html2canvas-container { width: 3000px !important; height: 3000px !important; }

It prevents html2canvas from limiting the rendering to the viewable area (which seems to be the default).

See here: https://github.com/niklasvh/html2canvas/issues/117

answered Sep 08 '17 at 13:26

jbgt

1,508
19
21

2

You made my day. – omikes Dec 05 '17 at 22:13
This is the best solution! – Adam Jan 18 '22 at 15:14

score 16 · Answer 3 · edited Jun 23 '19 at 08:10

16

I used window.scrollTo()in my case and it worked for me.

Below is a sample code

$('#btn').on("click", function() { 
    window.scrollTo(0,0);     
    html2canvas(htmlSource).then(function(canvas) {
        var img = canvas.toDataURL();
        window.open(img);
    });
    window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
});

edited Jun 23 '19 at 08:10

Matthias Schmidt

505
1
6
24

answered Feb 14 '19 at 07:40

Amit Anand

255
2
6

1

This was a great and quick fix for me. In case you don't care about scrolling to the top this works. – andy Jul 14 '19 at 17:08
Thanks for this! Worked great – Mike Moon Jul 10 '20 at 23:44

score 13 · Answer 4 · answered Sep 25 '19 at 07:43

13

You can add in scroll position as a variable in html2canvas which removes the need to scroll the page.

html2canvas(document.querySelector("#your-element"), { scrollX: 0, scrollY: 0 }).then(function(canvas) {

answered Sep 25 '19 at 07:43

Kaiser47

176
1
4

Perfect. Thank you. – Libin Mar 19 '20 at 13:29
2

Not working as expected. Earlier it was capturing only the visible part, now it captures from the top (fine), but only some part equal to the height which is visible and rest as blank white. – kb0000 Jun 07 '20 at 08:30

score 10 · Answer 5 · answered Sep 07 '19 at 11:50

I just did something like this and it worked for me:

html2canvas(document.querySelector("#capture2image"), {
            allowTaint: true,
            useCORS: true,
            logging: false,
            height: window.outerHeight + window.innerHeight,
            windowHeight: window.outerHeight + window.innerHeight,

score 3 · Answer 6 · answered Jun 24 '19 at 12:47

If you have a height set to the div you want to turn to a canvas - you need to remove that before actually taking the snapshot. Otherwise it will just cut it off because of that height.

 $(".yourElemThatHasSomeHeightSet").css("height", "");

Then you will notice that scrolling down - will still cut your document. Simply do a:

$("html, body").scrollTop(0);

before taking the snapshot.

score 3 · Answer 7 · edited Aug 05 '20 at 08:26

This is how I've achieved in Reactjs.

Main problem were ratio and scale If you do a quick window.devicePixelRatio, it's default value is 2 which was causing the half image issue.

const printDocument = () => {
  const input = document.getElementById('divToPrint');
  const divHeight = input.clientHeight
  const divWidth = input.clientWidth
  const ratio = divHeight / divWidth;

  html2canvas(input, { scale: '1' }).then((canvas) => {
    const imgData = canvas.toDataURL('image/jpeg');
    const pdfDOC = new jsPDF("l", "mm", "a0"); //  use a4 for smaller page

    const width = pdfDOC.internal.pageSize.getWidth();
    let height = pdfDOC.internal.pageSize.getHeight();
    height = ratio * width;

    pdfDOC.addImage(imgData, 'JPEG', 0, 0, width - 20, height - 10);
    pdfDOC.save('summary.pdf');   //Download the rendered PDF.
  });
}

score 1 · Answer 8 · answered Aug 29 '19 at 07:35

1

  window.scrollTo(0,0);

Add this works for me.

answered Aug 29 '19 at 07:35

Ari Abimanyu

73
7

score 1 · Answer 9 · answered May 07 '21 at 11:13

for people dont wanna hacky a way for scroll problem.: dom-to-image

you can scroll while you are snapshotting image
and its much more faster (70x according to this blog ).

blog: https://betterprogramming.pub/heres-why-i-m-replacing-html2canvas-with-html-to-image-in-our-react-app-d8da0b85eadf

in the blog it mentions html-to-image. it is fork of dom-2-image. i used dom-to-image (ancestor , original one).

var node = document.getElementById('my-node');

domtoimage.toPng(node)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

Sai Teja T · Answer 10 · 2021-08-09T06:33:51.123

The following code worked for me:

      window.scrollTo(0, 0);

      html2canvas(htmlRef, {
        scrollX: -window.scrollX,
        scrollY: -window.scrollY,
        windowWidth: document.documentElement.offsetWidth,
        windowHeight: htmlRef.scrollHeight,
      }).then((canvas) => {
        const img = new Image();

        const imgData = canvas
          .toDataURL("image/png")
          .replace("image/png", "image/octet-stream");

        const pdf = new jsPDF("p", "mm", "a4");
        const imgProps = pdf.getImageProperties(imgData);
        const pdfWidth = pdf.internal.pageSize.getWidth();
        const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
        pdf.addImage(imgData, "JPEG", 0, 0, pdfWidth, pdfHeight);
        pdf.save();
      });

score 0 · Answer 11 · answered Oct 16 '20 at 15:14

Another React Approach...

On your submit button on click set the document height dynamically, then call html2canvas using document.body as the first argument

<button onClick={() => {
var body = document.body,
html = document.documentElement;

var height = Math.max(body.scrollHeight, body.offsetHeight,
             html.clientHeight, html.scrollHeight, html.offsetHeight);
             document.body.style.height = `${height}px`

html2canvas(document.body).then(function (canvas) {
                var imgData = canvas.toDataURL('image/pdf')
                var doc = new jsPDF('p', 'mm', [canvas.width, canvas.height])
                doc.addImage(imgData, 'PDF', 10, 10, canvas.width, canvas.height)
                doc.save('name-of-pdf.pdf')
              });
}}>Submit</button>

This will set the html height of public/index.html which html2canvas seems to render from (i.e. not the "root" div).

score 0 · Answer 12 · answered Nov 14 '20 at 16:41

0

This works for me:

  const input = document.getElementById('fragmentForPDF');
  
  // This row fixed problem
  input.parentNode.style.overflow = 'visible';

  html2canvas(input)...

answered Nov 14 '20 at 16:41

Ruslan Valeev

923
10
18

score 0 · Answer 13 · answered Mar 30 '21 at 07:17

window.scrollTo(0, 0); // this will help to print if div hidden or on mobile screen

html2canvas(document.getElementById("my_div_img")).then(function (canvas) 
                 {
                    //for give white BG
                    var context = canvas.getContext('2d');
                    context.save();
                    context.globalCompositeOperation = 'destination-over';
                    context.fillStyle = "rgb(255, 255, 255)";
                    context.fillRect(0, 0, canvas.width, canvas.height);
                    context.restore();
                    var imgData = canvas.toDataURL('image/jpeg', 1);
                    //console.log(imgData);
}

score 0 · Answer 14 · edited Jul 01 '21 at 02:55

0

This worked for me:

html2canvas(el, {
    width: el.scrollWidth,
    height: el.scrollHeight,
})

See here for the source.

edited Jul 01 '21 at 02:55

Aziza Kasenova

1,315
1
7
19

answered Jun 30 '21 at 05:24

TingnoyChannel

1
2

Shiju · Answer 15 · 2022-02-07T11:31:00.993

<div #potentialContainer id="potentialContainer" class="potentialContainer" style="height: auto;">
some large content here--------------------
</div>

import html2canvas from 'html2canvas';

downloadImage() {

html2canvas(document.querySelector('#potentialContainer'), {
  logging: true,
  allowTaint: false,
  useCORS: true,
  width: document.querySelector('#potentialContainer').scrollWidth,
  height: section.scrollHeight,
  scrollX: -window.scrollX,
  scrollY: -window.scrollY,
}).then((canvas) => {
  var imgWidth = 210;
  var pageHeight = 290;
  var imgHeight = canvas.height * imgWidth / canvas.width;
  var heightLeft = imgHeight;


  var doc = new jsPDF('p', 'mm');
  var position = 0;
  var pageData = canvas.toDataURL('image/jpeg', 1.0);
  var imgData = encodeURIComponent(pageData);
  doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
  doc.setLineWidth(5);
  doc.setDrawColor(255, 255, 255);
  doc.rect(0, 0, 210, 295);
  heightLeft -= pageHeight;

  while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    doc.addPage();
    doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
    doc.setLineWidth(5);
    doc.setDrawColor(255, 255, 255);
    doc.rect(0, 0, 210, 295);
    heightLeft -= pageHeight;
  }
  doc.save('file.pdf');

 });
 }

Note:- It is important to add style height:auto

The above code will convert a large image to a multipage pdf

Jaz Pin · Answer 16 · 2022-04-15T05:11:47.100

0

document.getElementById("dld_report").addEventListener("click", function() {
    // Make sure the area you want to take screenshot is visible in CSS
    document.querySelector('#boundary').style.overflow = 'visible'; 
     
    html2canvas(document.querySelector('#boundary'), {
      // Set the height of screenshot image same as page hieght
      height: window.outerHeight + window.innerHeight,
    }).then(function(canvas) {
        saveAs(canvas.toDataURL(), 'report.png');
    });
});
// dld_report -> button to trigger the screenshot

Set style overflow = "visible" and height were the key to make this happen.

edited Apr 15 '22 at 05:11

answered Apr 14 '22 at 07:11

Jaz Pin

117
1
7

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 14 '22 at 07:24

HTML2Canvas does not render full div, only what is visible on screen?

16 Answers16

Linked

Related