傳送門:html2canvas官網
原理:
首先 html2canvas 截圖的原理是分析需要截圖的dom元素部分,這部分需要截圖的dom是需要顯式存在整個頁面的dom文檔流中的,意思就是需要被截圖的dom的樣式不能是隱藏(opacity: 0 或 displa: none)。
場景:移動端H5頁面海報分享,頁面海報顯示和保存的海報需要不一樣(如帶上用戶暱稱等)?
小結:
既然顯示的和保存的海報需要不一樣,又需要生成的海報顯示存在dom中,其實可以使用絕對定位,並調整一下截圖區域的層疊關係z-index即可,這樣截圖區域滿足兩個條件,1存在dom中,2也顯式存在,只不過設置了層疊關係,讓它被看不到而已。
保存的截圖清晰度
截圖的清晰度可能和畫布設置的大小有關,可以設置畫布大小和需要截圖的區域大小一致。