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 相关文章推荐
CSS3属性box-sizing使用指南
Dec 09 HTML / CSS
css3 伪类选择器快速复习小结
Sep 10 HTML / CSS
css3媒体查询中device-width和width的区别详解
Mar 27 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
分享全球十款超强HTML5开发工具
May 14 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 HTML / CSS
详解html5页面 rem 布局适配方法
Jan 12 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
用CSS3画一个爱心
Apr 27 HTML / CSS
HTML中的表单Form实现居中效果
May 25 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 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
图象函数中的中文显示
2006/10/09 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
简介Django中内置的一些中间件
2015/07/24 Python
解决Mac下使用python的坑
2019/08/13 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
欧克利英国官网:Oakley英国
2019/08/24 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
会计电算化专业毕业生推荐信
2013/12/24 职场文书
党员的自我评价范文
2014/01/02 职场文书
心理学专业求职信
2014/06/16 职场文书
幼儿园标语大全
2014/06/19 职场文书
小学教师师德整改措施
2014/09/29 职场文书
公司租车协议书
2015/01/29 职场文书
自我推荐信怎么写
2015/03/24 职场文书
股东大会通知
2015/04/24 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis