html2canvas在Vue项目踩坑-生成图片偏移不完整

背景

最近做一个Vue项目需求是用户长按保存图片，页面的数据是根据不同id动态生成的，页面渲染完生成内容图片让用户长按保存的时候，把整个页面都保存起来。

在项目遇到的坑是图片能生成，可是生成的图片总是往左偏移一部份内容，让显示的图片不完整

页面渲染的内容，而生成的图片效果要跟页面渲染的内容一致，下面是渲染的效果

而实际生成的图片是不完整的

测试：多次生成图片发现图片发生偏移的位置都不相同，而同一个特性是往左偏移。

工作原理：Html2canvas加载后将会浏览页面上的所有元素，集合所有页面元素的信息，页面元素在vue渲染完成时Html2canvas把整个页面（整屏）的内容生成base64的图片。

猜想：vue生命周期渲染页面未加载完html2canvas就生成图片，->了解Vue生命周期。

思考：既然是没渲染完成就生成图片，那就等vue页面渲染完成再执行html2canvas生成图片。

解决方案

在vue mounted周期利用setTimeout函数延迟执行html2canvas，这样就避免vue页面没渲染完成就执行html2canvas

 mounted() {setTimeout(function () {this.toImage();},1000);}

html2canvas这个插件存有bug略坑，总结了几个遇到的坑及解决方法，待更新.....

转载于:https://www.cnblogs.com/chenhaihui/p/10120015.html

html2canvas在Vue项目踩坑-生成图片偏移不完整相关推荐

html2canvas图片的文字偏移,html2canvas在Vue项目踩坑-生成图片偏移不完整
背景最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来. 在项目遇到的坑是图片能生成,可是生成的图片总是 ...
Django Vue 项目踩坑记：The field admin.LogEntry.user was declared with a lazy reference to ‘xxx‘
功能期望基于Django提供的AbstractUser类重写User模型,在其中根据业务需求增加信息,并将新的用户模型设为系统默认用户模型. 问题描述完成自定义User模型的编写,并在settin ...
java 做项目踩坑,web项目踩坑过程
sql函数设计: 一开始本来是直接用Java的jdbc直接传输操作语句的.但后来学了存储过程发现存储过程可以提高不少的效率.就重构了自己对数据库的操作代码.包括:开启,查找,修改,关闭. 开启:直接使 ...
vuex modules ajax,VUE项目爬坑---6、vuex的真正存在的意义是什么
VUE项目爬坑---6.vuex的真正存在的意义是什么一.总结一句话总结: a.[避免低效的数据传递]:当多个组件嵌套的时候,只能父子传递,那么中间的组件只能做传递数据之用,数据不是它用,它却传递 ...
vue.js踩坑之单向数据流
vue.js父子组件之间的数据通信,细节总结隐性规则:单行数据流学前疑问: 1.父组件如何向子组件通信数据? 2.父组件可以直接修改子组件的数据!但是反过来绝对不可以!那怎么解决这个问题呢? 3. ...
vue.js踩坑之ref引用细节点
vue.js组件之H5页面,DOM标签或者组件中,通过ref="自定义name名称"引用的细节点要点简介:[ 见下文案例 ] 使用is=" "解决H5出现的标 ...
配合Opencv2.4.9，CMake3.12.1和VS2010在win10下构建项目踩坑记录
配合Opencv3,CMake和VS2010在win10下构建项目踩坑记录参考https://blog.csdn.net/qq_26623659/article/details/78322782 博 ...
丰田项目踩坑手记（REACT）
丰田项目踩坑手记(REACT) 路由配置的时候:要引入hash路由不是browswer那个路由参考网址:react-guide.github.io/react-route- 路由网址:reacttr ...
vue创建项目踩坑记录 443 ECONNRESET
安装nodejs 并创建vue 项目的记录首先安装nodejs 是傻瓜式操作,配置环境变量的可以参考这个博文: 点击跳转安装教程查看node版本和npm 版本使用淘宝镜像cnpm 第二步项目初始 ...

html2canvas在Vue项目踩坑-生成图片偏移不完整

html2canvas在Vue项目踩坑-生成图片偏移不完整相关推荐

最新文章

热门文章