使用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