一、html2canvas圖片留白
圖片留白的問題應該是頁面有滾動條,所以導致截屏又留白,解決方式有兩種:
1. 將頁面window.scrollTo(0,0)這樣可以解決,但是有的時候滾動會讓用户看到,體驗不好,所以,我們可以看下另外一種方式
2. 設置參數
this.$html2canvas(document.getElementById('attack'),{scrollY: 0}) // 這樣也能解決問題;
二、html2canvas生成圖片那一刻,控制枱有報錯
遇到這樣的問題就要檢查自己html代碼加載圖片的那部分,通常是,截屏的時候某個圖片加載錯誤,萬能的解決辦法是在加載圖片的地方加上判斷 v-if 這樣
三、html2canvas生成圖片過大,跳轉頁面無法傳到下個頁面
這個問題我曾經找了一個通宵,最後定位到這圖片太大太大了,存本地也不行,存數據庫更不行,建議大家如果有攜帶截圖到下個頁面的操作就通過hash模式改變頁面url,或者生成圖片的時候儘量少的html結構
終於找到了圖片過大的原因了,還得多看文檔,canvas.toDataURL(type,encoderOptions) type是類型,encoderOptions是0-1默認是 0.92,值越大,越高清,佔內存越大,所以encoderOptions最好不要超過默認值
以上幾點是本人開發過程中遇到的問題,如有問題,請指正,希望多多交流