本文目錄:
- 1.Blob 是什麼
- 2.Blob API 簡介
- 2.1構造函數
- 2.2屬性和方法
- 3.Blob 使用場景
- 3.1分片上傳
- 3.2從互聯網下載數據
- 3.3Blob 用作 URL
- 3.4Blob 轉換爲 Base64
- 3.5圖片壓縮
- 3.6生成 PDF
- 4.Blob 與 ArrayBuffer 的區別
在我們進行上傳和下載功能開發的時候,一定會接觸到blob類型,有時候我們找了一些別人寫好的示例,然後稍加修改就實現了需求,但並不會對此進行深一步的瞭解。
作爲一名前端,雖不需要和數據產生太多交集,但是本着知其所以然的精神,還是有必要對這種常見的類型進行深一步的瞭解。
1.Blob 是什麼
Blob(Binary Large Object)表示二進制類型的大對象。在數據庫管理系統中,將二進制數據存儲爲一個單一個體的集合。Blob 通常是影像、聲音或多媒體文件。在 JavaScript 中 Blob 類型的對象表示不可變的類似文件對象的原始數據。 爲了更直觀的感受 Blob 對象,我們先來使用 Blob 構造函數,創建一個 myBlob 對象並打印一下
var aBlob = new Blob();
console.log(aBlob)
打印結果如下
Blob {size: 0, type: ""}
如上所示,myBlob 對象含有兩個屬性:size 和 type。其中 size 屬性用於表示數據的大小(以字節爲單位),type 是 MIME 類型的字符串。Blob 表示的不一定是 JavaScript 原生格式的數據。比如 File 接口基於 Blob,繼承了 blob 的功能並將其擴展使其支持用戶系統上的文件。
2.Blob API 簡介
Blob 由一個可選的字符串 type(通常是 MIME 類型)和 blobParts 組成。
MIME(Multipurpose Internet Mail Extensions)多用途互聯網郵件擴展類型,是設定某種擴展名的文件用一種應用程序來打開的方式類型,當該擴展名文件被訪問的時候,瀏覽器會自動使用指定應用程序來打開。多用於指定一些客戶端自定義的文件名,以及一些媒體文件打開方式。
常見的 MIME 類型有:超文本標記語言文本 .html text/html、PNG圖像 .png image/png、普通文本 .txt text/plain 等。
2.1 構造函數
Blob 構造函數的語法爲:
var aBlob = new Blob(blobParts, options);
相關的參數說明如下:
- blobParts:它是一個由 ArrayBuffer,ArrayBufferView,Blob,DOMString 等對象構成的數組。DOMStrings 會被編碼爲 UTF-8。
- options:一個可選的對象,包含以下兩個屬性:
- type —— 默認值爲 "",它代表了將會被放入到 blob 中的數組內容的 MIME 類型。
- endings —— 默認值爲 "transparent",用於指定包含行結束符 \n 的字符串如何被寫入。它是以下兩個值中的一個:"native",代表行結束符會被更改爲適合宿主操作系統文件系統的換行符,或者 "transparent",代表會保持 blob 中保存的結束符不變。
示例一:從字符串創建 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]); // 二進制格式的 "hello"
let blob = new Blob([hello, ' ', 'semlinker'], {type: 'text/plain'});
介紹完 Blob 構造函數,接下來我們來分別介紹 Blob 類的屬性和方法:
2.2 屬性
前面我們已經知道 Blob 對象包含兩個屬性:
- size(只讀):表示 Blob 對象中所包含數據的大小(以字節爲單位)。
- type(只讀):一個字符串,表明該 Blob 對象所包含數據的 MIME 類型。如果類型未知,則該值爲空字符串。
2.3 方法
- slice([start[, end[, contentType]]]):返回一個新的 Blob 對象,包含了源 Blob 對象中指定範圍內的數據。
- stream():返回一個能讀取 blob 內容的 ReadableStream。
- text():返回一個 Promise 對象且包含 blob 所有內容的 UTF-8 格式的 USVString。
- arrayBuffer():返回一個 Promise 對象且包含 blob 所有內容的二進制格式的 ArrayBuffer。
這裏我們需要注意的是,Blob 對象是不可改變的。我們不能直接在一個 Blob 中更改數據,但是我們可以對一個 Blob 進行分割,從其中創建新的 Blob 對象,將它們混合到一個新的 Blob 中。這種行爲類似於 JavaScript 字符串:我們無法更改字符串中的字符,但可以創建新的更正後的字符串。
3.Blob 使用場景
3.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()
);
}
}
3.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)
}
當然除了使用 XMLHttpRequest API 之外,我們也可以使用 fetch API 來實現以流的方式獲取二進制數據。這裏我們來看一下如何使用 fetch API 獲取線上圖片並本地顯示,具體實現如下:
const myImage = document.querySelector('img');
const myRequest = new Request('flowers.jpg');
fetch(myRequest)
.then(function(response) {
return response.blob();
})
.then(function(myBlob) {
let objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
當 fetch 請求成功的時候,我們調用 response 對象的 blob() 方法,從 response 對象中讀取一個 Blob 對象,然後使用 createObjectURL() 方法創建一個 objectURL,然後把它賦值給 img 元素的 src 屬性從而顯示這張圖片。
3.3 Blob 用作 URL
Blob 可以很容易的作爲 <a>、<img> 或其他標籤的 URL,多虧了 type 屬性,我們也可以上傳/下載 Blob 對象。下面我們將舉一個 Blob 文件下載的示例,不過在看具體示例前我們得簡單介紹一下 Blob URL。
1.Blob URL/Object URL
Blob URL/Object URL 是一種僞協議,允許 Blob 和 File 對象用作圖像,下載二進制數據鏈接等的 URL 源。在瀏覽器中,我們使用 URL.createObjectURL 方法來創建 Blob URL,該方法接收一個 Blob 對象,併爲其創建一個唯一的 URL,其形式爲 blob:<origin>/<uuid>,對應的示例如下:
blob:https://example.org/40a5fb5a-d56d-4a33-b4e2-0acf6a8e5f641
瀏覽器內部爲每個通過 URL.createObjectURL 生成的 URL 存儲了一個 URL → Blob 映射。因此,此類 URL 較短,但可以訪問 Blob。生成的 URL 僅在當前文檔打開的狀態下才有效。它允許引用 <img>、<a> 中的 Blob,但如果你訪問的 Blob URL 不再存在,則會從瀏覽器中收到 404 錯誤。
上述的 Blob URL 看似很不錯,但實際上它也有副作用。雖然存儲了 URL → Blob 的映射,但 Blob 本身仍駐留在內存中,瀏覽器無法釋放它。映射在文檔卸載時自動清除,因此 Blob 對象隨後被釋放。
但是,如果應用程序壽命很長,那不會很快發生。因此,如果我們創建一個 Blob URL,即使不再需要該 Blob,它也會存在內存中。
針對這個問題,我們可以調用 URL.revokeObjectURL(url) 方法,從內部映射中刪除引用,從而允許刪除 Blob(如果沒有其他引用),並釋放內存。接下來,我們來看一下 Blob 文件下載的具體示例。
2.Blob 文件下載示例
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Blob 文件下載示例</title>
</head>
<body>
<button id="downloadBtn">文件下載</button>
<script src="index.js"></script>
</body>
</html>
index.js
const download = (fileName, blob) => {
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = fileName;
link.click();
link.remove();
URL.revokeObjectURL(link.href);
};
const downloadBtn = document.querySelector("#downloadBtn");
downloadBtn.addEventListener("click", (event) => {
const fileName = "blob.txt";
const myBlob = new Blob(["一文徹底掌握 Blob Web API"], { type: "text/plain" });
download(fileName, myBlob);
});
在示例中,我們通過調用 Blob 的構造函數來創建類型爲 "text/plain" 的 Blob 對象,然後通過動態創建 a 標籤來實現文件的下載。
3.4 Blob 轉換爲 Base64
URL.createObjectURL 的一個替代方法是,將 Blob 轉換爲 base64 編碼的字符串。Base64 是一種基於 64 個可打印字符來表示二進制數據的表示方法,它常用於在處理文本數據的場合,表示、傳輸、存儲一些二進制數據,包括 MIME 的電子郵件及 XML 的一些複雜數據。
在 MIME 格式的電子郵件中,base64 可以用來將二進制的字節序列數據編碼成 ASCII 字符序列構成的文本。使用時,在傳輸編碼方式中指定 base64。使用的字符包括大小寫拉丁字母各 26 個、數字 10 個、加號 + 和斜槓 /,共 64 個字符,等號 = 用來作爲後綴用途。
下面我們來介紹如何在 HTML 中嵌入 base64 編碼的圖片。在編寫 HTML 網頁時,對於一些簡單圖片,通常會選擇將圖片內容直接內嵌在網頁中,從而減少不必要的網絡請求,但是圖片數據是二進制數據,該怎麼嵌入呢?絕大多數現代瀏覽器都支持一種名爲 Data URLs 的特性,允許使用 base64 對圖片或其他文件的二進制數據進行編碼,將其作爲文本字符串嵌入網頁中。
Data URLs 由四個部分組成:前綴(data:)、指示數據類型的 MIME 類型、如果非文本則爲可選的 base64 標記、數據本身:
data:[<mediatype>][;base64],<data>
mediatype 是個 MIME 類型的字符串,例如 "image/jpeg" 表示 JPEG 圖像文件。如果被省略,則默認值爲 text/plain;charset=US-ASCII。如果數據是文本類型,你可以直接將文本嵌入(根據文檔類型,使用合適的實體字符或轉義字符)。如果是二進制數據,你可以將數據進行 base64 編碼之後再進行嵌入。比如嵌入一張圖片:
<img alt="logo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...">
但需要注意的是:如果圖片較大,圖片的色彩層次比較豐富,則不適合使用這種方式,因爲該圖片經過 base64 編碼後的字符串非常大,會明顯增大 HTML 頁面的大小,從而影響加載速度。 除此之外,利用 FileReader API,我們也可以方便的實現圖片本地預覽功能,具體代碼如下:
<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
const loadFile = function(event) {
const reader = new FileReader();
reader.onload = function(){
const output = document.querySelector('output');
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
};
</script>
在以上示例中,我們爲 file 類型輸入框綁定 onchange 事件處理函數 loadFile,在該函數中,我們創建了一個 FileReader 對象併爲該對象綁定 onload 相應的事件處理函數,然後調用 FileReader 對象的 readAsDataURL() 方法,把本地圖片對應的 File 對象轉換爲 Data URL。
在完成本地圖片預覽之後,我們可以直接把圖片對應的 Data URLs 數據提交到服務器。針對這種情形,服務端需要做一些相關處理,才能正常保存上傳的圖片,這裏以 Express 爲例,具體處理代碼如下:
const app = require('express')();
app.post('/upload', function(req, res){
let imgData = req.body.imgData; // 獲取POST請求中的base64圖片數據
let base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
let dataBuffer = Buffer.from(base64Data, 'base64');
fs.writeFile("image.png", dataBuffer, function(err) {
if(err){
res.send(err);
}else{
res.send("圖片上傳成功!");
}
});
});
對於 FileReader 對象來說,除了支持把 Blob/File 對象轉換爲 Data URL 之外,它還提供了 readAsArrayBuffer() 和 readAsText() 方法,用於把 Blob/File 對象轉換爲其它的數據格式。這裏我們來看個 readAsArrayBuffer() 的使用示例:
// 從 blob 獲取 arrayBuffer
let fileReader = new FileReader();
fileReader.onload = function(event) {
let arrayBuffer = fileReader.result;
};
fileReader.readAsArrayBuffer(blob);
3.5 圖片壓縮
在一些場合中,我們希望在上傳本地圖片時,先對圖片進行一定的壓縮,然後再提交到服務器,從而減少傳輸的數據量。在前端要實現圖片壓縮,我們可以利用 Canvas 對象提供的 toDataURL() 方法,該方法接收 type 和 encoderOptions 兩個可選參數。
其中 type 表示圖片格式,默認爲 image/png。而 encoderOptions 用於表示圖片的質量,在指定圖片格式爲 image/jpeg 或 image/webp 的情況下,可以從 0 到 1 的區間內選擇圖片的質量。如果超出取值範圍,將會使用默認值 0.92,其他參數會被忽略。
下面我們來看一下具體如何實現圖片壓縮:
// compress.js
const MAX_WIDTH = 800; // 圖片最大寬度
function compress(base64, quality, mimeType) {
let canvas = document.createElement("canvas");
let img = document.createElement("img");
img.crossOrigin = "anonymous";
return new Promise((resolve, reject) => {
img.src = base64;
img.onload = () => {
let targetWidth, targetHeight;
if (img.width > MAX_WIDTH) {
targetWidth = MAX_WIDTH;
targetHeight = (img.height * MAX_WIDTH) / img.width;
} else {
targetWidth = img.width;
targetHeight = img.height;
}
canvas.width = targetWidth;
canvas.height = targetHeight;
let ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, targetWidth, targetHeight); // 清除畫布
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
let imageData = canvas.toDataURL(mimeType, quality / 100);
resolve(imageData);
};
});
}
對於返回的 Data URL 格式的圖片數據,爲了進一步減少傳輸的數據量,我們可以把它轉換爲 Blob 對象:
function dataUrlToBlob(base64, mimeType) {
let bytes = window.atob(base64.split(",")[1]);
let ab = new ArrayBuffer(bytes.length);
let ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], { type: mimeType });
}
在轉換完成後,我們就可以壓縮後的圖片對應的 Blob 對象封裝在 FormData 對象中,然後再通過 AJAX 提交到服務器上:
function uploadFile(url, blob) {
let formData = new FormData();
let request = new XMLHttpRequest();
formData.append("image", blob);
request.open("POST", url, true);
request.send(formData);
}
其實 Canvas 對象除了提供 toDataURL() 方法之外,它還提供了一個 toBlob() 方法,該方法的語法如下:
canvas.toBlob(callback, mimeType, qualityArgument)
和 toDataURL() 方法相比,toBlob() 方法是異步的,因此多了個 callback 參數,這個 callback 回調方法默認的第一個參數就是轉換好的 blob文件信息。
介紹完上述的內容,我們來看一下本地圖片壓縮完整的示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>本地圖片壓縮</title>
</head>
<body>
<input type="file" accept="image/*" onchange="loadFile(event)" />
<script src="./compress.js"></script>
<script>
const loadFile = function (event) {
const reader = new FileReader();
reader.onload = async function () {
let compressedDataURL = await compress(
reader.result,
90,
"image/jpeg"
);
let compressedImageBlob = dataUrlToBlob(compressedDataURL);
uploadFile("https://httpbin.org/post", compressedImageBlob);
};
reader.readAsDataURL(event.target.files[0]);
};
</script>
</body>
</html>
3.6 生成 PDF 文檔
PDF(便攜式文件格式,Portable Document Format)是由 Adobe Systems 在 1993 年用於文件交換所發展出的文件格式。在瀏覽器端,利用一些現成的開源庫,比如 jsPDF,我們也可以方便地生成 PDF 文檔。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>客戶端生成 PDF 示例</title>
</head>
<body>
<h3>客戶端生成 PDF 示例</h3>
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<script>
(function generatePdf() {
const doc = new jsPDF();
doc.text("Hello semlinker!", 66, 88);
const blob = new Blob([doc.output()], { type: "application/pdf" });
blob.text().then((blobAsText) => {
console.log(blobAsText);
});
})();
</script>
</body>
</html>
在以上示例中,我們首先創建 PDF 文檔對象,然後調用該對象上的 text() 方法在指定的座標點上添加 Hello semlinker! 文本,然後我們利用生成的 PDF 內容來創建對應的 Blob 對象,需要注意的是我們設置 Blob 的類型爲 application/pdf,最後我們把 Blob 對象中保存的內容轉換爲文本並輸出到控制檯。由於內容較多,這裏我們只列出少部分輸出結果:
%PDF-1.3
%ºß¬à
3 0 obj
<</Type /Page
/Parent 1 0 R
/Resources 2 0 R
/MediaBox [0 0 595.28 841.89]
/Contents 4 0 R
>>
endobj
....
其實 jsPDF 除了支持純文本之外,它也可以生成帶圖片的 PDF 文檔,比如:
let imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/...'
let doc = new jsPDF();
doc.setFontSize(40)
doc.text(35, 25, 'Paranyan loves jsPDF')
doc.addImage(imgData, 'JPEG', 15, 40, 180, 160)
Blob 的應用場景還很多,這裏我們就不一一列舉了,感興趣的小夥伴可以自行查閱相關資料。
4.Blob 與 ArrayBuffer 的區別
ArrayBuffer 對象用於表示通用的,固定長度的原始二進制數據緩衝區。你不能直接操縱 ArrayBuffer 的內容,而是需要創建一個類型化數組對象或 DataView 對象,該對象以特定格式表示緩衝區,並使用該對象讀取和寫入緩衝區的內容。
Blob 類型的對象表示不可變的類似文件對象的原始數據。Blob 表示的不一定是 JavaScript 原生格式的數據。File 接口基於 Blob,繼承了Blob 功能並將其擴展爲支持用戶系統上的文件。
Blob vs ArrayBuffer
- 除非你需要使用 ArrayBuffer 提供的寫入/編輯的能力,否則 Blob 格式可能是最好的。
- Blob 對象是不可變的,而 ArrayBuffer 是可以通過 TypedArrays 或 DataView 來操作。
- ArrayBuffer 是存在內存中的,可以直接操作。而 Blob 可以位於磁盤、高速緩存內存和其他不可用的位置。
- 雖然 Blob 可以直接作爲參數傳遞給其他函數,比如 window.URL.createObjectURL()。但是,你可能仍需要 FileReader 之類的 File API 才能與 Blob 一起使用。
- Blob 與 ArrayBuffer 對象之間是可以相互轉化的:
- 使用 FileReader 的 readAsArrayBuffer() 方法,可以把 Blob 對象轉換爲 ArrayBuffer 對象;
- 使用 Blob 構造函數,如 new Blob([new Uint8Array(data]);,可以把 ArrayBuffer 對象轉換爲 Blob 對象。
對於 HTTP 的場景,比如在 AJAX 場景下,Blob 和 ArrayBuffer 可以通過以下方式來使用:
function GET(url, callback) {
let xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer'; // or xhr.responseType = "blob";
xhr.send();
xhr.onload = function(e) {
if (xhr.status != 200) {
alert("Unexpected status code " + xhr.status + " for " + url);
return false;
}
callback(new Uint8Array(xhr.response)); // or new Blob([xhr.response]);
};
}