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

问题

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?

回答1:

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

回答2:

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.

回答3:

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) {

回答4:

Have you seen this solution in SO : "Html2canvas converting overflowed content to image" A workaround solution is proposed with setting overflow to visible then render then overflow hidden.

回答5:

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);
});

回答6:

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,

回答7:

  window.scrollTo(0,0);

Add this works for me.

来源：https://stackoverflow.com/questions/36213275/html2canvas-does-not-render-full-div-only-what-is-visible-on-screen

标签

javascript

html2canvas