在Vue项目中，利用html2canvas生成页面截图时出现图片内容向左偏移，导致部分内容缺失。分析认为可能是Vue页面未完全渲染时html2canvas就开始生成图片。解决方案是在Vue的mounted生命周期中使用setTimeout延迟执行html2canvas，确保页面渲染完成后再生成图片。
背景
最近做一个Vue项目需求是用户长按保存图片，页面的数据是根据不同id动态生成的，页面渲染完生成内容图片让用户长按保存的时候，把整个页面都保存起来。
在项目遇到的坑是图片能生成，可是生成的图片总是往左偏移一部份内容，让显示的图片不完整
页面渲染的内容，而生成的图片效果要跟页面渲染的内容一致，下面是渲染的效果
而实际生成的图片是不完整的
测试：多次生成图片发现图片发生偏移的位置都不相同，而同一个特性是往左偏移。
工作原理：Html2canvas加载后将会浏览页面上的所有元素，集合所有页面元素的信息，页面元素在vue渲染完成时Html2canvas把整个页面(整屏)的内容生成base64的图片。
猜想：vue生命周期渲染页面未加载完html2canvas就生成图片，->了解Vue生命周期。
思考：既然是没渲染完成就生成图片，那就等vue页面渲染完成再执行html2canvas生成图片。
解决方案
在vue mounted周期利用setTimeout函数延迟执行html2can
最低0.47元/天 解锁文章
833
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
