首页/文章/javascript

Blob、File 、DataURL(Base64)、BlobURL 之间的类型闭环

2024-03-07

1667 字约 6 分钟

...

学习

相信在工作中经常遇到，文件上传、图片压缩、文件下载、大文件断点续传，等等关于 js 来操作文件的需求。那么你真的了解文件类型之间的转换关系吗？如下：

Blob --> File
File --> DataURL（base64）
File --> BlobURL
HTTPURL| DataURL | BlobURL --> Blob

Blob 类型

Blob 类型是 File 文件类型的父类，它表示一个不可变、原始数据的类文件对象

如何得到 `blob` 对象？

1. new Blob(array, options)

let hiBlob = new Blob(\[`<h1>Hi gauseen!<h1>`\], { type: 'text/html' })

如上代码，就创建了一个 blob 对象，并声明了 text/html 类型，就像是创建一个 .html 文件。只不过它存在于浏览器的内存里。

2. fetch(url)

js 为我们提供了很多获取资源的 api，如：<img> 和 <script>，
Fetch API 提供了一个获取资源的统一接口（包括跨域请求）

关于 fetch(url, options), url 参数支持格式有：

截止到 2020-01-13

http、https

blobURL: 比如通过 URL.createObjectURL() 获得

// blobURL 示例：
blob:null/7025638d-c05f-4c75-87d6-470a427e9aa3

dataURL: 如图片的 base64 格式，比如通过 convasElement.toDataURL() 获得

// dataURL(base64) 黑色 1 像素示例：
data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=

fetch(url, options) 响应数据可被解析成：

res.arrayBuffer(): 通用、固定长度的原始二进制数据缓冲区
res.blob(): Blob 类型
res.formData(): 表单数据类型
res.json(): JSON 格式
res.text(): 文本格式

本文主要关心 blob 类型转换，如下代码，用 fetch api 获取图片资源的 blob 对象，
当然也可以获取其它类型的资源。如：.txt .html 等

fetch('http://eg.com/to/path/someImg.png')
  .then(res => res.blob())
  .then(blob => {
    console.log('blob: ', blob)
  })

3. canvasElement.toBlob(callback)

canvas 具有图像操作能力，支持将一个已有的图片作为图片源，来操作图像。

如下，通过 canvas 将图片资源转成 blob 对象

<body>
  <canvas width="100" height="100"></canvas>
</body>

<script> const $ = arg => document.querySelector(arg)
  let convas = $('canvas')
  
  (async () =\> {
    let imgUrl = 'http://eg.com/to/path/someImg.png'
    let ctx = convas.getContext('2d')
    let img = await fetchImg(imgUrl)
    
    ctx.drawImage(img, 0, 0)

    
    convas.toBlob((blob) => {
      console.log('blob: ', blob)
    })

    
    let dataURL = convas.toDataURL()
    console.log('dataURL: ', dataURL)
  })()

  
  function fetchImg (url) {
    return new Promise((resolve, reject) => {
      let img = new Image()
      
      img.crossOrigin = 'anonymous'
      img.src = url
      
      img.onload = () => {
        resolve(img)
      }
    })
  } </script>

注：

如果图片没加载完，就调用 drawImage，canvas 绘制将失败，所以我们简单封装了 fetchImg 方法，确保图片资源加载完成后再开始绘制图片。
由于 canvas 中的图片可能来自一些第三方网站。在不做处理的情况下，使用跨域的图片绘制时会污染画布，这是出于安全考虑。在“被污染”的画布中调用 toBlob() toDataURL() getImageData() 会抛出安全警告。

解决方法：
```
let img = new Image()



img.crossOrigin = 'anonymous'
img.src = 'to/path'
```
本质就是解决跨域问题，也可以使用 nginx 做个代理来解决
blob 有 slice(startIndex, endIndex) 方法，复制 blob 对象某片段，与 js 数组的 slice 方法类似，文件的断点续传功能就是利用了改特性。

File 类型

File 包含文件的相关信息，可以通过 js 来访问其内容

如何获取 `file` 对象？

1. new File(bits, name[, options])

let hiFile = new File(\[`<h1>Hi gauseen!<h1>`\], 'fileName', { type: 'text/html' })

let hiBlob = new Blob(\[`<h1>Hi gauseen!<h1>`\], { type: 'text/html' })
let hiFile = new File(\[ hiBlob \], 'fileName', { type: 'text/html' })

