Vue2.x中使用html2canvas将Dom转成图片
2019-03-04 本文已影响3人
福尔摩猪2333
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
})
