html2canvas截圖問題小結

傳送門:html2canvas官網

原理:

首先 html2canvas 截圖的原理是分析需要截圖的dom元素部分,這部分需要截圖的dom是需要顯式存在整個頁面的dom文檔流中的,意思就是需要被截圖的dom的樣式不能是隱藏(opacity: 0 或 displa: none)。

場景:移動端H5頁面海報分享,頁面海報顯示和保存的海報需要不一樣(如帶上用戶暱稱等)?

小結:

既然顯示的和保存的海報需要不一樣,又需要生成的海報顯示存在dom中,其實可以使用絕對定位,並調整一下截圖區域的層疊關係z-index即可,這樣截圖區域滿足兩個條件,1存在dom中,2也顯式存在,只不過設置了層疊關係,讓它被看不到而已。

保存的截圖清晰度

截圖的清晰度可能和畫布設置的大小有關,可以設置畫布大小和需要截圖的區域大小一致。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章