1. 程式人生 > 實用技巧 >使用html2canvas生成指定dom擷取的圖片

使用html2canvas生成指定dom擷取的圖片

達到截圖的效果,一般用於生成指定報表

首先引入html2canvas,因為報表圖中也需要資料視覺化圖,因此用到了echarts。要做的效果是:看不到dom生成圖片。

但是要生成圖片,不能將dom使用display:none;,這樣就讀取不到寬高了,所以想了其他方式。

第一種:使用absolute將dom定位到瀏覽器可視範圍之外,就看不見了。

第二種:降低dom優先順序,被其他dom覆蓋,並設定透明度為0,這樣也看不見了。

第三種:最外層寬度100%,設定為超出隱藏,然後最外層高度為0。這樣也看不見了。也是我最後採取的一種。

在dom最外層設定ref,用於取dom節點

<div ref="capture1" className={s.capture}>
    {轉圖片的dom內容}
</div>
html2canvas是個非同步方法,所以使用await。傳參是需要生成圖片的dom節點。
let canvas1=await html2canvas(this.refs.capture1);//可以將dom生成canvas
let src = canvas1.toDataURL('image/jpeg');//可以將canvas生成圖片的base64