android截图canvas为空,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截图空白内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

android截图canvas为空,html2canvas截图空白问题的解决相关推荐

html2canvas截图丢失部分元素
html2canvas截图丢失部分元素 html2canvas截图丢失所选区域的部分元素 //这是我需要截取的元素 //截取之后,图中会丢失一些模块请问有哪位道友遇到过类似的问题??? 相关代码 l ...
html转换成canvas一片空白,html2canvas截图空白问题怎么解决 html2canvas截图空白问题解决方法...
本篇文章小编给大家分享一下html2canvas截图空白问题解决方法,通过代码图文详细分析了问题及解决方法,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 项目使用的reac ...
前端 - html2canvas 截图显示空白
一.工作原理 html2canvas库的工作原理并不是真正的"截图",而是读取网页上的目标DOM节点的信息来绘制canvas,所以它并不支持所有的css属性. 二.在 img标签中 ...
html2canvas 截图图片为空白无法截图
html2canvas 截图图片类型为空白解决办法图片地址不是本地图片是网络图会出现截取后为空白的情况 1.此时可以让后台返给你base64的图片地址就可以截取了 2.做个静态转化先存在本地 ...
vue页面截图用html2canvas截图不完整有滚动条+有echarts图表时完整截图——截图保存为图片或pdf
问题最开始需要做一个网页的截图,结果发现有滚动条怎么都截取不成功,然后各种百度到了一个办法,就是复制那个节点到body,然后在截取那个复制的节点,小页面实验了一下,成功了好开心,代码是这样的.但是, ...
在vue项目中使用html2canvas截图（固定区域截图）
1.项目目录下,打开dos窗口使用cnpm安装html2canvas插件. cnpm isntall html2canvas 2.在使用html2canvas的页面中,引入插件. import htm ...
关于html2canvas截图模糊的CDN版本差异的一个坑
问题项目使用html2canvas截图,存在截图模糊.左边是原html,右边是html2canvas生成的截图,明显发现html2canvas生成的模糊一大截查了解决办法,解决html2canva ...
html2canvas截图图片另存并解决图片模糊问题
最近由于公司业务要求,需要完成一个HTML页面效果渲染后生成照片的功能,功能的核心是把HTML代码展现的内容转化为png或者jpg图片.接到这个任务的时候,我心里是一脸懵逼的,于是就上谷歌搜索插件,还 ...
html2canvas截图的使用
html2canvas截图的使用前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家.大家及时保存,说不定啥 ...

android截图canvas为空,html2canvas截图空白问题的解决

android截图canvas为空,html2canvas截图空白问题的解决相关推荐

最新文章

热门文章