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 相关文章推荐
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
Dec 08 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
html5调用摄像头功能的实现代码
May 07 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 HTML / CSS
使用Html5中的cavas画一面国旗
Sep 25 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 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中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
python的继承知识点总结
2018/12/10 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
早餐连锁店计划书
2014/01/08 职场文书
竞聘演讲稿范文
2014/01/12 职场文书
中考冲刺决心书
2014/03/11 职场文书
2014年班主任自我评价范文
2014/04/23 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
语文教研活动总结
2014/07/02 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
付款证明格式范文
2015/06/19 职场文书
校运会班级霸气口号
2015/12/24 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js