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实现的8种Loading动画效果
Jul 05 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
详解css3中的伪类before和after常见用法
Nov 17 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
html5图片上传预览示例分享
Apr 14 HTML / CSS
使用phonegap进行提示操作的具体方法
Mar 30 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
html实现弹窗的实例
Jun 09 HTML / CSS
在HTML中引入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
新手学PHP之数据库操作详解及乱码解决!
2007/01/02 PHP
让CodeIgniter的ellipsize()支持中文截断的方法
2014/06/12 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
Yii使用技巧大汇总
2015/12/29 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
简单JS代码压缩器
2006/10/12 Javascript
Javascript 构造函数 实例分析
2008/11/26 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
Hibernate持久层技术
2013/12/16 面试题
个人求职简历中英文自我评价
2013/12/16 职场文书
单位未婚证明范本
2014/01/18 职场文书
医学类个人求职信范文
2014/02/05 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
高中教师个人总结
2015/02/10 职场文书
学校党支部公开承诺书
2015/04/30 职场文书
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python