html2canvas截图下载图片

实现效果：

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

代码：

安装：

npm install --save html2canvas

html:

  
    
    

      

        Scan OR code
      
      

        {{$t("cashier.qrisBgText") }}
      
    
  

点击事件：

  {{$t("cashier.download") }}

在要下载的 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();},
  },