Blob

Blob（Binary Large Object）表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob通常是影像、声音或多媒体文件。在JavaScript中Blob类型的对象表示不可变的类似文件对象的原始数据。为了更直观的感受Blob对象，我们先来使用Blob构造函数，创建一个myBlob对象，具体如下图所示：

如你所见，myBlob对象含有两个属性：size和type。其中size属性用于表示数据的大小（以字节为单位），type是MIME类型的字符串。Blob表示的不一定是JavaScript原生格式的数据。比如File接口基于Blob，继承了blob的功能并将其扩展使其支持用户系统上的文件。

Blob API简介

Blob由一个可选的字符串type（通常是MIME类型）和blobParts组成：

MIME（Multipurpose Internet Mail Extensions）多用途互联网邮件扩展类型，是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。常见的MIME类型有：超文本标记语言文本.html text/html、PNG图像.png image/png、普通文本.txt text/plain等。

构造函数

Blob构造函数的语法为：

var aBlob = new Blob(blobParts, options);

Blob类的属性和方法

前面我们已经知道Blob对象包含两个属性：

size（只读）：表示 Blob 对象中所包含数据的大小（以字节为单位）。
type（只读）：一个字符串，表明该 Blob 对象所包含数据的MIME类型。如果类型未知，则该值为空字符串。

方法包含：

slice([start[, end[, contentType]]])：返回一个新的Blob对象，包含了源Blob对象中指定范围内的数据。
stream()：返回一个能读取blob内容的 ReadableStream。
text()：返回一个Promise对象且包含blob所有内容的UTF-8格式的 USVString。
arrayBuffer()：返回一个Promise对象且包含blob所有内容的二进制格式的 ArrayBuffer。

这里我们需要注意的是，Blob 对象是不可改变的。我们不能直接在一个Blob中更改数据，但是我们可以对一个Blob进行分割，从其中创建新的Blob对象，将它们混合到一个新的Blob中。这种行为类似于JavaScript字符串：我们无法更改字符串中的字符，但可以创建新的更正后的字符串。

Blob使用场景

分片上传

File对象是特殊类型的Blob，且可以用在任意的Blob类型的上下文中。所以针对大文件传输的场景，我们可以使用slice方法对大文件进行切割，然后分片进行上传，具体示例如下：

const file = new File(["a".repeat(1000000)], "test.txt");

const chunkSize = 40000;
const url = "https://httpbin.org/post";

async function chunkedUpload() {
  for (let start = 0; start < file.size; start += chunkSize) {
    const chunk = file.slice(start, start + chunkSize + 1);
    const fd = new FormData();
    fd.append("data", chunk);

    await fetch(url, { method: "post", body: fd }).then((res) => res.text());
  }
}

从互联网下载数据

我们可以使用以下方法从互联网上下载数据并将数据存储到Blob对象中，比如：

const downloadBlob = (url, callback) => {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.responseType = "blob";
  xhr.onload = () => {
    callback(xhr.response);
  };
  xhr.send(null);
};

当然除了使用XMLHttpRequest API之外，我们也可以使用fetch API来实现以流的方式获取二进制数据。这里我们来看一下如何使用fetch API获取线上图片并本地显示，具体实现如下：

const myImage = document.querySelector("img");
const myRequest = new Request("flowers.jpg");

fetch(myRequest)
  .then(function (response) {
    return response.blob();
  })
  .then(function (myBlob) {
    let objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });

当fetch请求成功的时候，我们调用response对象的blob()方法，从response对象中读取一个Blob对象，然后使用createObjectURL()方法创建一个objectURL，然后把它赋值给img元素的src属性从而显示这张图片。

Blob用作URL

Blob可以很容易的作为、或其他标签的URL，多亏了type属性，我们也可以上传/下载Blob对象。Blob URL/Object URL是一种伪协议，允许Blob和File对象用作图像，下载二进制数据链接等的URL源。在浏览器中，我们使用URL.createObjectURL方法来创建Blob URL，该方法接收一个Blob对象，并为其创建一个唯一的URL，其形式为 blob:<origin>/<uuid>，对应的示例如下：

blob:https://example.org/40a5fb5a-d56d-4a33-b4e2-0acf6a8e5f641

