JavaScript - Blob

什么是 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。

打印本页