vue3 + vant3 + html2canvas
项目有一个海报分享需求,用canvas 画出来呢太麻烦,所以选择 html 做出来然后再通过 html2canvas 插件 截取 图片生成分享
下面呢来分享下我这次开发的内容,网上也有很多相关博客但是都不太准确详细描述,自己钻研过来就可以用
首先引入
npm install html2canvas
组件内引用Html 片段
<div id="html-canvas">
<img src="a.png" alt="">
<span>标语</span>
<img src="b.png" alt="二维码">
</div>
js 片段
<script>
import { defineComponent, reactive, ref } from "vue";
import { Toast, ImagePreview } from "vant";
import html2canvas from 'html2canvas' // 引入html2canvas
export default defineComponent({
name: "andRongPeer",
setup: () => {
// 数据
const state = reactive({
showImg: ''
});
const turnMyHonor = () => {
state.show = true;
};
//截图方法
const toImg = () => {
// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
const divDom = document.getElementById('html-canvas');
html2canvas(divDom, {
backgroundColor: null,
useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
}).then((canvas) => {
let url = canvas.toDataURL('image/png') // 最终生成图片的 url
state.showImg = url
})
}
return {
state,
toImg
};
},
});
</script>
然后就大功告成了!