HTML2Canvas不会呈现完整的div，只有屏幕上可见的内容? [英] HTML2Canvas does not render full div, only what is visible on screen?

问题描述

我正在尝试使用

左侧是HTML2Canvas呈现div的方式.右侧显示了运行上面的代码时它的呈现方式.正确的图像是我的浏览器屏幕上可见的图像.

我确实尝试添加 height 选项，但没有任何区别.

UPDATE

如果我滚动到页面的最上方，然后运行脚本，它将按原样呈现整个div.

如何在无需滚动到顶部的情况下渲染div?

解决方案

希望对您有帮助

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

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?

解决方案

I hope thet help you

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

这篇关于HTML2Canvas不会呈现完整的div，只有屏幕上可见的内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！