Blob類型全解析

一、Blob類型的概念

Blob類型是一種Web API，能夠表示二進位數據，並可將這些數據作為單個的 Blob 對象進行處理。Blob是Binary Large Object的縮寫，可以存儲大型的二進位文件，如圖像和PDF文件。在瀏覽器中，Blob對象可以用來存儲任何二進位文件，例如從伺服器上下載或上傳的文件，或者通過Canvas API生成的圖像數據等。

二、如何創建Blob對象

在JavaScript中，我們可以使用Blob構造函數來創建一個新的Blob對象。

    var blob = new Blob(arrayOrIterable[, options]);

其中，arrayOrIterable參數可以是一個包含二進位數據（Uint8Array或ArrayBuffer）或文本數據（字元串）的數組或可迭代對象。options參數是一個可選的配置對象，可以包含兩個屬性：type和endings。其中，type屬性可以指定Blob對象的MIME類型；endings屬性用於指定包含文本數據的數組的結尾方式，可以為”native”或”transparent”。

三、Blob對象的常用方法

1. slice()方法

slice()方法用於從一個現有的Blob對象中提取一部分數據，返回一個新的Blob對象。slice()方法接收兩個參數：start和end，分別表示要提取的數據的起始和結束位置。這兩個參數都是可選的。如果省略start參數，則從Blob對象的開頭開始提取；如果省略end參數，則一直提取到Blob對象的結尾。

    var blob = new Blob(['hello world']);
    var slice = blob.slice(0, 5); //提取前5個位元組

2. size屬性

size屬性返回Blob對象所包含的數據的位元組數。

    var blob = new Blob(['hello world']);
    console.log(blob.size); //11

3. type屬性

type屬性返回Blob對象的MIME類型。如果Blob對象沒有設置MIME類型，則返回一個空字元串。

    var blob = new Blob([new Uint8Array([0, 1, 2])], {type: 'image/jpeg'});
    console.log(blob.type); //"image/jpeg"

4. text()方法

text()方法用於將Blob對象的數據讀取為文本字元串。

    var blob = new Blob(['hello world']);
    var reader = new FileReader();
    reader.onload = function() {
        console.log(reader.result); //"hello world"
    };
    reader.readAsText(blob);

5. arrayBuffer()方法

arrayBuffer()方法用於將Blob對象的數據讀取為ArrayBuffer對象。

    var blob = new Blob([new Uint8Array([0, 1, 2])]);
    var reader = new FileReader();
    reader.onload = function() {
        console.log(new Uint8Array(reader.result)); //[0, 1, 2]
    };
    reader.readAsArrayBuffer(blob);

四、Canvas API與Blob類型

Canvas API提供了toBlob()方法，用於將Canvas對象中的圖像數據保存為Blob對象。

    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    // 繪製圖像
    canvas.toBlob(function(blob) {
        // 保存Blob對象
    });

toBlob()方法接收一個回調函數作為參數，當圖像數據被轉換為Blob對象之後，該回調函數被調用，並且傳入一個Blob對象。

五、Blob類型的應用

1. 文件上傳

通過XMLHttpRequest對象上傳文件時，可以使用FormData對象將Blob對象包裝成一個表單數據項（File對象）。

    var formData = new FormData();
    formData.append('file', blob, 'test.jpg');
    xhr.send(formData);

2. 圖片壓縮

通過Canvas API可以將用戶上傳的高清圖片壓縮為低解析度的縮略圖，從而減少伺服器的存儲空間和網路傳輸時間。

    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.onload = function() {
        // 將圖像繪製到畫布上
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        // 將畫布中的圖像數據轉換為Blob對象
        canvas.toBlob(function(blob) {
            // 保存Blob對象
        }, 'image/jpeg', 0.8);
    };
    img.src = 'https://example.com/largeImage.jpg';

3. 音視頻錄製

通過MediaRecorder API，可以將用戶在瀏覽器中的音視頻錄製為Blob對象。

    var stream = navigator.mediaDevices.getUserMedia({audio: true, video: true});
    var recorder = new MediaRecorder(stream);
    var chunks = [];
    recorder.ondataavailable = function(e) {
        chunks.push(e.data);
    };
    recorder.onstop = function() {
        var blob = new Blob(chunks, {type: 'video/webm'});
        // 保存Blob對象
    };
    recorder.start();
    setTimeout(function() {
        recorder.stop();
    }, 5000);

六、結語

Blob類型在Web開發中有著廣泛的應用，能夠存儲和處理各種類型的二進位數據，為開發者提供了更多的自由度和靈活性。在使用Blob類型時，需要注意內存和性能的問題，避免數據過大導致瀏覽器奔潰或出現明顯卡頓現象。