Blob URL / Object URL

Blob 是 Binary large object 的簡稱。

Blob URL（參考W3C，官方名稱）或Object-URL（參考MDN和方法名稱）與Blob或File對象一起使用。

Blob URL只能由瀏覽器在內部生成。URL.createObjectURL()將創建一個特殊的Blob或File對象的引用，以后可以使用它來發布URL.revokeObjectURL()。這些URL只能在瀏覽器的單個實例中和同一個會話中（即頁面/文檔的生命周期）在本地使用。

 

什么是Blob網址？ 為什么使用它？

Blob URL/Object URL 是一種偽協議，允許Blob和File對象用作圖像，下載二進制數據鏈接等URL源。

例如，不能處理Image對象的原始字節數據，因為它不知道如何處理它。它需要例如圖像（二進制數據）通過URL加載。這適用於任何需要URL作為源的東西。不用上傳二進制數據，而是通過URL提供回來，最好使用額外的本地步驟來直接訪問數據而無需通過服務器。

對於編碼為Base64的字符串的Data-URI也是更好的選擇。Data-URI的問題是每個char在JavaScript中占用兩個字節。最重要的是，由於Base64編碼增加了33％。Blob是純粹的二進制字節數組，它不像Data-URI那樣具有任何重要的開銷，這使得它們處理速度越來越快。

 

我可以在服務器上創建自己的Blob網址嗎？

否，Blob網址/對象網址只能在瀏覽器內部制作。可以通過文件讀取器API創建Blob並獲取File對象，盡管BLOB只是意味着Binary Large對象並以字節數組的形式存儲。客戶端可以請求數據以ArrayBuffer或Blob的形式發送。服務器應該將數據作為純二進制數據發送。數據庫通常也使用Blob來描述二進制對象，實際上我們基本上是在談論字節數組。

 

var blob = new Blob([arrayBufferWithPNG], {type: "image/png"}),
    url = URL.createObjectURL(blob), // blob:http://loclahost/dsjh-fjkfks-sdff
    img = new Image();

img.onload = function() {
    URL.revokeObjectURL(this.src);     // clean-up memory
    document.body.appendChild(this);   // add image to DOM
}

img.src = url;                         // can now "stream" the bytes
// 請注意，URL可能會在webkit瀏覽器中添加前綴，因此請使用：

var url = (URL || webkitURL).createObjectURL(...);

 

參考：https://blog.csdn.net/lengye7/article/details/87487277?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task