Blob 对象是 JavaScript 中的一个原生对象,用于表示二进制大对象(Binary Large Object)。Blob 对象可以存储任意类型的数据,包括文本、图片、音频、视频等。
下面是一个使用 Blob 对象及其数据的代码示例:
// 创建一个文本类型的 Blob 对象
const textData = "Hello, World!";
const blobData = new Blob([textData], { type: "text/plain" });
// 读取 Blob 对象的数据
const reader = new FileReader();
reader.onload = function (event) {
const data = event.target.result;
console.log(data); // 输出:Hello, World!
};
reader.readAsText(blobData);
// 创建一个图片类型的 Blob 对象
const imageUrl = 'https://example.com/image.jpg';
fetch(imageUrl)
.then(response => response.blob())
.then(blob => {
// 读取 Blob 对象的数据
const reader = new FileReader();
reader.onload = function (event) {
const data = event.target.result;
console.log(data); // 输出图片的二进制数据
};
reader.readAsDataURL(blob);
});
上述示例代码中,首先创建了一个文本类型的 Blob 对象,然后使用 FileReader
对象读取 Blob 对象的数据。通过 readAsText
方法将 Blob 数据解析为文本。
另外,示例中还展示了如何创建一个图片类型的 Blob 对象,并使用 fetch
函数获取图片的二进制数据。然后,使用 FileReader
对象的 readAsDataURL
方法将 Blob 数据解析为 Base64 编码的图片数据。
需要注意的是,Blob 对象的数据是不可修改的。如果需要对 Blob 数据进行修改,可以先将其转换为可修改的数据类型,例如 ArrayBuffer
或 Uint8Array
,然后再进行操作。