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简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
css sprite简单实例
May 23 HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
Aug 18 HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 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中str_replace函数使用小结
2008/10/11 PHP
php 动态执行带有参数的类方法
2009/04/10 PHP
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
php导出生成word的方法
2015/12/25 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
JS跨域问题详解
2014/11/25 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
python实现汉诺塔方法汇总
2016/07/25 Python
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
Django的Modelforms用法简介
2019/07/27 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
Linux面试题LINUX系统类
2014/11/19 面试题
卫校中专生个人自我评价
2013/09/19 职场文书
父亲八十大寿答谢词
2014/01/23 职场文书
村级四风对照检查材料
2014/08/24 职场文书
简单租房协议书
2014/10/21 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
员工辞退通知书
2015/04/17 职场文书
地震捐款简报
2015/07/21 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android