博客 / 詳情

返回

html2canvas常見踩坑問題

一、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最好不要超過默認值

以上幾點是本人開發過程中遇到的問題,如有問題,請指正,希望多多交流

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.