如上代码，通过 File 构造函数，创建一个 file 对象，与上面的提到的 blob 类似。可以将 blob 转成 file 类型，这意味着上面获取的 blob，可以转成 file 类型。

2. inputElement.files

通过 <input type="file"> 标签获取 file 对象

$('input').addEventListener('change', e => {
  let file = e.target.files\[0\]
  console.log('file: ', file)
})

3. DragEvent.dataTransfer.files

通过拖、放获取 file 对象

<body>
  <div id="output">
     将文件拖放到这里~
  </div>
</body>

<script> const $ = arg => document.querySelector(arg)
  let outputEle = $('#output')
  
  outputEle.addEventListener('dragover', dragEvent => {
    dragEvent.preventDefault()
  })
  
  outputEle.addEventListener('drop', dragEvent => {
    dragEvent.preventDefault()
    
    let files = dragEvent.dataTransfer.files
    console.log('drag files: ', files)
  }) </script>

4. canvasElement.mozGetAsFile()

注：截止 2020-01-13，该方法仅支持火狐浏览器

let file = canvasElement.mozGetAsFile('imgName')

DataURL（base64）

DataURL，前缀为 data: 协议的 URL，可以存储一些小型数据

语法：data:[<mediatype>][;base64],<data>

如下，黑色 1 像素示例：

data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=

上面提到的 Blob File 类型，如何“消费”它们呢？接着向下看

1. FileReader

允许 Web 应用程序异步读取存储在用户计算机上的文件（blob 或 file）。

fileReader(someFile).then(base64 => {
  console.log('base64: ', base64)
})

function fileReader (blob) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader()
    reader.onload = (e) => {
      resolve(e.target.result)
    }
    reader.readAsDataURL(blob)
  })
}

2. convasElement.toDataURL()

可以通过 canvas 图像处理能力，将图片转成 dataURL 形式。在上面 Blob 部分讲解中，代码已实现。

BlobURL(ObjectURL)

BlobURL 也叫 ObjectURL，它可以让只支持 URL 协议的 Api（如：<a> <link> <img> <script>）访问 file 或 blob 对象。
dynamic-import-polyfill 库也用到了其特性。

如下，生成 blobURL，createObjectURL 方法创建从 URL 到 Blob 的映射关系。
如：blob:http://eg.com/550e8400-e29b-41d4-a716-446655440000

let blobURL = URL.createObjectURL(object)

如下，revokeObjectURL 方法撤消 blobURL 与 Blob 的映射关系，有助于浏览器垃圾回收，提示性能。

URL.revokeObjectURL(blobURL)

形成闭环

通过上面的一系列转换关系，可以知道：

blob --> file --> dataURL(base64) | blobURL --> blob

这样就形成了一个闭环，文章开头的思维导图很好的说明了之间的转换关系。

应用举例

文件下载

通过 a 标签实现下载，blob 或 file 对象。至于如何获取 blob 和 file 上面已经说得很清楚了。

function downloadFile1 (blob, fileName = 'fileName') {
  let blobURL = URL.createObjectURL(blob)
  let link = document.createElement('a')
  link.download = fileName
  link.href = blobURL
  link.click()
  
  URL.revokeObjectURL(blobURL)
}

function downloadFile2 (blob, fileName = 'fileName') {
  let blobURL = URL.createObjectURL(blob)
  window.location.href = blobURL
  
  URL.revokeObjectURL(blobURL)
}

压缩图片

compressImage('to/path/someImg.png', 0.6).then(base64 => {
  console.log('compressImage: ', base64)
})

async function compressImage (imgUrl, quality = 1, type = 'image/jpeg') {
  let imgEle = await fetchImg(imgUrl)
  let canvas = document.createElement('canvas')
  let cxt = canvas.getContext('2d')
  
  let { width, height } = imgEle
  canvas.setAttribute('width', width || 100)
  canvas.setAttribute('height', height || 100)

  cxt.drawImage(imgEle, 0, 0)
  return canvas.toDataURL(type, quality)
}

function fetchImg (url) {
  return new Promise((resolve, reject) => {
    let img = new Image()
    img.crossOrigin = 'Anonymous'
    img.src = url
    img.onload = () => {
      resolve(img)
    }
  })
}