背景
最近做一个 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