Uncaught DONException: Failed to execute ‘atob‘ on “window ‘: The string to be decoded is not carrec...-优快云博客

本文链接：https://blog.youkuaiyun.com/jyf_568/article/details/126994433

本文介绍如何在前端开发中实现Base64字符串与Blob对象之间的相互转换，并提供了具体的JavaScript函数实例，包括如何将Base64转换为Blob、File对象，以及Blob对象转回Base64的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABGU....

报错是因为没有去除 data:image/png;base64,应只要后面的文件流

1. base64 ：可以直接当作链接地址使用

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABGU....

2. File 对象：

File{
    lastModified: 1649490762164
    lastModifiedDate: Sat Apr 09 2022 15:52:42 GMT+0800 (GMT+08:00) {}
    name: "1649490762160-251.png"
    size: 25748
    type: "image/png"
    webkitRelativePath: ""
    [[Prototype]]: File
}

3. Blob 对象

Blob{
    size: 25748
    type: "image/png"
    [[Prototype]]: Blob
}　

除了base64 可以直接当作链接使用，File 对象和Bolb 对象也可以通过转换成base64 直接使用，或者使用

window.URL.createObjectURL(File 对象或者Bolb 对象) 直接生成链接 : 类似：blob:null/22ec44b8-5864-4960-8ea8-a71a7e40bb63

所以：能直接当作链接是使用在这三者关系中有

1. data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABGU....
2. blob:null/22ec44b8-5864-4960-8ea8-a71a7e40bb63

一：base64 转 Blob 对象

//base64 转 Blob对象
/* base64: data:image/png;base64,iVB....
/* Blob：{...}
*/
function base64ToBlob(data) {
    var arr = data.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}

二： base64 转 File 对象

/** base64 转 File 对象
  /* @param data base64
  /* @param filename 自定义文件名
  /* @return File 对象
  */
  function base64ToFile(data, filename) {
      var arr = data.split(','), mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
      let suffixArr = mime.split("/")
      if (suffixArr.length && !filename) {
          let suffix = suffixArr[suffixArr.length - 1]
          filename = new Date().getTime() + "-" + Math.floor((Math.random() * 10000)) + "." + suffix
      }
      while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
  }

三： File 对象，Blob 对象转base64

//blob ,File 对象 转 base64
function blobFileTobase64(blobFile) {
    let reader = new FileReader()
    reader.readAsDataURL(blobFile);
    return new Promise((resolve, reject) => {
        reader.onload = function () {
            resolve(this.result)
        }
        reader.onerror = (err) => {
            reject(err);
        };
    })
}   

四： blob链接转 base64 :利用canvas.toDataURL的API转化成base64

blob:null/22ec44b8-5864-4960-8ea8-a71a7e40bb63 转为
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABGU....

function urlToBase64(url, type = "image/png") {
    return new Promise((resolve, reject) => {
        let img = new Image()
        img.src = url
        img.onload = function () {
            let canvas = document.createElement("canvas")
            canvas.width = this.naturalWidth
            canvas.height = this.naturalHeight
            let ctx = canvas.getContext("2d")
            ctx.drawImage(img, 0, 0)
            let result = canvas.toDataURL(type || 'image/png')
            resolve(result)
        }
        img.onerror = function (err) {
            reject(err)
        }
    })
}   

五：压缩图片：接收一个File/Blob 对象,返回的是一个base64

/*
          blobFile:file/blob 对象
          option:{type:"image/jpeg",width:'',height:"",quality:0.92,scale:1}
      */
      function compressImg(blobFile, option = {}) {
          return new Promise((resolve, reject) => {
              let reader = new FileReader()
              reader.onload = function () {
                  let img = new Image()
                  img.src = this.result
                  img.onload = function () {
                      console.log("原图片大小：", this.src.length);//这是base64 ，所以可以指定图片大小
                      let imgSize = this.src.length;
                      let targetSize = 100 * 1024;
                      if (imgSize <= targetSize) {
                          return resolve(this.src)
                      }
                      let canvas = document.createElement("canvas")
                      let ctx = canvas.getContext("2d")
                      //原图尺寸
                      let imgW = this.naturalWidth
                      let imgH = this.naturalHeight
                      //新图比例大小
                      let scale = option.scale || 1;
                      let ratio = imgW / imgH; //宽高比例
                      let targetW = option.width || imgW * scale
                      let targetH = option.height || imgH * scale
                      canvas.width = targetW
                      canvas.height = targetH
                      ctx.drawImage(img, 0, 0, targetW, targetH)
                      let fileType = blobFile.type || option.type || 'image/jpeg'
                      let quality = option.quality || 0.5
                      let result = canvas.toDataURL(fileType, quality)
                      console.log("压缩后：", result.length)
                      resolve(result)
                  }
              }
              reader.onerror = function () {
                  reject(new Error(`${blobFile} must is Blob or File 对象`))
              }
              reader.readAsDataURL(blobFile)
          })
      }