首先:npm install vue-html2canvas
在需要的页面 : import html2canvas from “html2canvas”;
使用中:
this.$nextTick(() => {
let dom = this.$refs.imageWrapper.$refs.inviteInfo;
html2canvas(dom, {
useCORS: true, //跨域
logging: false,
allowTaint: false,
width: dom.offsetWidth, //设置canvas尺寸与所截图尺寸相同,防止白边
height: dom.offsetHeight //防止白边
}).then(canvas => {
let dataURL = canvas.toDataURL("image/png");
this.dataURL = dataURL; //需要填充的src
});
});
用户展示的分享图片:
实际用户保存的图片: