当body高度超过30000像素时，html2canvas返回无效图像(html2canvas returns invalid image when the body height is more than 30000 pixels)
当我需要捕获放置在长度超过30000像素的html主体上的控件时，html2canvas库表现得很奇怪。 我的控制很小(100 x 100) - 但是当身体很长时，脚本不起作用。
这里有两个小提琴，一个是工作，另一个是不工作不同的体型
$(document).ready(function() {
$('#test').on('click', function() {
html2canvas(document.getElementById('container'), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
},
});
});
});
test
在上面的示例中，库返回一个图像 - 但数据无效。 如果我将身高改为20000像素，一切正常
The html2canvas library behaves strangely when I need to capture a control placed on an html body which is more than 30000 pixels long. My control is small (100 x 100) - but the script doesn't work when the body is long.
Here are two fiddles one is working other one is not working different body sizes
$(document).ready(function() {
$('#test').on('click', function() {
html2canvas(document.getElementById('container'), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
},
});
});
});
test
In the above example, the library returns an image - but the data is not valid. If I change the body height to something like 20000 pixels, everything works fine
原文：https://stackoverflow.com/questions/37520013
更新时间：2020-06-01 20:06
最满意答案
html2canvas库创建一个画布，其宽度高度是文档正文的宽度和高度。 如果文档宽度或高度超过浏览器允许的最大宽度和高度，则无法为该文档正文创建画布，这就是我获取无效图像的原因。
为了解决这个问题，我克隆了要转移到图像的元素并设置到文档的顶部( 'position: absolute; top: 0' )并从中获取图像。 获取图像后，我删除了克隆元素。 记得这样做我们需要设置“html2canvas”库选项的width和height属性。
我的情况我的元素最大高度是1000px而我设置了3000,3000因此它可以覆盖位于顶部的整个元素。
注意：不要设置不可见或隐藏克隆元素。
html2canvas($parentNode, {
width: 3000,
height:3000,
onrendered: function(canvas) {
console.log(canvas.toDataURL());
$parentNode.remove(); //removing cloned element
}
});
finally I found why this happens based on this stackoverflow answer
the html2canvas library creates a canvas its width height is the width and height of document body. If document width or height exceeds the maximum width and height allowed by the browser then its failed to create the canvas for that document body that why I am getting a invalid image.
To solve this problem I cloned the Element which to be transfer to image and set to the top of the document ('position: absolute; top: 0') and get the image from it. after get the image I removed that cloned element. remember to do this we need to set width and height property of "html2canvas" library options.
I my case my element max height is 1000px and I set 3000, 3000 therefore it can be cover entire element which positioned top.
note: Do not set invisible or hide the cloned element.
html2canvas($parentNode, {
width: 3000,
height:3000,
onrendered: function(canvas) {
console.log(canvas.toDataURL());
$parentNode.remove(); //removing cloned element
}
});
相关问答
最后我发现为什么这会发生在这个stackoverflow的答案 html2canvas库创建一个画布，其宽度高度是文档正文的宽度和高度。 如果文档宽度或高度超过浏览器允许的最大宽度和高度，则无法为该文档正文创建画布，这就是我获取无效图像的原因。 为了解决这个问题，我克隆了要转移到图像的元素并设置到文档的顶部( 'position: absolute; top: 0' )并从中获取图像。 获取图像后，我删除了克隆元素。 记得这样做我们需要设置“html2canvas”库选项的width和height
...
#container的图像必须来自与页面相同的原点，否则您将不得不通过base64嵌入它们。 使用base64映像工作JSFiddle Either the images in the #container must come from the same origin as the page, or you will have to embed them via base64. Working JSFiddle with base64 images
这是浏览器默认CSS的一部分，一切都无法访问html2canvas，它不应该(可能会泄漏某些操作系统上的隐私信息)。 也许这个确切的一个可以对chrome进行调整，因为chrome确实暴露了它的一些shadow选择器 ，但我甚至不知道它是否在列表中，并且无论如何，因为这些选择器可能随时在未来，下面是我在FF上的样子： 所以最适合你的是完全从头开始创建下拉菜单。 这样，所有的UA都会显示相同的内容，并且html2canvas将能够“快照”它。 This is part of browsers def
...
您可以使用缩略图尺寸创建其他新的 ，并使用drawImage()将其缩小到新的 。 drawImage()可以读取作为image源，你可以设置目标的宽度和高度。 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images You can create additional new with thumbnail dimensi
...
解决：更改html2cannvas的版本。 我以前使用html2canvas 0.5.0-alpha 2014版本我切换到html2canvas 0.5.0-alpha1。 它可以正确生成图像，并且不会花时间这样做。 您可以从https://github.com/niklasvh/html2canvas/releases下载这些文件 Solved : Change the version of html2cannvas. I was previously using html2canvas 0.5
...
逻辑上，渲染适用于您选择的元素。 所以不会得到背景，除非你选择“父元素”或“根元素”。 我有两个解决方案： 1 -使用Javascript / Jquery，您可以从div＃target捕获X和Y位置，然后在div＃target中设置背景图像和背景位置X / Y位置 2 -使用html2canvas捕获
，然后使用canvas/javascript api通过X / Y位置裁剪图像和div＃target的宽度/高度，参见示例：＃242(注释)注意：设置width / height /...
你的问题很简单，请添加 allowTaint:true,
像这样的选项 window.takeScreenShot = function() {
html2canvas(document.getElementById("target"), {
onrendered: function (canvas) {
document.body.appendChild(canvas);
},
allowTaint:true,
useCORS:
...
我终于通过搜索更多about html2canvas来解决了这个问题。 你只需要添加 data-html2canvas-ignore="true"
在你的html元素中隐藏渲染的div。 喜欢这个
I finally solved this with searching more about html2canvas. You just need to add
...
html2canvas或Canvas2Image不适用于外部图像。 脚本使用的所有图像都需要位于相同的原点以便能够读取它们。 参考 使用图像的相对路径并尝试： 工作代码： $(function() {
$("#btnSave").click(function() {
html2canvas($("#html-to-canvas"), {
onrendered: function(canvas) {
Canvas2Image.saveAsPNG(canvas)
...
当然身高100％的身体应该是身体标签内所有内容/页面的高度 不可以。 height: 100%表示“元素内容高度的100％”不是“元素内容高度的100％”。 HTML元素的容器(有效地)是视口。 但仍会显示此653px以下的内容。 overflow的默认值不会被hidden 。 Surely body with height 100% should be the height of all the content/page within the body tag No. The height: 1
...
1196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
