html2canvas截图空白难题的处理

近期在新项目中遇到1个要求，必须出示网页页面截图的作用。百度搜索下发现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);
});

遇到的难题

依照这个方法应用，网页页面沒有翻转条还行，有翻转条时出現大片空白。

不正确截图以下：

处理计划方案

细心看了1下configuration.md和网友的剖析，最后处理。编码片断以下

上1张正确的截图以下：

编码中的配备项表明

1、截图造成空白是由于器皿高宽比设定的难题，设定windowHeight的高宽比等于网页页面包括翻转条的高宽比便可获得翻转条中的內容。这1条便可以处理空白的难题。
2、设定width、height特性的缘故是，大家在网页页面中截图显示信息的地区宽度和高宽比是固定不动的，便是当今显示屏的可见地区。
3、设定x、y座标的缘故是因为网页页面在有翻转条的情况下，必须特定截图的起止部位。本新项目中x轴方位不存在翻转条，因此设定为零；y方位有翻转条，因此必须获得1下当今方位的翻转座标。
4、1般网页页面中会有照片，照片中有连接详细地址时，设定useCORS特性可确保照片的载入。

到此这篇有关html2canvas截图空白难题的处理的文章内容就详细介绍到这了,更多有关html2canvas截图空白內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容，期待大伙儿之后多多适用脚本制作之家！