Vue2.x中使用html2canvas将Dom转成图片

1、安装html2canvas

npm install html2canvas --save 

2、template 中的Dom

<div class="canvasImg" ref="imageWrapper">

      <img class="poster" :src="carImg" alt="" />

      <h3>{{carInfos.name}}</h3>

</div>

<img :src="dataURL " alt="" />

3、this.$refs.imageWrapper 获取元素后调用

// 引入import html2canvas from 'html2canvas'

html2canvas(this.$refs.imageWrapper,{

            backgroundColor: null     // 解决生成的图片有白边

        }).then((canvas) => {

            let dataURL = canvas.toDataURL("image/png")

            this.dataURL = dataURL

       })

4、图片不显示可能是跨域的错误，将图片转成Base64格式