浏览器内部为每个通过URL.createObjectURL生成的URL存储了一个URL → Blob映射。因此，此类URL较短，但可以访问Blob。生成的URL仅在当前文档打开的状态下才有效。它允许引用 <img>、<a> 中的Blob，但如果你访问的Blob URL不再存在，则会从浏览器中收到404错误。上述的Blob URL看似很不错，但实际上它也有副作用。虽然存储了URL → Blob的映射，但Blob本身仍驻留在内存中，浏览器无法释放它。映射在文档卸载时自动清除，因此Blob对象随后被释放。

但是，如果应用程序寿命很长，那不会很快发生。因此，如果我们创建一个Blob URL，即使不再需要该Blob，它也会存在内存中。针对这个问题，我们可以调用URL.revokeObjectURL(url)方法，从内部映射中删除引用，从而允许删除Blob（如果没有其他引用），并释放内存。接下来，我们来看一下Blob文件下载的具体示例。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Blob 文件下载示例</title>
  </head>

  <body>
    <button id="downloadBtn">文件下载</button>
    <script src="index.js"></script>
  </body>
</html>

const download = (fileName, blob) => {
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = fileName;
  link.click();
  link.remove();
  URL.revokeObjectURL(link.href);
};

const downloadBtn = document.querySelector("#downloadBtn");
downloadBtn.addEventListener("click", (event) => {
  const fileName = "blob.txt";
  const myBlob = new Blob(["一文彻底掌握 Blob Web API"], {
    type: "text/plain",
  });
  download(fileName, myBlob);
});

在示例中，我们通过调用Blob的构造函数来创建类型为 “text/plain” 的Blob对象，然后通过动态创建a标签来实现文件的下载。

Blob转换为Base64

URL.createObjectURL的一个替代方法是，将Blob转换为base64编码的字符串。Base64是一种基于64个可打印字符来表示二进制数据的表示方法，它常用于在处理文本数据的场合，表示、传输、存储一些二进制数据，包括MIME的电子邮件及XML的一些复杂数据。在MIME格式的电子邮件中，base64可以用来将二进制的字节序列数据编码成ASCII字符序列构成的文本。使用时，在传输编码方式中指定base64。使用的字符包括大小写拉丁字母各26个、数字10个、加号+和斜杠/，共64个字符，等号=用来作为后缀用途。

下面我们来介绍如何在HTML中嵌入base64编码的图片。在编写HTML网页时，对于一些简单图片，通常会选择将图片内容直接内嵌在网页中，从而减少不必要的网络请求，但是图片数据是二进制数据，该怎么嵌入呢？绝大多数现代浏览器都支持一种名为Data URLs的特性，允许使用base64对图片或其他文件的二进制数据进行编码，将其作为文本字符串嵌入网页中。

Data URLs由四个部分组成：前缀（data:）、指示数据类型的MIME类型、如果非文本则为可选的base64标记、数据本身：

data:[<mediatype>][;base64],<data>

mediatype是个MIME类型的字符串，例如 “image/jpeg” 表示JPEG图像文件。如果被省略，则默认值为text/plain;charset=US-ASCII。如果数据是文本类型，你可以直接将文本嵌入（根据文档类型，使用合适的实体字符或转义字符）。如果是二进制数据，你可以将数据进行base64编码之后再进行嵌入。比如嵌入一张图片：

<img alt="logo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." />

但需要注意的是：如果图片较大，图片的色彩层次比较丰富，则不适合使用这种方式，因为该图片经过base64编码后的字符串非常大，会明显增大HTML页面的大小，从而影响加载速度。除此之外，利用FileReader API，我们也可以方便的实现图片本地预览功能，具体代码如下：

<input type="file" accept="image/*" onchange="loadFile(event)" />
<img id="output" />

