Blob

概述

由一个可选的字符串 type（通常是 MIME 类型）和 blobParts 组成的一系列其他 Blob 对象，字符串和 BufferSource

• blobParts 是 Blob/BufferSource/String 类型的值的 数组
• options 可选对象：
  • type：Blob 类型，通常是 MIME 类型，例如 image/png，
  • endings：是否转换换行符，使 Blob 对应于当前操作系统的换行符（\r\n 或 \n）。默认为 "transparent"（啥也不做），不过也可以是 "native"（转换）。

// 从字符串创建 Blob
let blob1 = new Blob(["ABCDEFG"], {
  type: 'text/html'
})
blob1.text().then(res => {
  console.log(res)
})

// 从类型化数组（typed array）和字符串创建 Blob
let hello = new Uint8Array([72, 101, 108, 108, 111]); // 二进制格式的 "hello"
let blob2 = new Blob([hello, ' ', 'world'], {
  type: 'text/plain'
});
blob2.text().then(res => {
  console.log(res)
})

可以使用 clice 方法来提取 Blob，无法直接在 Blob 中更改数据，但可以通过 slice 获得 Blob 的多个部分，从这些部分创建新的 Blob 对象，将它们组成新的 Blob

blob.slice([byteStart], [byteEnd], [contentType]);

• byteStart：起始字节，默认为 0
• byteEnd：最后一个字节（专有，默认为最后）
• contentType：新 blob 的 type，默认与源 blob 相同

Blob 用作 URL

• URL.createObjectURL(blob)： 生成的 URL 存储了一个 URL → Blob 映射。因此，此类 URL 很短，但可以访问 Blob
  • 生成样式：blob:http://localhost/3c532c62-832b-4023-9a56-5d8ff17bf805
• URL.revokeObjectURL(url)：从内部映射中移除引用，因此允许 Blob 被删除（如果没有其他引用的话），并释放内存
• 如果介意内存，我们需要撤销（revoke）它们
• 直接访问 Blob，无需“编码/解码”

let link = document.createElement('a');
link.download = 'hello.txt';
let blob = new Blob(['Hello, world!'], {type: 'text/plain'});
link.href = URL.createObjectURL(blob);
link.click();
URL.revokeObjectURL(link.href);

Blob 转 Base64

data-url 的形式为 data:[<mediatype>][;base64],<data>

• 图片生成样式：<img src="data:image/png;base64,R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA7">
• 无需撤销（revoke）任何操作
• 对大的 Blob 进行编码时，性能和内存会有损耗。

let link = document.createElement('a');
link.download = 'hello.txt'
let blob = new Blob(['Hello, world!'], {
  type: 'text/plain'
})
let reader = new FileReader()
reader.readAsDataURL(blob) // 将 Blob 转换为 base64 并调用 onload
reader.onload = function() {
  console.log(reader.result)
  link.href = reader.result // data url
  link.click()
}

图片 转 Blob

// 获取任何图像
let img = document.querySelector('img');

// 生成同尺寸的 <canvas>
let canvas = document.createElement('canvas');
canvas.width = img.clientWidth;
canvas.height = img.clientHeight;

let context = canvas.getContext('2d');

// 向其中复制图像（此方法允许剪裁图像）
context.drawImage(img, 0, 0);
// 可以进行一些操作，比如旋转 context.rotate()，并在 canvas 上做很多其他事情

// toBlob 是异步操作，结束后会调用 callback
canvas.toBlob(function(blob) {
  // blob 创建完成，下载它
  let link = document.createElement('a');
  link.download = 'example.png';

  link.href = URL.createObjectURL(blob);
  link.click();

  // 删除内部 blob 引用，这样浏览器可以从内存中将其清除
  URL.revokeObjectURL(link.href);
}, 'image/png');

// async/await 方式
// let blob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));

Blob 转 Stream

【相关文档】