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
? ? ? ?})