Html2canvas: 当文档正文高度超过 30,000 像素时，返回任何元素的空白图像。

创建于 2016-05-31 · 16评论 · 资料来源: niklasvh/html2canvas

当文档正文超过 30,000 像素时，库将返回一个空图像。您会尝试捕获 100 x 100 的元素。但是您会得到一个空白图像，该元素位于高大的身体上。

这是一个演示此错误的小提琴。

https://jsfiddle.net/fvo1xh8b/2/

您可以将主体尺寸更改为 30,000 以下，并且效果很好。

Needs More Information

资料来源

charlie-lk

最有用的评论

@niklasvh这是一个艰难的问题，但实际上是由于画布大小的限制。我认为这需要再次讨论如何实施正确的行为。绝对洗白的图像不是正确的行为。

默认最大宽度/高度为浏览器对画布的要求
使用多个画布元素进行分而治之，并返回一个数组。
在控制台中抛出一个错误，建议画布限制并建议实现它的方法。

在我的情况下，我克隆了整个身体并设置了最大宽度/高度： html2canvas(el, {height: 3000, width: 3000}) 。

toadkicker 于 2018-10-10

👍9 ❤2 🎉2 👎1

所有16条评论

我和你有完全相同的问题。你有没有找到任何解决办法？

Sebastianvarv 于 2017-02-15

http://stackoverflow.com/questions/37520013/html2canvas-returns-invalid-image-when-the-body-height-is-more-than-30000-pixels

charlie-lk 于 2017-02-15

嗯，我遇到了同样的问题，但最后，我想通了！
就我而言，这是我的解决方案：
将 iframe 放入您的 body 元素中，例如

<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>

以及你需要隐蔽到canvas的每一个元素，你可以将它们复制并放在这个iframe中，并使用html2canvas，然后将其删除，就像这样

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);

netweng 于 2017-10-25

这仍然是v1.0.0的问题吗？如果是这样，你能不能分享一个关于jsfiddle的例子。

niklasvh 于 2017-12-12

此问题已自动关闭，因为我们要求原作者提供更多信息的请求没有得到回应。只有当前问题中的信息，我们没有足够的信息来采取行动。如果您有或找到我们需要的答案，请联系我们，以便我们进一步调查。

no-response[bot] 于 2017-12-12

嗨，当我尝试使用内部 ip 摄像头筛选 iframe 时，它返回一个无效图像，请您帮帮我吗？

AntonioDilorenzo 于 2018-08-21

@niklasvh这是一个艰难的问题，但实际上是由于画布大小的限制。我认为这需要再次讨论如何实施正确的行为。绝对洗白的图像不是正确的行为。

默认最大宽度/高度为浏览器对画布的要求
使用多个画布元素进行分而治之，并返回一个数组。
在控制台中抛出一个错误，建议画布限制并建议实现它的方法。

在我的情况下，我克隆了整个身体并设置了最大宽度/高度： html2canvas(el, {height: 3000, width: 3000}) 。

toadkicker 于 2018-10-10

👍9 ❤2 🎉2 👎1

@toadkicker兄弟，你今天保存了我的代码/工作哈哈哈哈哈哈哈哈，非常感谢

leandrosouza0786 于 2019-09-26

@toadkicker谢谢！

Liberateur 于 2019-12-24

嗯，我遇到了同样的问题，但最后，我想通了！
就我而言，这是我的解决方案：
将 iframe 放入您的 body 元素中，例如
<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>
以及你需要隐蔽到canvas的每一个元素，你可以将它们复制并放在这个iframe中，并使用html2canvas，然后将其删除，就像这样
const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);

我试过这种方法，但不完全有效。以我的方式，将使用以下代码：

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

如果您想应用与当前文档中相同的 css 样式，您还需要将样式复制到 iframe：

// add style
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'your_style_file_url.css';
canvas_handler.contentDocument.head.appendChild(link);

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

ricosmall 于 2020-03-16

同样，这是浏览器本身的限制，该库无法正确处理错误。除了限制捕获的像素数量外，没有任何编码解决方案会改变它。

toadkicker 于 2020-03-16

嗯，我遇到了同样的问题，但最后，我想通了！
就我而言，这是我的解决方案：
将 iframe 放入您的 body 元素中，例如
<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>
以及你需要隐蔽到canvas的每一个元素，你可以将它们复制并放在这个iframe中，并使用html2canvas，然后将其删除，就像这样
const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);

我试过这种方法，但不完全有效。以我的方式，将使用以下代码：

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

如果您想应用与当前文档中相同的 css 样式，您还需要将样式复制到 iframe：

// add style
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'your_style_file_url.css';
canvas_handler.contentDocument.head.appendChild(link);

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

就我而言，所有元素都是 svg 或内联样式，因此我不需要附加样式表。但是是的，如果需要，您应该添加样式表

netweng 于 2020-03-30

我遇到了同样的问题。我需要从模态窗口（具有固定位置）制作图像。我总是收到一张白色的图像。问题出在滚动位置。这段代码对我有用：

const el = document.getElementById('html-to-canvas-area')
const area = el.getBoundingClientRect()
html2canvas(el, {
  scrollX: 0,
  scrollY: 0,
  width: area.width,
  height: area.height
})

invisor 于 2020-09-24

🎉5 👍3 ❤1

像魅力一样为我工作！感谢您的巧妙解决方案！

flaviostutz 于 2020-09-30

@invisor救命稻草！这是唯一对我有用的东西。

MEGApixel23 于 2020-10-26

这些选项也可能是滚动相关案例的解决方案

{
  scrollX: 0,
  scrollY: -window.scrollY
}

seahindeniz 于 2020-11-09

❤2 🎉1

此页面是否有帮助？

0 / 5 - 0 等级

Html2canvas: 当文档正文高度超过 30,000 像素时，返回任何元素的空白图像。

最有用的评论

所有16条评论

相关问题