1.在index.html中cdn引入
<!-- 图片生成 -->
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
2.vue.config.js
configureWebpack: {
externals: {
'html2canvas': 'html2canvas'
},
},
3.使用
<style>
.noshow{
position: absolute;
top: 0;
width: 100px;
height: 100px;
opacity: 1;
.htmlToImage{
background: #009a61;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
.activaty-keyword-box{
font-size: 15px;
font-weight: bold;
color:#fff;
}
}
}
<style>
<template>
<div class="noshow">
<div class="canvasImg" ref="imageWrapper">
<div class="htmlToImage">
<div class="activaty-keyword-box">{{activityKeyword}}</div>
</div>
</div>
<img class="real_pic" :src="dataURL"/>
</div>
</template>
<script>
//引入
import html2canvas from 'html2canvas'
mounted(){
setTimeout(() => {
//获取到当前元素的高度
var getHeight=document.getElementsByClassName('activaty-box')[0].clientHeight;
html2canvas(this.$refs.imageWrapper,{
backgroundColor:null,
y:getHeight
}).then((canvas) => {
let dataURL = canvas.toDataURL("image/png")
this.dataURL = dataURL;
console.log(this.dataURL);
});
}, 1000);
}
</script>