Javascript HTML2Canvas 不呈现完整的 div，只有屏幕上可见的内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36213275/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML2Canvas does not render full div, only what is visible on screen?
提问by L84
I'm trying to use HTML2Canvasto render the contents of a div. Here is the code:
我正在尝试使用HTML2Canvas来呈现 div 的内容。这是代码：
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.
我正在使用 v5 beta 3。
When this code runs, it only renders what is visible on the screen. The #potenzial-pagediv 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.)
当此代码运行时，它只呈现屏幕上可见的内容。该#potenzial-pageDIV实际上就是整个页面，减去页眉和页脚。通过滚动可以看到此 div 中的所有内容（有一些隐藏元素，但我不希望隐藏元素在图像中可见。）
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.
我找不到问题所在或为什么它不会保存整个 div。我还应该注意到，图像似乎与 div 一样高，但只有部分可见。
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.
左边是 HTML2Canvas 应该如何呈现 div。右边显示了它在运行上面的代码时的呈现方式。正确的图像是在我的浏览器屏幕中可见的图像。
I did try adding the heightoption but it doesn't make a difference.
我确实尝试添加该height选项，但没有任何区别。
UPDATE
更新
If I scroll to the very top of the page thenrun the script it will render the entire div as it should.
如果我滚动到页面的最顶部，然后运行脚本，它将按原样呈现整个 div。
How do I render the div without having to scroll to the top?
如何在不必滚动到顶部的情况下渲染 div？
回答by Jean-Baptiste Martin
A solution that worked for me was to add the following to my css:
对我有用的解决方案是将以下内容添加到我的 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).
它可以防止 html2canvas 将渲染限制在可视区域（这似乎是默认设置）。
See here: https://github.com/niklasvh/html2canvas/issues/117
回答by Роман Слаб?к
I hope thet help you
我希望能帮到你
html2canvas(htmlSource, {scrollY: -window.scrollY}).then(function(canvas) {
var img = canvas.toDataURL();
window.open(img);
});
回答by Rubensac
You can add in scroll position as a variable in html2canvas which removes the need to scroll the page.
您可以在 html2canvas 中添加滚动位置作为变量，从而无需滚动页面。
html2canvas(document.querySelector("#your-element"), {
scrollX: 0,
scrollY: 0
}).then(function(canvas) {
html2canvas(document.querySelector("#your-element"), {
scrollX: 0,
scrollY: 0
}).then(function(canvas) {
回答by Amit Anand
I used window.scrollTo()in my case and it worked for me.
我window.scrollTo()在我的情况下使用过，它对我有用。
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);
});
回答by NSP
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.
如果您将高度设置为要转换为画布的 div - 您需要在实际拍摄快照之前将其删除。否则它会因为那个高度而将其切断。
$(".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.
在拍摄快照之前。
回答by Ricky Levi
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,
回答by Devernay Stéphane
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.
您是否在 SO 中看到过此解决方案：“ Html2canvas 将溢出的内容转换为图像” 提出了一种解决方法，将溢出设置为可见，然后渲染然后隐藏溢出。
回答by Ari Abimanyu
window.scrollTo(0,0);
Add this works for me.
添加这对我有用。
