vue3-前端合成图片并下载导出

随着小程序逐渐完善，需要提供一个类似微信支付的立牌提供给企业进行扫码进入小程序，在这个需求中，后端给返回二维码，前端将用户输入的文案，以及ui提供的底图，加上二维码合成一张图片进行下载导出

这个功能听起来比较麻烦，但是实现起来其实很简单，这里我们直接使用canvas插件即可实现功能

安装插件

npm i html2canvas

html--使用css定位等来实现排版

这里用到了css库--tailwindcss  直接使用无需自己写css

 <div ref="poster" :class="['relative', 'inline-block']">
        <span
          :class="['absolute', 'top-8', 'z-50', 'text-lg']"
          class="copywriting"
          >{{ infoForm.slogan }}</span
        >
        <el-image
          :class="['top-20', 'w-56', 'z-50']"
          class="copywriting"
          :src="qrCode"
        />
        <el-image :src="baseMap" />
      </div>

js

 useCORS: true--允许跨域，主要是解决图片域名跨域问题，若图片域名不一致，可能会出现下载img不显示问题

//开始下载
const startDownloading = async () => {
  const canvas = await html2canvas(poster.value, {
    useCORS: true, // 允许跨域
    scale: 2, // 提高分辨率
    logging: true // 启用日志
  });
  const dataUrl = canvas.toDataURL("image/png");
  const link = document.createElement("a");
  link.href = dataUrl;
  link.download = "物料.png";
  link.click(); 
};