Uncaught DONException: Failed to execute ‘atob‘ on “window ‘: The string to be decoded is not carrec...

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

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

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

1	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 对象

1 2 3 4 5

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 2	1. data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABGU.... 2. blob: null /22ec44b8-5864-4960-8ea8-a71a7e40bb63

一：base64 转 Blob 对象

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

//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 对象

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

/** 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

1 2 3 4 5 6 7 8 9 10 11 12 13 14

//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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

/*            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)            })        }