Javascript 简明教程
JavaScript - Blob
What is blob in JavaScript?
在 JavaScript 中， Blob 是一个对象，它是一组字节，表示存储在文件中的数据。我们可以轻松地将 Blob 对象的内容读取为 ArrayBuffer，因此它非常适合存储二进制数据。 Blob 对象用于处理原始二进制数据，我们可以从纯文本、文件数据等创建这些数据。
Syntax
用户可以遵循以下语法来使用 Blob() 构造函数创建一个 blob 对象。
new Blob(BlobContent, Options);或
new Blob(BlobContent, {type: Type of the Blob content});在上面的语法中，Blob() 构造函数采用两个参数并返回 Blob 对象的实例。开发人员可以根据 BlobContent 设置“类型”选项的值。
Parameters
Blob() 构造函数采用以下两个参数。
-
BlobContent − 它是一些文本、数据或文件内容。
-
Options − 它是一个包含 BlobContent 的各种选项的可选对象。
“type”是 Options 对象中一个重要的属性。它以值的格式包含 BlobContent 的 MIME 类型。例如，要在 blob 对象中存储纯文本，可以用 'text/plain' 作为 MIME 类型；对于图像，可以用 'image/jpg' 或 'image/png' 等。
Example
在下面的示例代码中，我们使用了 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'
});
// Using the fileReader object to read the blob
var reader = new FileReader();
reader.addEventListener("loadend", function (e) {
var text = reader.result;
document.getElementById("output").innerHTML = text;
});
// Start reading the blob as text
reader.readAsText(blob);
</script>
</body>
</html>Blob URLs
在上述部分中，我们学习了如何使用 blob 对象。此外，我们还可以使用 blob 对象创建 URL。任何特定 URL 都指向本地文件系统中的文件，blob URL 指向 blob 对象的内容。此外，我们可以将 blob URL 用作包含 <a> 或 <img> 标记的实际 URL。
让我们看一如下面的示例，以从 blob 对象创建 URL。
Example: Rendering text content using the 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>
// Creating file using Blob object
var data = "This file contains the content of the blob object.";
var blob = new Blob([data], {
type: 'text/plain'
});
// Creating URL from Blob object
var url = URL.createObjectURL(blob);
var a = document.getElementById("download");
// Updating the `href` attribute's value
a.href = url;
</script>
</body>
</html>Example: Rendering an Image Using the Blob URL
在这个示例中，我们使用文件输入获取了图像作为输入。每当用户上传图像时，我们就使用文件内容创建一个 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>
// Read the file and create a blob
document.getElementById('fileInput').addEventListener('change', function () {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function () {
// Create a blob
var blob = new Blob([new Uint8Array(this.result)], { type: file.type });
// Create an object URL
var url = URL.createObjectURL(blob);
// Set the object URL as the source of an image
document.getElementById('output').innerHTML = '<img src="' + url + '" />';
};
reader.readAsArrayBuffer(file);
});
</script>
</body>
</html>