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略坑，總結了幾個遇到的坑及解決方法，待更新.....