JavaScript - Blob
JavaScript 中的 Blob 是什么?
在 JavaScript 中，Blob 是一个对象，它是由一组字节组成的，用于表示文件中存储的数据。我们可以轻松地将 Blob 对象的内容读取为 ArrayBuffer，因此它非常适合存储二进制数据。Blob 对象用于处理原始二进制数据，这些数据可以通过纯文本、文件数据等创建。
语法
用户可以按照以下语法使用 Blob() 构造函数创建 Blob 对象。
new Blob(BlobContent, Options);
或
new Blob(BlobContent, {type: Blob 内容的类型});
在上述语法中，Blob() 构造函数接受两个参数并返回一个 Blob 对象实例。开发者可以根据 `BlobContent` 设置 `type` 选项的值。
参数
Blob() 构造函数接受两个参数，如下所示。
BlobContent − 内容可以是文本、数据或文件。
Options − 是一个可选对象，包含 BlobContent 的各种选项。
`type` 是 Options 对象中的一个重要属性。它包含 BlobContent 的 MIME 类型作为值。例如，要在 Blob 对象中存储纯文本，可以使用 `text/plain` 作为 MIME 类型;对于图像，您可以使用"image/jpg"或"image/png"等格式。
示例
在下面的示例代码中，我们使用 blob() 构造函数创建了一个 blob 对象。我们将"Hello World!"字符串作为第一个参数，并将内容的 MIME 类型"text/plain"作为 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 对象的内容。此外，我们还可以结合 <a> 或 <img> 标签，将 Blob URL 用作实际 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 渲染图像
在本例中，我们使用文件输入框获取图像作为输入。每当用户上传图像时，我们都会使用文件内容创建 Blob 对象。
之后，我们根据 Blob 对象创建一个 URL，并将其用作"
<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 对象可以与 File API 一起使用，在浏览器中执行文件操作。
缺点
大型 Blob 对象会消耗大量内存和资源，从而影响应用程序的整体性能和使用体验。
使用 Blob 对象处理二进制数据可能会给代码带来安全隐患。
旧版浏览器不支持支持 blob。
