什么是 JavaScript 中的 blob？
在 JavaScript 中，Blob 是一个对象，它是一组字节，表示文件中存储的数据。我们可以很容易地将 Blob 对象的内容读取为 ArrayBuffer，因此存储二进制数据非常有用。Blob 对象用于处理原始二进制数据，我们可以从纯文本、文件数据等中创建这些数据。
语法
用户可以按照以下语法使用 Blob（） 构造函数创建 blob 对象。
new Blob(BlobContent, Options);
或
new Blob(BlobContent, {type: Type of the Blob content});
在上面的语法中，Blob（） 构造函数采用两个参数并返回 Blob 对象的一个实例。开发人员可以根据 'BlobContent' 设置 'type' 选项的值。
参数
Blob（） 构造函数采用两个参数，如下所示。
- BlobContent - 它是文本、数据或文件内容。
- Options − 它是一个可选对象，包含 BlobContent 的各种选项。
'type' 是 Options 对象中的一个重要属性。它包含 BlobContent 的 MIME 类型作为值。例如，要在 blob 对象中存储纯文本，你可以使用 'text/plain' 作为 MIME 类型;对于图像，您可以使用 'image/jpg' 或 'image/png' 等。
例在下面的示例代码中，我们使用了 blob（） 构造函数来创建 blob 对象。我们已将 'Hello World！' 字符串作为第一个参数传递，并将内容的 'text/plain' MIME 类型作为 blob（） 构造函数的第二个参数传递。
之后，我们创建了 FileReader（） 对象的实例，并使用 readAsText（） 方法读取 blob 对象的内容。在输出中，我们可以看到它打印了纯文本，即 blob 对象的内容。
<html>
<body>
<h2> JavaScript - Blob Object </h2>
<h3 id = "output"> </h3>
<script>
var data = "Hello World";
var blob = new Blob([data], {
type: 'text/plain'
});
// 使用fileReader对象读取blob
var reader = new FileReader();
reader.addEventListener("loadend", function (e) {
var text = reader.result;
document.getElementById("output").innerHTML = text;
});
// 开始以文本形式读取blob
reader.readAsText(blob);
</script>
</body>
</html>
Blob URL
在上面的部分中，我们学习了如何使用 blob 对象。此外，我们还可以使用 blob 对象创建 URL。由于任何特定 URL 都引用本地文件系统中的文件，因此 blob URL 引用 blob 对象的内容。此外，我们可以将 blob URL 用作带有 <a> 或 <img> 标签的实际 URL。
让我们看一下下面的示例，从 blob 对象创建 URL。
示例：使用 Blob URL 呈现文本内容
在下面的示例中，我们创建了 blob 对象的实例，并将文本内容作为参数传递。之后，我们使用 createObjectURL（） 方法创建一个 blob URL。
接下来，我们使用 blob URL 更新了 '<a>' 的 'href' 属性的值。在输出中，当您单击 URL 时，它会显示存储在 blob 对象中的内容。
<html>
<body>
<h2> JavaScript - Blob URL </h2>
<a href = "#" id = "download"> Download Text File </a>
<script>
// 使用Blob对象创建文件
var data = "This file contains the content of the blob object.";
var blob = new Blob([data], {
type: 'text/plain'
});
// 从Blob对象创建URL
var url = URL.createObjectURL(blob);
var a = document.getElementById("download");
// 更新`href`属性的值
a.href = url;
</script>
</body>
</html>
示例：使用 Blob URL 呈现图像
在此示例中，我们使用 file input 来获取图像作为 input。每当用户上传图像时，我们都会使用文件内容创建 blob 对象。
之后，我们从 blob 对象创建一个 URL，并将其用作 '' 标签的 'src' 属性的值，以在网页上呈现图像。
<html>
<body>
<h2> JavaScript – Blob URL </h2>
<h3> Upload image file </h3>
<input type = "file" id = "fileInput" />
<div id = "output"> </div>
<script>
// 读取文件并创建blob
document.getElementById('fileInput').addEventListener('change', function () {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function () {
// 创建blob
var blob = new Blob([new Uint8Array(this.result)], { type: file.type });
// 创建对象URL
var url = URL.createObjectURL(blob);
// 将对象URL设置为图像的来源
document.getElementById('output').innerHTML = '<img src="' + url + '" />';
};
reader.readAsArrayBuffer(file);
});
</script>
</body>
</html>
Blob 的优点和缺点
以下是使用 blob 对象的一些优点和缺点。
优点
- Blob 对象非常适合在 Web 上处理大型二进制数据文件。
- 开发人员可以使用 blob 对象以块的形式获取数据，从而提高应用程序的性能。
- Blob 对象可以与文件 API 一起使用，以在浏览器中执行文件操作。
缺点
- 大型 blob 对象可能会消耗大量内存和资源，这可能会影响应用程序的整体性能和使用体验。
- 使用 blob 对象处理二进制数据可能会给代码带来安全问题。
- 较旧的浏览器不支持 blob。
