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 渐变(Gradients)之CSS3 线性渐变
Jul 08 HTML / CSS
需要知道的CSS3动画技术
Jan 01 HTML / CSS
使用css3制作动感导航条示例
Jan 26 HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
May 31 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
Jul 11 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 HTML / CSS
CSS3实现的侧滑菜单
Apr 27 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
May 24 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 session应用实例 登录验证
2009/03/16 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
2006/11/30 Javascript
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
Python入门_浅谈for循环、while循环
2017/05/16 Python
python ddt实现数据驱动
2018/03/14 Python
Python实现按中文排序的方法示例
2018/04/25 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
Python对象的属性访问过程详解
2020/03/05 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
Python如何实现机器人聊天
2020/09/10 Python
python实现简单文件读写函数
2021/02/25 Python
美国手机支架公司:PopSockets
2019/11/27 全球购物
介绍一下Python下range()函数的用法
2013/11/07 面试题
优秀村官事迹材料
2014/01/10 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
小学班主任教育随笔
2015/08/15 职场文书
科级干部培训心得体会
2016/01/06 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js
python数字图像处理之图像的批量处理
2022/06/28 Python