html2canvas截图下载图片

实现效果：

二维码是从后端获取的，背景图是前端固定的，要求是背景图和二维码一起下载下来，需要转成canvas下载

代码：

安装：

npm install --save html2canvas复制

html:

<div id="img" class="p-4 flex justify-center">
  <van-image
    class="relative flex justify-center"
    width="322"
    height="362"
    :src="require('@/assets/images/qrisBg.png')"
    alt=""
  >
    <img
      class="absolute"
      width="220"
      height="220"
      :src="require('@/assets/images/qr_code.png')"
      style="top: 26px"
      alt=""
    />
    <div class="absolute bottom-4">
      <div
        class="text-[#FFFEFE] text-base font-semibold text-center mb-2"
      >
        Scan OR code
      </div>
      <div class="text-xs text-[#fff] text-center">
        {{ $t("cashier.qrisBgText") }}
      </div>
    </div>
  </van-image>
</div>复制

点击事件：

<div class="px-5 py-5">
  <van-button
    class="rounded-lg"
    color="#36D28F"
    block
    @click="downloadImg"
    >{{ $t("cashier.download") }}</van-button
  >
</div>复制

在要下载的div添加一个id,通过点击事件下载

js:

methods: {
    async downloadImg() {
      let canvas = await html2canvas(document.querySelector("#img"), {
        dpi: window.devicePixelRatio * 2, // 对应屏幕的dpi，适配高清屏，解决canvas模糊问题
        scale: 2, // 缩放
        allowTaint: true, // 是否使用图片跨域
        useCORS: true, // 是否使用图片跨域
        // y: window.scrollY // 根据滚动条来截取--主要用于截取某一个区域
        proxy: "https://sandbox-payment.winpay.id/",
      });
      // canvas参数为生成的canvas的dom节点，可以对其进行dom操作
      // document.getElementById("img").appendChild(canvas);
      // 下载功能
      var save_url = canvas.toDataURL("image/png");
      var a = document.createElement("a");
      document.body.appendChild(a);
      a.href = save_url;
      a.download = "";
      a.click();
    },
  },复制