什么是Blob API？它在现代Web开发中扮演什么角色？-酷北运营网

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”的问题就介绍到这了，希望介绍的几点解答对大家有用，有任何问题和不懂的，欢迎各位朋友在评论区讨论，给我留言。

什么是Blob API？它在现代Web开发中扮演什么角色？

一、

二、Blob 构造函数

三、Blob 属性和方法

四、Blob 使用场景

五、相关问题与解答

相关文章

Blob JS中存在大小限制吗？

什么是Blob.js？它在JavaScript中有什么用途？

什么是Blob文件在JavaScript中的使用？

发表评论

暂无评论，1人围观

目录[+]