前情提要

arrayBuffer

Blob
Blob

一、概念

表示一个不可变、原始数据的类文件对象
文件对象 File 继承了所有 Blob 的属性

二、用途

Blob
Blob

tips:window.URL.createObjectUR 转换的 Url 相当于一个引用，只能在当前页面有效

提出问题：什么样的数据 createObjectURL 后才能赋值给 img.src 展示出来？

三、例子

1、文件下载

文本内容下载

1
2
3
4
5
6
// <a href="" download="" id="dd">点击下载</a>
let blob = new Blob(['下载内容内容']);
let url = URL.createObjectURL(blob);
let a = document.getElementById('dd');
a.download = '下载标题';
a.href = url;

上面是文本类型文件下载，如果 Blob 的内容是图片、压缩资源的 buffer 那就意味着前端就可以做任何类型的文件下载

图片资源

随便找个百度图片（不能跨域）

1
2
3
4
5
6
7
8
9
10
11
fetch(
  'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimages4.fanpop.com%2Fimage%2Fphotos%2F21800000%2FPain-akatsuki-21871797-1280-720.jpg&refer=http%3A%2F%2Fimages4.fanpop.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617163410&t=b4da03a23ce7038703128e42919f5448'
).then((r) => {
  r.blob().then((data) => {
    console.log(data);
    let url = URL.createObjectURL(data);
    let a = document.getElementById('dd');
    a.download = '下载标题';
    a.href = url;
  });
});

2、Blob 文件分片上传

通过 Blob.slice 将资源文件切片，分段上传资源，后端再将这些分片资源拼接起来

四、Blob 资源转换

因为 File 是继承 Blob，所以 Blob 的方法 File 也能用

  1. 通过 FileReader 对象
    1. FileReader.readAsText(Blob/File)：将 Blob 转为文本字符串
    2. FileReader.readAsArrayBuffer(Blob/File)： 将 Blob 转为 ArrayBuffer 格式数据
    3. FileReader.readAsDataURL(Blob/File): 将 Blob 转化为 Base64 格式的 Data URL
  2. 通过 Blob/File 对象
    1. Blob.text() ：将 Blob 转化为文本字符串
    2. Blob.arrayBuffer() ：将 Blob 转为 ArrayBuffer 格式数据

1、FileReader

tips:

  1. 调用 FileReader Api 解析的结果都是通过 onload 回调取到的
  2. FileReader 上述 Api 的参数是 Blob 或 File 对象
1
2
3
4
5
6
7
8
9
// 创建一个FileReader对象
const reader = new FileReader();
// 注册onload方法，解析成功的数据通过这个回调函数返回
reader.onload = function () {
  const content = reader.result;
  console.log('content', content);
};
// 触发解析api
reader.readAsArrayBuffer(file);

2、Blob/File

tips:
Blob 上的转换方法都返回一个 promise

1
2
3
4
5
6
7
8
9
10
11
12
13
document.getElementById('f').addEventListener(
  'change',
  function (e) {
    var file = this.files[0];
    file.arrayBuffer().then((text) => {
      console.log('111', text);
    });
    file.text().then((text) => {
      console.log('111', text);
    });
  },
  false
);

四、Blob 数据分析

1. 当 blob 转换为 Arraybuffer 后，数据是按什么规则转换的？

1
2
3
4
5
let a = ['a'];
let b = new Blob(a);
b.arrayBuffer().then((r) => {
  console.log(r);
});
arrayBuffer
arrayBuffer

可以看到’a’的 arrayBuffer 是 97，所以转换规则应该是这样的：
将字符串转成的 Unicode 编码

1
2
3
4
String.fromCharCode(97);
// "a"
'a'.charCodeAt();
// 97

2、什么样的数据 createObjectURL 后才能赋值给 img.src 展示出来？

blob 存储的内容是一个数组，通过 input type=’file’标签传的图片可以直接 createrObjectUrl 就能给 img.src 直接展示，
这种情况下 blob 存储的是图片文件的 base64 内容
而在一些情况下比如readPixels()返回的数据里，存储的是图像的像素点 rgba，所以不能直接用 createrObjectUrl 转换成图片显示