记录一下 项目中海报截图分享

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>

然后就大功告成了！