利用html2canvas插件实现dom转图片

async changeImageDom() {
      const myBox = document.querySelector("#grid-layout");
      const canvas = await html2canvas(myBox, {
        useCORS: true,
        width: window.screen.availWidth,
        height: myBox.scrollHeight,
        sacle: 4,
      });
      const imgUrl = canvas.toDataURL("image/jpeg", 1);
      const path = convertBase64UrlToBlob(imgUrl);
      let fileOfBlob = new File([path], new Date() + ".jpeg");
      const fd = new FormData();
      fd.append("file", fileOfBlob);
      return new Promise((resolve, reject) => {
        this.$http
          .uploadFile(fd)
          .then((res) => {
            const { code, data } = res;
            if (code === this.$constant.STATUS_SUCCESS_CODE) {
              resolve(res);
            }
          })
          .catch((err) => reject(err));
      });
    },
} 
/**  
 * 将以base64的图片url数据转换为Blob
 * @param urlData 用url方式表示的base64图片数据
 */
function convertBase64UrlToBlob(urlData) {
  let bytes = window.atob(urlData.split(',')[1]);// 去掉url的头，并转换为byte  
  // 处理异常,将ascii码小于0的转换为大于0  
  let ab = new ArrayBuffer(bytes.length);
  let ia = new Uint8Array(ab);
  for (let i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i);
  }
  return new Blob([ab], { type: 'image/png' });
}