[轉] Meida視頻加密二-Blob對象

2. blob

1	<video src="blob:http://www.bilibili.com/d0823f0f-2b2a-4fd6-a93a-e4c82173c107"></video>

• a.什麼是blob？

Blob 對象表示一個不可變、原始數據的類文件對象。Blob 表示的不必定是JavaScript原生格式的數據。 文件(即File)接口基於Blob，繼承了 blob 的功能並將其擴展使其支持用戶系統上的文件。

要從其餘非blob對象和數據構造一個Blob，請使用 Blob() 構造函數。要建立包含另外一個blob數據的子集blob，請使用 slice()方法。要獲取用戶文件系統上的文件對應的Blob對象，

File 對象是特殊類型的 Blob，且能夠用在任意的 Blob 類型的 context 中。好比說， FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能處理 Blob 和 File。

官方：接受Blob對象的API也被列在 File 文檔中(下邊有file相關內容的部分，繼續瀏覽)。

MDN-Blob

Blob屬性：

Blob.size 只讀
    Blob 對象中所包含數據的大小（單位爲字節）。
Blob.type 只讀
    一個字符串，代表該Blob對象所包含數據的MIME類型。若是類型沒法肯定，則返回空字符串。
    語法：`var mimetype = instanceOfFile.type`

• b.如何建立Blob

  BlobBuilder 接口提供了另一種建立Blob對象的方式:使用舊方法建立 Blob 對象。連接地址
  解釋：使用 BlobBuilder 來建立一個Blob 實例，而且使用一個 append() 方法，將字符串（或者 ArrayBuffer 或者 Blob，此處用 string 舉例）插入，一旦數據插入成功，就能夠使用 getBlob() 方法設置一個 mime 。但該方式如今已經廢棄，不該繼續使用：

  1 2 3 4

  var builder = new BlobBuilder(); var fileParts = ['<a id="a"><b id="b">hey!</b></a>']; builder.append(fileParts[0]); var myBlob = builder.getBlob('text/xml');

Blob構造函數

Blob() 構造函數返回一個新的 Blob 對象。 blob的內容由參數數組中給出的值的串聯組成。

Blob() 構造函數 容許用其它對象建立 Blob 對象。好比，用字符串構建一個 blob：

語法： var aBlob = new Blob( array, options );

參數：

• array 是一個由ArrayBuffer, ArrayBufferView(TypedArray類型化數組的構造函數), Blob, DOMString 等對象構成的 Array，或者其餘相似對象的混合體，它將會被放進Blob。DOMStrings會被編碼爲UTF-8。

  • ArrayBuffer 對象用來表示通用的、固定長度的原始二進制數據緩衝區。ArrayBuffer 不能直接操做，而是要經過類型數組對象或 DataView 對象來操做，它們會將緩衝區中的數據表示爲特定的格式，並經過這些格式來讀寫緩衝區的內容。

    • ArrayBuffer 構造函數用來建立一個指定字節長度的 ArrayBuffer 對象。

      • 以現有數據獲取 ArrayBuffer

        1 2 3 4 5 6

        function b64EncodeUnicode(str) { return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) { return String.fromCharCode('0x' + p1); })); } b64EncodeUnicode('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="

      • FileReader 對象容許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩衝區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。
        其中File對象能夠是來自用戶在一個 <input> 元素上選擇文件後返回的FileList對象,也能夠來自拖放操做生成的 DataTransfer對象,還能夠是來自在一個HTMLCanvasElement上執行mozGetAsFile()方法後返回結果。

• options 是一個可選的BlobPropertyBag字典，它可能會指定以下兩個屬性：

  type，默認值爲 ""，它表明了將會被放入到blob中的數組內容的MIME類型。
  endings，默認值爲"transparent"，用於指定包含行結束符\n的字符串如何被寫入。 它是如下兩個值中的一個： "native"，表明行結束符會被更改成適合宿主操做系統文件系統的換行符，或者 "transparent"，表明會保持blob中保存的結束符不變

1 2 3 4 5

var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // 一個包含DOMString的數組 var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // 獲得 blob var debug = {hello: "world"}; var blob = new Blob([JSON.stringify(debug, null, 2)], {type: 'application/json'});

File

一般狀況下， File 對象是來自用戶在一個 <input> 元素上選擇文件後返回的 FileList 對象,也能夠是來自由拖放操做生成的 DataTransfer 對象，或者來自 HTMLCanvasElement 上的 mozGetAsFile() API。

File 對象是特殊類型的 Blob，且能夠用在任意的 Blob 類型的 context 中。好比說， FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能處理 Blob 和 File。

• URL.createObjectURL() 
  使用 Blob 建立一個指向類型化數組的URL

1 2 3 4

var blob = new Blob([typedArray], {type: "application/octet-binary"});// 傳入一個合適的MIME類型 var url = URL.createObjectURL(blob); // 會產生一個相似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 這樣的URL字符串 // 你能夠像使用一個普通URL那樣使用它，好比用在img.src上。（MSE）

從 Blob 中提取數據

從Blob中讀取內容的惟一方法是使用 FileReader。如下代碼將 Blob 的內容做爲類型數組讀取：

1 2 3 4 5 6 7

var reader = new FileReader(); // onabort、onerror、onload、onloadstart、onloadend、onprogress reader.addEventListener("loadend", function() { // reader.result 包含轉化爲類型數組的blob // 文件的內容。該屬性僅在讀取操做完成後纔有效，數據的格式取決於使用哪一個方法來啓動讀取操做。 }); reader.readAsArrayBuffer(blob);

簡單說下 FileReader：
屬性：

• FileReader.error 只讀
  一個DOMException，表示在讀取文件時發生的錯誤 。
• FileReader.readyState 只讀
  表示FileReader狀態的數字。取值以下：

常量名	值	描述
EMPTY	0	尚未加載任何數據
LOADING	1	數據正在被加載
DONE	2	已完成所有的讀取請求

• FileReader.result 只讀
  文件的內容。該屬性僅在讀取操做完成後纔有效，數據的格式取決於使用哪一個方法來啓動讀取操做。
  方法：

  FileReader.abort()

  停止讀取操做。在返回時，readyState屬性爲DONE。

  FileReader.readAsArrayBuffer()

  開始讀取指定的 Blob中的內容, 一旦完成, result 屬性中保存的將是被讀取文件的 ArrayBuffer 數據對象.

  FileReader.readAsBinaryString()

  開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含所讀取文件的原始二進制數據。

  FileReader.readAsDataURL()

  開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含一個data: URL格式的字符串以表示所讀取文件的內容。

  FileReader.readAsText()

  開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含一個字符串以表示所讀取的文件內容。

參考文獻：

http://blog.csdn.net/oscar999/article/details/36373183/