使用html2canvas生成指定dom擷取的圖片
阿新 • • 發佈:2020-09-17
達到截圖的效果,一般用於生成指定報表
首先引入html2canvas,因為報表圖中也需要資料視覺化圖,因此用到了echarts。要做的效果是:看不到dom生成圖片。
但是要生成圖片,不能將dom使用display:none;,這樣就讀取不到寬高了,所以想了其他方式。
第一種:使用absolute將dom定位到瀏覽器可視範圍之外,就看不見了。
第二種:降低dom優先順序,被其他dom覆蓋,並設定透明度為0,這樣也看不見了。
第三種:最外層寬度100%,設定為超出隱藏,然後最外層高度為0。這樣也看不見了。也是我最後採取的一種。
在dom最外層設定ref,用於取dom節點
<div ref="capture1" className={s.capture}> {轉圖片的dom內容}html2canvas是個非同步方法,所以使用await。傳參是需要生成圖片的dom節點。</div>
let canvas1=await html2canvas(this.refs.capture1);//可以將dom生成canvas let src = canvas1.toDataURL('image/jpeg');//可以將canvas生成圖片的base64