<script>
  const loadFile = function (event) {
    const reader = new FileReader();
    reader.onload = function () {
      const output = document.querySelector("output");
      output.src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
  };
</script>

在以上示例中，我们为file类型输入框绑定onchange事件处理函数loadFile，在该函数中，我们创建了一个FileReader对象并为该对象绑定onload相应的事件处理函数，然后调用FileReader对象的readAsDataURL()方法，把本地图片对应的File对象转换为Data URL。在完成本地图片预览之后，我们可以直接把图片对应的Data URLs数据提交到服务器。针对这种情形，服务端需要做一些相关处理，才能正常保存上传的图片，这里以Express为例，具体处理代码如下：

const app = require("express")();

app.post("/upload", function (req, res) {
  let imgData = req.body.imgData; // 获取POST请求中的base64图片数据
  let base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
  let dataBuffer = Buffer.from(base64Data, "base64");
  fs.writeFile("image.png", dataBuffer, function (err) {
    if (err) {
      res.send(err);
    } else {
      res.send("图片上传成功！");
    }
  });
});

对于FileReader对象来说，除了支持把Blob/File对象转换为Data URL之外，它还提供了readAsArrayBuffer()和readAsText()方法，用于把Blob/File对象转换为其它的数据格式。这里我们来看个readAsArrayBuffer()的使用示例：

// 从 blob 获取 arrayBuffer
let fileReader = new FileReader();

fileReader.onload = function (event) {
  let arrayBuffer = fileReader.result;
};
fileReader.readAsArrayBuffer(blob);

图片压缩

在一些场合中，我们希望在上传本地图片时，先对图片进行一定的压缩，然后再提交到服务器，从而减少传输的数据量。在前端要实现图片压缩，我们可以利用Canvas对象提供的toDataURL()方法，该方法接收type和encoderOptions两个可选参数。

其中type表示图片格式，默认为image/png。而encoderOptions用于表示图片的质量，在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92，其他参数会被忽略。

下面我们来看一下具体如何实现图片压缩：

// compress.js
const MAX_WIDTH = 800; // 图片最大宽度

function compress(base64, quality, mimeType) {
  let canvas = document.createElement("canvas");
  let img = document.createElement("img");
  img.crossOrigin = "anonymous";
  return new Promise((resolve, reject) => {
    img.src = base64;
    img.onload = () => {
      let targetWidth, targetHeight;
      if (img.width > MAX_WIDTH) {
        targetWidth = MAX_WIDTH;
        targetHeight = (img.height * MAX_WIDTH) / img.width;
      } else {
        targetWidth = img.width;
        targetHeight = img.height;
      }
      canvas.width = targetWidth;
      canvas.height = targetHeight;
      let ctx = canvas.getContext("2d");
      ctx.clearRect(0, 0, targetWidth, targetHeight); // 清除画布
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      let imageData = canvas.toDataURL(mimeType, quality / 100);
      resolve(imageData);
    };
  });
}

对于返回的Data URL格式的图片数据，为了进一步减少传输的数据量，我们可以把它转换为Blob对象：

function dataUrlToBlob(base64, mimeType) {
  let bytes = window.atob(base64.split(",")[1]);
  let ab = new ArrayBuffer(bytes.length);
  let ia = new Uint8Array(ab);
  for (let i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i);
  }
  return new Blob([ab], { type: mimeType });
}

在转换完成后，我们就可以压缩后的图片对应的Blob对象封装在FormData对象中，然后再通过AJAX提交到服务器上：

function uploadFile(url, blob) {
  let formData = new FormData();
  let request = new XMLHttpRequest();
  formData.append("image", blob);
  request.open("POST", url, true);
  request.send(formData);
}

其实Canvas对象除了提供 toDataURL() 方法之外，它还提供了一个 toBlob() 方法，该方法的语法如下：

canvas.toBlob(callback, mimeType, qualityArgument);

和 toDataURL() 方法相比，toBlob() 方法是异步的，因此多了个 callback 参数，这个 callback 回调方法默认的第一个参数就是转换好的 blob文件信息。

介绍完上述的内容，我们来看一下本地图片压缩完整的示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>本地图片压缩</title>
  </head>
  <body>
    <input type="file" accept="image/*" onchange="loadFile(event)" />
    <script src="./compress.js"></script>
    <script>
      const loadFile = function (event) {
        const reader = new FileReader();
        reader.onload = async function () {
          let compressedDataURL = await compress(
            reader.result,
            90,
            "image/jpeg"
          );
          let compressedImageBlob = dataUrlToBlob(compressedDataURL);
          uploadFile("https://httpbin.org/post", compressedImageBlob);
        };
        reader.readAsDataURL(event.target.files[0]);
      };
    </script>
  </body>
</html>

生成PDF文档

