html2canvas生成图片空白,html2canvas截图不全,上边有白边

　　最近在项目中遇到一个需求，需要网页截图的功能。百度发现html2canvas非常好用。那就试试吧。

　　资源下载地址

　　插件下载地址：html2canvas下载地址

　　使用方式

　　项目中使用的react组件开发方法。请参考官方说明文档getting-started.md并遵循以下步骤：

　　1.使用以下命令安装

　　Npm安装html2canvas - save2，将html2canvas引入文件。

　　从“html2canvas”导入html 2 can vas；3.在文档中使用

　　html2canvas(document.body)。然后(function(canvas){ document . body . appendchild(canvas)；});遇到的问题

　　按照这个方法，页面没有滚动条是可以的，但是有滚动条的时候就有很大的空白。

　　错误截图如下：

　　解决方案

　　仔细看看configuration.md和网友的分析，最后解决。代码片段如下

　　最后正确的截图如下：

　　代码中配置项的描述

　　1.空白屏幕快照是由容器的高度设置引起的。通过将windowHeight的高度设置为等于页面上滚动条的高度，可以获取滚动条中的内容。这个可以解决空白问题。

　　2.设置宽度和高度属性的原因是页面截图中显示的区域的宽度和高度是固定的，是当前屏幕的可见区域。

　　3.设置x和y坐标的原因是当页面有滚动条时，需要指定截图的起始位置。这个项目的X轴方向没有滚动条，所以设置为零；y方向有滚动条，所以需要获取当前方向的滚动坐标。

　　4.一般网页都会有图片。当图片中有链接地址时，设置useCORS属性可以保证图片的加载。

　　本文关于html2canvas截图空白问题的解决方案到此为止。更多相关html2canvas截图空白内容，请搜索往期文章或继续浏览下方相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。