html2canvas实现将dom生成图片并保存至本地

 <div " id="qrcode" class="qrcode-item"></div>
 
import html2canvas from "html2canvas";

function saveQrCode() {
  // 这里的类名要与点击事件里的一样
  const canvas = document.querySelector("#qrcode");
  html2canvas(canvas, {
    scale: 2,
    logging: false,
    useCORS: true,
    backgroundColor: null, //设置图片背景为透明
  }).then(function (canvas) {
    const type = "png";
    let imgData = canvas.toDataURL(type);
    // 图片格式处理
    let _fixType = function (type) {
      type = type.toLowerCase().replace(/jpg/i, "jpeg");
      let r = type.match(/png|jpeg|bmp|gif/)[0];
      return "image/" + r;
    };
    imgData = imgData.replace(_fixType(type), "image/octet-stream");
    let filename =
      `${seatInfo.value.storeName}-${seatInfo.value.code}"` + "." + type;
    // 保存为文件
    //  以bolb文件下载
    downFileToLocal(filename, convertBase64ToBlob(imgData));
  });
}

// base64转化为Blob对象
function convertBase64ToBlob(imageEditorBase64) {
  let base64Arr = imageEditorBase64.split(",");
  let imgtype = "";
  let base64String = "";
  if (base64Arr.length > 1) {
    //如果是图片base64，去掉头信息
    base64String = base64Arr[1];
    imgtype = base64Arr[0].substring(
      base64Arr[0].indexOf(":") + 1,
      base64Arr[0].indexOf(";")
    );
  }
  // 将base64解码
  let bytes = atob(base64String);
  //let bytes = base64;
  let bytesCode = new ArrayBuffer(bytes.length);
  // 转换为类型化数组
  let byteArray = new Uint8Array(bytesCode);

  // 将base64转换为ascii码
  for (let i = 0; i < bytes.length; i++) {
    byteArray[i] = bytes.charCodeAt(i);
  }
  // 生成Blob对象（文件对象）
  return new Blob([bytesCode], { type: imgtype });
}
// 下载Blob流文件
function downFileToLocal(fileName, blob) {
  // 创建用于下载文件的a标签
  const d = document.createElement("a");
  // 设置下载内容
  d.href = URL.createObjectURL(blob);
  // 设置下载文件的名字
  d.download = fileName;
  // 界面上隐藏该按钮
  d.style.display = "none";
  // 放到页面上
  document.body.appendChild(d);
  // 点击下载文件
  d.click();
  // 从页面移除掉
  document.body.removeChild(d);
  // 释放 URL.createObjectURL() 创建的 URL 对象
  window.URL.revokeObjectURL(d.href);
}