html2canvas截图空白问题的解决


Posted in HTML / CSS onMarch 24, 2020

最近在项目中遇到一个需求,需要提供网页截图的功能。百度下发现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);
});

遇到的问题

按照这个方式使用,页面没有滚动条还行,有滚动条时出现大片空白。

错误截图如下:

html2canvas截图空白问题的解决

解决方案

仔细看了一下configuration.md和网友的分析,最终解决。代码片段如下

html2canvas截图空白问题的解决

上一张正确的截图如下:

html2canvas截图空白问题的解决

代码中的配置项说明

1、截图产生空白是因为容器高度设置的问题,设置windowHeight的高度等于页面包含滚动条的高度即可获取滚动条中的内容。这一条就可以解决空白的问题。
2、设置width、height属性的原因是,我们在页面中截图显示的区域宽度和高度是固定的,就是当前屏幕的可见区域。
3、设置x、y坐标的原因是由于页面在有滚动条的时候,需要指定截图的起始位置。本项目中x轴方向不存在滚动条,所以设置为零;y方向有滚动条,所以需要获取一下当前方向的滚动坐标。
4、一般网页中会有图片,图片中有链接地址时,设置useCORS属性可保证图片的加载。

到此这篇关于html2canvas截图空白问题的解决的文章就介绍到这了,更多相关html2canvas截图空白内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 HTML / CSS
详解CSS3的perspective属性设置3D变换距离的方法
May 23 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
使用CSS连接数据库的方式
Feb 28 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 #HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 #HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 #HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 #HTML / CSS
canvas实现手机的手势解锁的步骤详细
Mar 16 #HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 #HTML / CSS
html5默认气泡修改的代码详解
Mar 13 #HTML / CSS
You might like
PHP中CURL方法curl_setopt()函数的参数分享
2013/01/19 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
判断js的Array和Object的实现方法
2016/08/29 Javascript
原生js开发的日历插件
2017/02/04 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
用Django写天气预报查询网站
2018/10/21 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
python中import与from方法总结(推荐)
2019/03/21 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
html5中valid、invalid、required的定义
2014/02/21 HTML / CSS
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
《黄山奇石》教学反思
2014/04/19 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
嘉宾邀请函
2015/01/31 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python