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盒子模型详解
Apr 24 HTML / CSS
CSS3正方体旋转示例代码
Aug 08 HTML / CSS
使用css3制作登录表单的步骤
Apr 07 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
Oct 21 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
canvas探照灯效果的示例代码
Nov 30 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 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 301转向实现代码
2008/09/18 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
2014/12/10 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
python列表去重的二种方法
2014/02/14 Python
Python内置函数OCT详解
2016/11/09 Python
python实现复制文件到指定目录
2019/10/16 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
thinkphp5 路由分发原理
2021/03/18 PHP
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
大学校园毕业自我鉴定
2014/01/15 职场文书
爸爸的花儿落了教学反思
2014/02/20 职场文书
乡村文明行动实施方案
2014/03/29 职场文书
双方协议书
2014/04/22 职场文书
入党申请书怎么写?
2019/06/11 职场文书
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL