前段時間研究二進制流圖片展示遇到了Blob對象,在這里做一下筆記。
Blob基本用法
創建
可以通過Blob的構造函數創建Blob對象：
Blob(blobParts[, options])
參數說明：
blobParts： 數組類型， 數組中的每一項連接起來構成Blob對象的數據，數組中的每項元素可以是ArrayBuffer(二進制數據緩沖區), ArrayBufferView,Blob,DOMString。或其他類似對象的混合體。
options： 可選項，字典格式類型，可以指定如下兩個屬性：
- type，默認值為
""，它代表了將會被放入到blob中的數組內容的MIME類型。 - endings， 默認值為"transparent"，用於指定包含行結束符
\n的字符串如何被寫入。 它是以下兩個值中的一個： "native"，表示行結束符會被更改為適合宿主操作系統文件系統的換行符； "transparent"，表示會保持blob中保存的結束符不變。
舉個例子：
var data1 = "a"; var data2 = "b"; var data3 = "<div style='color:red;'>This is a blob</div>"; var data4 = { "name": "abc" }; var blob1 = new Blob([data1]); var blob2 = new Blob([data1, data2]); var blob3 = new Blob([data3]); var blob4 = new Blob([JSON.stringify(data4)]); var blob5 = new Blob([data4]); var blob6 = new Blob([data3, data4]); console.log(blob1); //輸出：Blob {size: 1, type: ""} console.log(blob2); //輸出：Blob {size: 2, type: ""} console.log(blob3); //輸出：Blob {size: 44, type: ""} console.log(blob4); //輸出：Blob {size: 14, type: ""} console.log(blob5); //輸出：Blob {size: 15, type: ""} console.log(blob6); //輸出：Blob {size: 59, type: ""}
Blob 對象中所包含數據的字節數。這里要注意，使用字符串和普通對象創建Blob時的不同，blob4使用通過
JSON.stringify把data4對象轉換成json字符串，blob5則直接使用data4創建，兩個對象的size分別為14和15。blob4的size等於14很容易理解，因為JSON.stringify(data4)的結果為：
"{"name":"abc"}"，正好14個字節(不包含最外層的引號)。blob5的size等於15是如何計算而來的呢？實際上，當使用普通對象創建Blob對象時，相當於調用了普通對象的toString()方法得到字符串數據，然后再創建Blob對象。所以，blob5保存的數據是
"[object Object]"，是15個字節(不包含最外層的引號)。
slice方法
Blob對象有一個slice方法，返回一個新的Blob對象，包含了源Blob對象中制定范圍內的數據。
參數說明：
start： 可選，代表 Blob 里的下標，表示第一個會被會被拷貝進新的 Blob 的字節的起始位置。如果傳入的是一個負數，那么這個偏移量將會從數據的末尾從后到前開始計算。
end： 可選，代表的是 Blob 的一個下標，這個下標-1的對應的字節將會是被拷貝進新的Blob 的最后一個字節。如果你傳入了一個負數，那么這個偏移量將會從數據的末尾從后到前開始計算。
contentType： 可選，給新的 Blob 賦予一個新的文檔類型。這將會把它的 type 屬性設為被傳入的值。它的默認值是一個空的字符串。
舉個例子：
var data = "abcdef"; var blob1 = new Blob([data]); var blob2 = blob1.slice(0,3); console.log(blob1); //輸出：Blob {size: 6, type: ""} console.log(blob2); //輸出：Blob {size: 3, type: ""}
通過slice方法，從blob1中創建出一個新的blob對象，size等於3。
Blob對象能夠添加到表單中，作為上傳數據使用：
const content = '<a id="a"><b id="b">hey!</b></a>'; const blob = new Blob([content], {type: 'text/xml'}); formData.append('webmasterfile', blob);
Blob使用場景
分片上傳
前面已經說過，File繼承字Blob，因此我們可以調用slice方法對大文件進行分片上傳。代碼：
function uploadFile(file) { var chunkSize = 1024 * 1024; //每片1M大小 var totalSize = file.size; var chunkQuantity = Math.ceil(totalSize/chunkSize); //分片總數 var offset = 0; //偏移量 var reader = new FileReader(); reader.onload = function(e) { var xhr = new XMLHttpRequest(); xhr.open("POST", url); xhr.overrideMineType("application/octet-stream"); xhr.onreadstatechange = function() { if(xhr.readyState === 4 && xhr.status ===200) { ++offset; if(offset === chunkQuantity) { alerrt("上傳完成"); } else if(offset === chunckQuantity-1) { blob = file.slice(offset*chunkSize, totalSize); reader.readAsBinaryString(blob); } else { blob = file.slice(offset*chunkSize, (offset+1)*chunckSize); reader.readAsBinaryString(blob); } }else { alert("上傳出錯")； } } if(xhr.sendAsBinary) { xhr.sendAsBinary(e.target.result); } else { xhr.send(e.target.result); } } var blob = file.slice(0, chunkSize); reader.readAsBinaryString(blob); }
這段代碼還可以進一步豐富，比如顯示當前上傳進度，使用多個XMLHttpRequest對象並行上傳對象（需要傳遞分片數據得位置參數給服務器端）等。
Blob URL
Blob URL是blob協議得URL，它的格式如下：
blob:http://xxx
Blob URL可以通過URL.createObjectURL(blob)創建。在絕大部分場景下，我們可以像使用Http協議得URL一樣使用Blob URL。常見得場景有： 作為文件得下載地址和作為圖片資源地址。
- 文件下載地址
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Blob Test</title. <script> function createDownloadFile() { var content = "Blob Data"; var blob = new Blob([content]); var link = document.getElementByTageName('a')[0]; link.download = "file"; link.href = URL.createObjectURL(blob); } window.onload = createDownloadFile; </script> </head> <body> <a>下載</a> </body> </html>
點擊下載按鈕，瀏覽器將會下載一個名為file得文件，文件得內容是：Blob Data。通過Blob對象，我們在前端代碼中就可以動態生成文件，提供 給瀏覽器下載。打開Chrome瀏覽器調試窗口，在Elements標簽下可以看到生成得Blob URL：
[圖片上傳失敗...(image-130a5a-1551669191720)]
- 圖片資源地址
為圖片文件創建一個Blob URL，賦值給標簽：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Blob Test</title> <script> function handleFile(e) { var file = e.files[0]; var blob = URL.createObjectURL(file); var img = document.getElementByTagName("img")[0]; img.src = blob; img.onload = function(e) { URL.revokeObjectURL(this.src); //釋放createObjectURL創建得對象 } } </script> </head> <body> <input type="flie" accept="image/*" onchange="handleFile(this)" /> <br/> <img style="width:200px;height:200px;"> </body> </html>
imput中選擇得圖片會在這里顯示出來：
[圖片上傳失敗...(image-c20d1f-1551669191720)]
同時，可以在Network標簽欄，發現這個Blob URL得請求信息：
[圖片上傳失敗...(image-fa2288-1551669191720)]
這個請求信息和我們平常使用Http URL獲取得圖片幾乎完全一樣。
window.URL.revokeObjectURL()
在每次調用createObjectURL()方法時，都會創建一個新的URL對象，即使你已經用相同的對象作為參數創建過。當不再需要這些URL對象時，每個對象必須通過調用URL.revokeObjectURL()方法來釋放。瀏覽器會在文檔退出時自動釋放它們，但是為了獲得最佳性能和內存使用狀況，你應該在安全的時機主動釋放掉它們。
window.URL.revokeObjectURL(objectURL);
- 我們還可以使用Data URL加載圖片資源：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Blob Test</title> <script> function handleFile(e) { var file = e.files[0]; var fileReader = new FileReader(); var img = document.getElementByTagName("img")[0]; fileReader.onload = function(e) { img.src = e.target.result; } fileReader.readAsDataURL(file); } </script> </head> <body> <input type="file" accept="image/*" onchange="handleFile(this)" /> </br> <img style="width:200px;height:200px;"> </body> </html>
Data URL對大家來說並不陌生，Web性能優化有一項措施：把小圖片用base64編碼直接嵌入到HTML文件中，實際就是利用了Data URL來獲取圖片數據。
那么Blob URL和Data URL有什么區別呢？
- Blob URL得長度一般比較短，但Data URL因為直接存儲圖片base64編碼后得數據，往往很長。當顯示大圖片時，使用Blob URL更優。
- Blob URL可以方便的使用XMLHttpRequest獲取源數據，例如：
var blobUrl = URL.createObkectURL(new Blob(['Test'], {type: 'text/plain'})); var xhr = new XMLHttpRequest(); //如果是指xhr.responseType = 'blob',將返回一個Blob對象，而不是文本； //xhr.responseType = 'blob'; xhr.onload = function() { alert(xhr.responseText); } xhr.open('get', blobUrl); xhr.send();
對於Data URL， 並不是所有瀏覽器都支持通過XMLHttpRequest獲取源數據的。
- Blob URL只能在當前應用內部使用，把Blob URL復制到瀏覽器的地址欄中，是無法獲取數據的。Data URL相比之下，就有很好的移植性，你可以在任意瀏覽器使用。
//創建HTML文件的Blob URL var data = "<div style='color:red;'This is a blob</div>"; var blob = new Blob([data], {type: 'text/html'}); // 'application/json' var blobUrl = URL.createObjectURL(blob);