图片base64，file,blob格式的相互转换，以及gif转base64

图片base64，file,blob格式的相互转换，以及gif转base64(第六点)

1、new Image()图片链接转base64

• 只能转化为普通的jpg/png图片。无法转化gif图
• type可以转换为base64和blob
• quality图片质量(image/jpeg 或 image/webp 生效)

const imgToBase64 = ({
  url='',type='base64',quality=1,success=null,imgType='image/jpeg'
}) => {
     const resultFn=(myCanvas,cb)=>{
       if(type=='base64'){
          const dataURL = myCanvas.toDataURL(imgType,quality);
        	success && success(dataURL);
          cb && cb(true)
      }else{
          myCanvas.toBlob((blobData)=>{
          success && success(blobData)
        },imgType,quality);
         cb && cb(true)
      }
     }
     let canvas = document.createElement('canvas'),canvas2=null,canvas3=null
     ctx = canvas.getContext('2d'),
     img = new Image();
     img.crossOrigin = 'Anonymous';//设置跨域
     img.onload = function () {
      if(imgType=='image/jpeg' || imgType=='image/webp'){
        canvas.height = img.height;
     	  canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        resultFn(canvas,()=>{
          canvas=null
        })
      }else{
        canvas.height = img.height*quality;
     	  canvas.width = img.width*quality;
        ctx.drawImage(img, 0, 0,canvas.width,canvas.height);
        resultFn(canvas,()=>{
          canvas=null
        })
      }
     };
     img.src = url;
}

//使用：
imgToBase64({
    url:'https://n.sinaimg.cn/tech/transform/774/w320h454/20190312/Jw5G-hufnxfm3452998.gif',
    type:'bolb',
    quality:1,
    success:(res)=>{
        console.log(res)
    }
})
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

2、将blob数据转换为文件

• blob对象

const blobToFolder = (blob,cb)=>{
  const newImg = new Image();
  const url = URL.createObjectURL(blob);
  newImg.onload = function() {
    cb && cb(url)
    URL.revokeObjectURL(url);
  };
  newImg.src = url;
}
1
2
3
4
5
6
7
8
9

3、将blob数据转换为file

• blob对象
• name文件名

const blobToFile = (blob,name,cb)=>{
  cb && cb(new File([blob],name,{type:blob.type}));
}
1
2
3

4、将base64转数据转换为blob

• urlData:base64数据

const base64UrlToBlob=(urlData) => {
      var arr = urlData.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 });
}
1
2
3
4
5
6
7
8
9
10
11

5、将blob、file转数据转换为base64

• urlData:base64或file格式数据

const blobFileToBase64Url=(blobFileData,cb)=>{
  const fileReader = new FileReader();
    fileReader.onload = (e) => {
      cb && cb(e.target.result)
    };
    // readAsDataURL
    fileReader.readAsDataURL(blobFileData);
    fileReader.onerror = () => {
      new Error('blobFileToBase64Url error');
    };
}
1
2
3
4
5
6
7
8
9
10
11

6.利用fetch转换图片链接为blob或者base64

• 优点：异步交互处理,可以实现git转base64
• 限制：图片可能会存在跨域请求问题

const fetchToBlodBase64=(url,cb,type='base64')=>{
  fetch(url)
    .then(respone => respone.blob())    // 将响应体转换成blob格式数据
    .then(blob => {
        if(type=='base64'){
          let reader = new FileReader(); 
          reader.onloadend = function(e){
            cb && cb(e.target.result)
          };
          reader.readAsDataURL(blob);
        }else{
          cb && cb(blob)
        }
    })
    .catch(console.error);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

汇总方法

//file图片压缩并返回file文件
const compressionImg=(file,quality,cb)=>{
  blobFileToBase64Url(file,base64=>{//转base64
    imgToBase64({//转bolb,并压缩
        url:base64,
        type:'bolb',
        quality:quality,
        success:(bolb)=>{
            blobToFile(bolb,'img',(changeFile)=>{//转file
              console.log(changeFile)
            })
        }
    })
  })
}
// 普通url链接图片压缩并下载
//  下载图片
const downloadFile=(content,fileName='')=>{
      let aLink = document.createElement('a')
      aLink.download = fileName;
      aLink.setAttribute('href',content)
      aLink.click() 
}
// 压缩并下载
const compressionDownloadImg=(url,quality)=>{
  imgToBase64({
    url:url,
    type:'bolb',
    quality:quality,
    success:(bolbData)=>{
        blobToFolder(bolbData,folderData=>{
            downloadFile(folderData,'img.png')
        })
    }
  })
}

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

其他（文件流转化为excel文件）

  const fileStreamToExcel = (res, name = '数据统计') => {
        if (!res) {
          alert('暂无数据')
          return false
        }
        if (res && res.status) {
          return false
        }
        const blob = new Blob([res])
        if (window.navigator.msSaveBlob) {
          // 兼容ie 鬼使用ie
          window.navigator.msSaveBlob(blob, `${name}.xls`)
        } else {
          // 主流浏览器
          const elink = document.createElement('a')
          elink.download = `${name}.xls`
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        }
      }
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