【轉】JS中的Blob物件

阿新 • • 發佈：2020-08-17

前段時間研究二進位制流圖片展示遇到了Blob物件,在這裡做一下筆記。

在一般的Web開發中，很少會用到Blob，但Blob可以滿足一些場景下的特殊需求。Blob，Binary Large Object的縮寫，代表二進位制型別的大物件。Blob的概念在一些資料庫中有使用到，例如，MYSQL中的BLOB型別就表示二進位制資料的容器。在Web中，Blob型別的物件表示不可變的類似檔案物件的原始資料，通俗點說，就是Blob物件是二進位制資料，但它是類似檔案物件的二進位制資料，因此可以像操作File物件一樣操作Blob物件，實際上，File繼承自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: ""}

size代表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相比之下，就有很好的移植性，你可以在任意瀏覽器使用。

除了可以用作圖片資源的網路地址，Blob URL也可以用作其他資源的網路地址，例如html檔案、json檔案等，為了保證瀏覽器能正確的解析Blob URL返回的檔案型別，需要在建立Blob物件時指定相應的type：

//建立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);

from：https://www.jianshu.com/p/b322c2d5d778

【轉】JS中的Blob物件

Blob基本用法

建立

slice方法

Blob物件能夠新增到表單中，作為上傳資料使用：

Blob使用場景

分片上傳

Blob URL

window.URL.revokeObjectURL()

【轉】JS中的Blob物件

【轉】JS獲取視訊第一幀生成圖片

【轉】Scala中json格式、字串、map相互轉換

【轉】linux中man使用技巧

【轉】MYSQL中的COLLATE是什麼？

【轉】 Vue中import from的來源：省略字尾與載入資料夾

【轉】SQL 中 Drop、Delete 與 Truncate 的區別

【轉】JS獲取子節點、父節點和兄弟節點的方法例項總結

【轉】rust中impl關鍵字的用法(二)---What is the Impl keyword in Rust?

【轉】Linux中檔案/資料夾許可權解釋

【轉】工作中，什麼情況下應該負責到底？

【隨筆】js中==和===區別

【轉】Nginx中sendfile的作用

【轉】Linux中vgextend的含義,linux的LVM 具體配置過程

【轉】AIX中查詢埠號和反查程序

【轉】CSS中px、em、rem、%、vw、vh單位

【轉】c#判斷字串是否存在字母及字串中字元的替換例項

php中cURL會話的curl_setopt的CURLOPT_HEADER和CURLOPT_RETURNTRANSFER引數的使用【轉】

JS陣列reduce()方法詳解及高階技巧【轉】

【vue原始碼】js中的with語句

【轉】JS中的Blob物件

Blob基本用法

建立

slice方法

Blob物件能夠新增到表單中，作為上傳資料使用：

Blob使用場景

分片上傳

Blob URL

window.URL.revokeObjectURL()

相關推薦