html2canvas截图空缺题目的办理

最近在项目中碰着一个需求，必要提供网页截图的成果。百度下发明html2canvas很好用。那就试试吧。

资源下载地点

插件下载地点：html2canvas下载地点

行使方法

项目行使的react组件开拓方法。参照官方的声名文档getting-started.md,凭证以下步调举办：

1、行使以下呼吁安装

npm install html2canvas --save

2、在文件中引入html2canvas

import html2canvas from 'html2canvas';

3、文件中的行使

html2canvas(document.body).then(function(canvas) { document.body.appendChild(canvas); });

碰着的题目

凭证这个方法行使，页面没有转动条还行，有转动条时呈现大片空缺。

错误截图如下：

办理方案

细心看了一下configuration.md和网友的说明，最终办理。代码片断如下

上一张正确的截图如下：

代码中的设置项声名

1、截图发生空缺是由于容器高度配置的题目，配置windowHeight的高度便是页面包括转动条的高度即可获取转动条中的内容。这一条就可以办理空缺的题目。
2、配置width、height属性的缘故起因是，我们在页面中截图表现的地区宽度和高度是牢靠的，就是当前屏幕的可见地区。
3、配置x、y坐标的缘故起因是因为页面在有转动条的时辰，必要指定截图的起始位置。本项目中x轴偏向不存在转动条，以是配置为零；y偏向有转动条，以是必要获取一下当前偏向的转动坐标。
4、一样平常网页中会有图片，图片中有链接地点时，配置useCORS属性可担保图片的加载。

到此这篇关于html2canvas截图空缺题目的办理的文章就先容到这了,更多相干html2canvas截图空缺内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!