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 object-fit属性
Jul 27 HTML / CSS
CSS3中的5个有趣的新技术
Apr 02 HTML / CSS
使用JS+CSS3技术:让你的名字动起来
Apr 27 HTML / CSS
css3的transform中scale缩放详解
Dec 08 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 HTML / CSS
DIV CSS实现网页背景半透明效果
Dec 06 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 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
终于听上了直流胆调频
2021/03/02 无线电
PHP XML备份Mysql数据库
2009/05/27 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
javascript学习网址备忘
2007/05/29 Javascript
JQUERY获取form表单值的代码
2010/07/17 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
浅析JavaScript声明变量
2015/12/21 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
axios学习教程全攻略
2017/03/26 Javascript
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
Python中collections模块的基本使用教程
2018/12/07 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
python调用c++传递数组的实例
2019/02/13 Python
python实现串口自动触发工作的示例
2019/07/02 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
什么是数据抽象
2016/11/26 面试题
小区文明倡议书
2014/05/16 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
小爸爸观后感
2015/06/15 职场文书
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python