Blob、File 、DataURL(Base64)、BlobURL 之间的类型闭环,你确定都知道?

作者: gauseen
原文: https://github.com/gauseen/blog
公众号【学前端】只搞技术,不搞广告文,确定不关注一下?

说一说本篇文章讲哪些点

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

  • Blob --> File
  • File --> DataURL(base64)
  • File --> BlobURL
  • HTTPURL| DataURL | BlobURL --> Blob

文件类型转换闭环

提示: 公众号回复 “file” 可得高清原图

Blob 类型

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

如何得到 blob 对象?

1. new Blob(array, options)

let hiBlob = new Blob([`

Hi gauseen!

`], { type: 'text/html' })

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

2. fetch(url)

js 为我们提供了很多获取资源的 api,如:

注:

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

    解决方法:

    let img = new Image()
    // 1. 增加 crossOrigin 属性,值为 anonymous
    // 含义:执行一个跨域请求,在请求头里加 origin 字段
    // 2. 后端要返回 Access-Control-Allow-Origin 响应头来允许跨域
    img.crossOrigin = 'anonymous'
    img.src = 'to/path'

    本质就是解决跨域问题,也可以使用 nginx 做个代理来解决

  • blobslice(startIndex, endIndex) 方法,复制 blob 对象某片段,与 js 数组的 slice 方法类似,文件的断点续传功能就是利用了改特性。

File 类型

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

如何获取 file 对象?

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

// 1. 参数是字符串组成的数组
let hiFile = new File([`

Hi gauseen!

`], 'fileName', { type: 'text/html' }) // 2. blob 转 file 类型 let hiBlob = new Blob([`

Hi gauseen!

`], { type: 'text/html' }) let hiFile = new File([ hiBlob ], 'fileName', { type: 'text/html' })

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

2. inputElement.files

通过 标签获取 file 对象

// input 上传文件时触发 change 事件
$('input').addEventListener('change', e => {
  let file = e.target.files[0]
  console.log('file: ', file)
})

3. DragEvent.dataTransfer.files

通过拖、放获取 file 对象


  
将文件拖放到这里~

4. canvasElement.mozGetAsFile()

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

let file = canvasElement.mozGetAsFile('imgName')

DataURL(base64)

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

语法:data:[][;base64],

如下,黑色 1 像素示例:

data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=

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

1. FileReader

允许 Web 应用程序异步读取存储在用户计算机上的文件(blobfile)。

// 将 blob 或 file 转成 DataURL(base64) 形式
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(如:

你可能感兴趣的:(javascript,前端,file,base64,blob)