html2canvas生成的图片偏移不完整的解决方法


Posted in HTML / CSS onMay 19, 2020

情景一:

问题背景:生成的图片在一个弹窗里面,如果页面没有滚动条就是正常的,但是一旦出现滚动条并且页面发生滚动时html2canvas绘制成的图片就会偏移出对应滚动高度的白边,如下:

html2canvas生成的图片偏移不完整的解决方法
 

解决办法
 

楼主查了很多资料,也用了很多方法都没能解决这个问题,一气之下打算研究研究html2canvas的配置参数,果不其然,在配置参数RenderOptions下找到如下配置

html2canvas生成的图片偏移不完整的解决方法
 

眼尖的楼主立马发现了scrollY这个东西。没错,这个肯定是配置偏移量的对吧,既然你是向下偏移我页面滚动的高度,那我把scrollY设置为负的那不就好了吗,说干就干。于是楼主设置了{scrollY: -window.pageYOffset},结果发生诡异的事,它倒是不向下偏移了,却开始向上偏移,如下

html2canvas生成的图片偏移不完整的解决方法
 

这个世界是怎么了,于是楼主又设置{scrollY: 0},再次查看,解决了。
 

html2canvas生成的图片偏移不完整的解决方法
 

原来,是因为在不设置scrollY的情况下,canvas绘制页面时会根据全局页面的滚动情况自动向下偏移。当然了,scrollX也是一样的道理。

奉上代码:
 

scrollY: 0, 其他的参数根据自己情况配置,这个参数一定不能少

var htmlDom = document.getElementsByClassName('dialog_content')[0];

html2canvas(htmlDom, {
    logging: false, //日志开关,便于查看html2canvas的内部执行流程
    width: htmlDom.clientWidth, //dom 原始宽度
    height: htmlDom.clientHeight,
    scrollY: 0, 
    scrollX: 0,
    useCORS: true // 【重要】开启跨域配置
}).then(canvas => {
    var url = canvas.toDataURL();//图片地址
    htmlDom.appendChild(canvas);
});

情景二:
 

用html2canvas绘制完图片后,始终会有个偏移距离,之前的解决办法是设scrollY: 0,scrollX: 0这两个参数为0,但是这次怎么弄都不行,最后排查出的原因是因为绘制的box上加了transform:translateX(-50%)这个样式。

解决办法:

用户绘图的区域不用transform来定位,换一种没有偏移的方式,比如设置百分比或者固定宽高。

到此这篇关于html2canvas生成的图片偏移不完整的解决方法的文章就介绍到这了,更多相关html2canvas生成图片偏移内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3的Flexbox布局的简明入门指南
Apr 08 HTML / CSS
CSS3效果:自定义“W”形运行轨迹实例
Mar 29 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
HTML5 3D衣服摇摆动画特效
Mar 17 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
Apr 08 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
Oct 28 HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
Dec 06 HTML / CSS
html5简介及新增功能介绍
May 18 #HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 #HTML / CSS
Html5在手机端调用相机的方法实现
May 13 #HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 #HTML / CSS
钉钉企业内部H5微应用开发详解
May 12 #HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 #HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 #HTML / CSS
You might like
在线短消息收发的程序,不用数据库
2006/10/09 PHP
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
php获取文件大小的方法
2014/02/26 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
js jquery数组介绍
2012/07/15 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
Python的requests网络编程包使用教程
2016/07/11 Python
简单的python后台管理程序
2017/04/13 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
Python坐标线性插值应用实现
2019/11/13 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
python中time.ctime()实例用法
2021/02/03 Python
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
视图的作用
2014/12/19 面试题
护士自我评价
2014/02/01 职场文书
安全生产大检查方案
2014/05/07 职场文书
联片教研活动总结
2014/07/01 职场文书
教师政风行风自查自纠报告
2014/10/21 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
聘任书的格式及模板
2019/10/28 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
Redis分布式锁的7种实现
2022/04/01 Redis