图片或文件Blob、File、Base64之间的相互转换

前言

在做前端项目的时候，遇到图片的上传或者下载时，不可避免的会遇到Blob、File、Base64三种类型的转换。那么今天就总结下，三者之间的相互转换。

首先我们看看base64 ，File 对象，Blob 对象长什么样的，怎么来的。

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

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

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
}
1
2
3
4
5
6
7
8
9

3. Blob 对象

Blob{
    size: 25748
    type: "image/png"
    [[Prototype]]: Blob
}
1
2
3
4
5

4. blob链接

blob:url/22ec44b8-5864-4960-8ea8-a71a7e40bb63
1

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 });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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 });
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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);
        };
    })
}   
1
2
3
4
5
6
7
8
9
10
11
12
13
14

blob链接转 base64 :

利用canvas.toDataURL的API转化成base64

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)
        }
    })
 
}   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19