PDF（便携式文件格式，Portable Document Format）是由Adobe Systems在1993年用于文件交换所发展出的文件格式。在浏览器端，利用一些现成的开源库，比如jsPDF，我们也可以方便地生成PDF文档。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>客户端生成 PDF 示例</title>
  </head>
  <body>
    <h3>客户端生成 PDF 示例</h3>
    <script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
    <script>
      (function generatePdf() {
        const doc = new jsPDF();
        doc.text("Hello semlinker!", 66, 88);
        const blob = new Blob([doc.output()], { type: "application/pdf" });
        blob.text().then((blobAsText) => {
          console.log(blobAsText);
        });
      })();
    </script>
  </body>
</html>

在以上示例中，我们首先创建PDF文档对象，然后调用该对象上的text()方法在指定的坐标点上添加Hello semlinker!文本，然后我们利用生成的PDF内容来创建对应的Blob对象，需要注意的是我们设置Blob的类型为application/pdf，最后我们把Blob对象中保存的内容转换为文本并输出到控制台。由于内容较多，这里我们只列出少部分输出结果：

%PDF-1.3
%ºß¬à
3 0 obj
<</Type /Page
/Parent 1 0 R
/Resources 2 0 R
/MediaBox [0 0 595.28 841.89]
/Contents 4 0 R
>>
endobj
....

其实jsPDF除了支持纯文本之外，它也可以生成带图片的PDF文档，比如：

let imgData = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/...";
let doc = new jsPDF();

doc.setFontSize(40);
doc.text(35, 25, "Paranyan loves jsPDF");
doc.addImage(imgData, "JPEG", 15, 40, 180, 160);

Blob与ArrayBuffer的区别

ArrayBuffer对象用于表示通用的，固定长度的原始二进制数据缓冲区。你不能直接操纵ArrayBuffer的内容，而是需要创建一个类型化数组对象或DataView对象，该对象以特定格式表示缓冲区，并使用该对象读取和写入缓冲区的内容。Blob类型的对象表示不可变的类似文件对象的原始数据。Blob表示的不一定是JavaScript原生格式的数据。File接口基于Blob，继承了Blob功能并将其扩展为支持用户系统上的文件。

Blob vs ArrayBuffer

除非你需要使用ArrayBuffer提供的写入/编辑的能力，否则Blob格式可能是最好的。
Blob对象是不可变的，而ArrayBuffer是可以通过TypedArrays或DataView来操作。
ArrayBuffer是存在内存中的，可以直接操作。而Blob可以位于磁盘、高速缓存内存和其他不可用的位置。
虽然Blob可以直接作为参数传递给其他函数，比如 window.URL.createObjectURL()。但是，你可能仍需要FileReader之类的File API才能与Blob一起使用。
Blob与ArrayBuffer对象之间是可以相互转化的：
- 使用FileReader的 readAsArrayBuffer() 方法，可以把Blob对象转换为ArrayBuffer对象；
- 使用Blob构造函数，如 new Blob([new Uint8Array(data]);，可以把ArrayBuffer对象转换为Blob对象。

对于HTTP的场景，比如在AJAX场景下，Blob和ArrayBuffer可以通过以下方式来使用：

function GET(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'arraybuffer'; // or xhr.responseType = "blob";
  xhr.send();

  xhr.onload = function(e) {
    if (xhr.status != 200) {
      alert("Unexpected status code " + xhr.status + " for " + url);
      return false;
    }
    callback(new Uint8Array(xhr.response)); // or new Blob([xhr.response]);
  };
}

对于ArrayBuffer和Uint8Array感兴趣的读者，可以阅读 Deno bytes模块全解析这篇文章。

了解完上述的内容，相信有的读者可能会觉得意犹未尽。那么，对于Blob来说还有哪些内容可以继续深入学习的呢？本人下一步的计划是基于Deno的源码，来逐步分析DenoBlob的具体实现。当然也会顺便分析一下 URL.createObjectURL() 方法和 revokeObjectURL() 方法的实现。

Blob

Blob

Blob API简介

构造函数

Blob类的属性和方法

Blob使用场景

分片上传

从互联网下载数据

Blob用作URL

Blob转换为Base64

图片压缩

生成PDF文档

Blob与ArrayBuffer的区别

Blob vs ArrayBuffer

Links