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

 

posted @ 2020-09-17 17:41  herry菌  阅读(171)  评论(0编辑  收藏