第一步:
npm install html2canvas --save
或者
cnpm install html2canvas --save
第二步: 需要把你想生成图片的div或者某块元素获取他的ref
<div ref="div1">
这个div内的东西都会生成图片
</div>
<img v-show="img" :src="img"/>
<button @click="scImg()">生成图片</button>
第三步:写在方法里
<script>
import html2canvas from "html2canvas";
data() {
return {
img: ''
}
},
mounted() {
// 如果你想刚页面就生成图片 在mounted生命周期当中调用方法; created生命周期 还没有获取到dom元素
},
methods: {
scImg() {
html2canvas(this.$refs.div1).then((canvas) => {
let dataURL = canvas.toDataURL("image/png");
// 这里是转换成base64格式的
this.img = dataURL
})
},
}
</script>