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