Question

我有一个非常长的网页，我想拍一张照片。

尺寸大约在1100x6600左右，每次使用html2canvas时，它都会获得全宽和长度，但图像最终只是我想看到的一小部分。

有没有更简单的方法让整个图像适合1100x6600区域？

以下是一段代码，它将标题的一部分放到了图像的底部。

function getScreenshot(){
    html2canvas(document.getElementById("entireBody")).then(function(canvas) {
      var image = document.createElement("canvas");

      image.setAttribute('width', 1163);
      image.setAttribute('height', 6659);

      var context = image.getContext("2d");
      context.drawImage(canvas, 0, 0, 1163, 6659);

      var dataURL = image.toDataURL();

      window.open(dataURL);
    });
  }

Answer 1

我认为在使用html2canvas时我遇到了类似的问题。我发现屏幕上没有的页面部分没有放入画布。

我为此做了一个临时的解决方法，通过稍微更改库来渲染我想要的所有部分，即使它们不在屏幕上。

使用版本0.5.0我改变了这一部分：

return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index)

到

return renderDocument(node.ownerDocument, options, 10000, 10000, index)

这实际上是告诉html2canvas在可见窗口之外渲染（10,000像素的宽度和高度）。我将它改为10000，因为它符合我的需要，但如果你愿意，你可以在这里做一些更直观的事。

我看到该项目正在积极开发，所以希望这个问题能得到解决，但同时我希望这会有所帮助！

html2canvas无法获取整个图像

1 个答案: