html2canvas转图片并将base64图片转文件实现手机端下载

youAnnn

已于 2022-07-07 18:19:02 修改

阅读量995

点赞数

文章标签： javascript 前端 vue.js

于 2022-07-07 18:17:41 首次发布

本文链接：https://blog.csdn.net/youAnnn/article/details/125664571

版权

html2canvas将html转base64图片

html2canvas(this.$refs.shareImg,{ // 要生成图片的html 
        useCORS: true, // 跨域请求图片资源
        // 生成图片被压缩添加以下参数
        scale: 2, // 按比例增加分辨率 (2=双倍)
        dpi: window.devicePixelRatio * 2, // 设备像素比
      }).then((canvas) => {
        const dataURL = canvas.toDataURL('image/jpg', 1);
        this.downImg = dataURL;
});

base64图片转文件并下载

 base64ImgtoFile(dataurl, filename = '文件名' + Date.now()) {
      // 将base64格式分割：['data:image/png;base64','XXXX']
      const arr = dataurl.split(',');
      // .*？ 表示匹配任意字符到下一个符合条件的字符 刚好匹配到：
      // image/png
      const mime = arr[0].match(/:(.*?);/)[1]; // image/png
      // [image,png] 获取图片类型后缀
      const suffix = mime.split('/')[1]; // png
      const bstr = atob(arr[1]); // atob() 方法用于解码使用 base-64 编码的字符串
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], `${filename}.${suffix}`, {
        type: mime,
      });
    },

// 下载图片
saveImg() {
      const blob = this.base64ImgtoFile(this.downImg);
      const blobUrl = window.URL.createObjectURL(blob);
      // 这里的文件名根据实际情况从响应头或者url里获取
      const filename = blob.name;
      const a = document.createElement('a');
      a.href = blobUrl;
      a.download = filename;
      a.click();
      window.URL.revokeObjectURL(blobUrl);
    },