软件系统开发定制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 对象：

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

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)
           })
       }
网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发