Blob API 使用指南
一、
Blob（Binary Large Object）表示二进制类型的大对象，通常用于存储影像、声音或多媒体文件，在 JavaScript 中，Blob 类型的对象表示不可变的类似文件对象的原始数据，通过 Blob API，可以创建、操作和传输 Blob 对象。
二、Blob 构造函数
Blob 构造函数用于创建一个新的 Blob 对象，语法如下：
var aBlob = new Blob(blobParts, options);
blobParts：一个由 ArrayBuffer、ArrayBufferView、Blob 或 DOMString 等对象构成的数组，DOMStrings 会被编码为 UTF-8。
options：一个可选的对象，包含以下两个属性：
type：默认值为空字符串，表示 Blob 对象的 MIME 类型。
endings：默认值为 "transparent"，用于指定包含行结束符
的字符串如何被写入，它有两个可能的值："native" 和 "transparent"。
示例一：从字符串创建 Blob
let myBlobParts = ['<html><h2>Hello Semlinker</h2></html>']; // an array consisting of a single DOMString
let myBlob = new Blob(myBlobParts, {type : 'text/html', endings: "transparent"}); // the blob
console.log(myBlob.size + " bytes size"); // Output: 37 bytes size
console.log(myBlob.type + " is the type"); // Output: text/html is the type
示例二：从类型化数组和字符串创建 Blob
let hello = new Uint8Array([72, 101, 108, 108, 111]); // binary format of "hello"
let blob = new Blob([hello, ' ', 'semlinker'], {type: 'text/plain'});
三、Blob 属性和方法
1. 属性
size（只读）：表示 Blob 对象中所包含数据的大小（以字节为单位）。
type（只读）：一个字符串，表明该 Blob 对象所包含数据的 MIME 类型，如果类型未知，则该值为空字符串。
2. 方法
slice([start[, end[, contentType]]])：返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。
stream()：返回一个能读取 blob 内容的 ReadableStream。
text()：返回一个 Promise 对象且包含 blob 所有内容的 UTF-8 格式的 USVString。
arrayBuffer()：返回一个 Promise 对象且包含 blob 所有内容的二进制格式的 ArrayBuffer。
需要注意的是，Blob 对象是不可改变的，我们不能直接在一个 Blob 中更改数据，但可以通过分割 Blob 对象来创建新的 Blob 对象。
四、Blob 使用场景
1. 分片上传
File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的上下文中，所以针对大文件传输的场景，可以使用 slice 方法对大文件进行切割，然后分片进行上传，具体示例如下：
const file = new File(["a".repeat(1000000)], "test.txt");
const chunkSize = 40000;
const url = "https://httpbin.org/post";
async function chunkedUpload() {
for (let start = 0; start < file.size; start += chunkSize) {
const chunk = file.slice(start, start + chunkSize + 1);
const fd = new FormData();
fd.append("data", chunk);
await fetch(url, { method: "post", body: fd }).then((res) =>
res.text()
);
}
}
2. 从互联网下载数据
我们可以使用以下方法从互联网上下载数据并将数据存储到 Blob 对象中：
const downloadBlob = (url, callback) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.onload = () => {
callback(xhr.response);
};
xhr.send(null);
};
3. Blob 用作 URL
Blob 对象可以与 URL.createObjectURL() 一起使用，创建一个本地的 URL，指向该 Blob 对象，这个 URL 可以用于图像、音频或其他媒体资源。
const myBlob = new Blob(['Hello, world!'], {type: 'text/plain'});
const url = URL.createObjectURL(myBlob);
console.log(url); // 输出类似 "blob:http://example.com/abcdef"
4. Blob 转换为 Base64
将 Blob 对象转换为 Base64 编码的字符串，可以方便地将其嵌入到其他文本数据中。
function blobToBase64(blob) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(blob);
});
}
// Example usage:
blobToBase64(new Blob(['Hello, world!'])).then((base64) => {
console.log(base64); // 输出 Base64 编码的字符串
});
5. 图片压缩
通过 Blob API，可以将图片文件读取为 Blob，然后进行处理，如压缩后再保存为新的 Blob。
function compressImage(file, callback) {
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
canvas.toBlob(callback);
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
// Example usage:
compressImage(new File([""], "image/png")).then((compressedBlob) => {
console.log(compressedBlob); // 处理后的 Blob 对象
});
6. 生成 PDF
结合 HTML5 和 Blob API，可以动态生成 PDF 文件。
function generatePDF() {
const doc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.save('test.pdf');
}
7. Blob 与 ArrayBuffer 的区别
虽然 Blob 和 ArrayBuffer 都可以用来处理二进制数据，但它们有一些不同之处：
Blob：主要用于文件操作，支持大文件，适合用于分片上传和下载。
ArrayBuffer：主要用于在内存中操作二进制数据，适合需要频繁读写的小数据块操作。
五、相关问题与解答
1. Blob 和 File 有什么区别？
Blob：是一种通用的二进制数据容器，适用于各种类型的数据，包括文件和其他二进制数据，Blob 对象是不可变的。
File：是特殊类型的 Blob，专门用于表示用户系统上的文件，File 对象继承了 Blob 的属性和方法，并增加了一些特定的功能，如文件名和文件最后修改日期等。
2. 如何在前端使用 Blob API 实现文件的分片上传？
要在前端使用 Blob API 实现文件的分片上传，可以按照以下步骤进行：
1、选择文件并将其读入 Blob 对象。
2、使用slice 方法将文件切割成多个小片段。
3、使用FormData 对象和fetch API 将这些片段逐一上传到服务器，示例代码如下：
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
const CHUNK_SIZE = 1024 * 1024; // 1MB per chunk
const url = 'YOUR_UPLOAD_ENDPOINT';
const uploadChunk = async (chunk) => {
const formData = new FormData();
formData.append('file', chunk);
await fetch(url, { method: 'POST', body: formData });
};
for (let start = 0; start < file.size; start += CHUNK_SIZE) {
const end = Math.min(file.size, start + CHUNK_SIZE);
const chunk = file.slice(start, end);
uploadChunk(chunk);
}
});
到此，以上就是小编对于“blob api”的问题就介绍到这了，希望介绍的几点解答对大家有用，有任何问题和不懂的，欢迎各位朋友在评论区讨论，给我留言。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/700003.html
微信扫一扫 