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 渐变(Gradients)之CSS3 径向渐变
Jul 08 HTML / CSS
CSS3的常见transformation图形变化用法小结
May 13 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
详解rem 适配布局
Oct 31 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
Jan 30 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
Dec 29 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变量修饰符static的使用
2013/06/28 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
2014/03/03 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
python关闭windows进程的方法
2015/04/18 Python
使用python实现生成用户信息
2017/03/20 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
用python处理图片实现图像中的像素访问
2018/05/04 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
python集合删除多种方法详解
2020/02/10 Python
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
英语系毕业生求职信
2014/07/13 职场文书
颐和园导游词
2015/01/30 职场文书
北京英语导游词
2015/02/12 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
JavaScript实现简单拖拽效果
2021/09/15 Javascript
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android