深入解析HTML5中的Blob物件的使用_html5教學技巧

HTML5中的Blob物件和MYSQL中的BLOB類型在概念上是有點區別的。 MYSQL中的BLOB型別就只是個二進位資料容器。而HTML5中的Blob物件除了存放二進位資料外還可以設定這個資料的MINE類型，這相當於對檔案的儲存，其它很多二進位物件也是從這個物件繼承的。
　　在稍低版本的現代瀏覽器中，這個Blob物件還沒規範化，因此需要BlobBuilder之類的方式來創建。但是現在Blob已經規範到可以直接new它的構造器Blob來創建了，而且瀏覽器幾乎都已經支援了這個方式，所以對於舊標準咱就沒必要糾結了。

CSS Code複製內容到剪貼簿

1. var data='次碳酸鈷' ;   
2. var blob=new Blob([data],{"type":"text/html"
"text/html"
3. });   

console.log(blob);  

這樣我們就創建了一個Blob對象，注意Blob這個構造器的參數比較詭異，第一個參數是一組數據，所以必須是數組，即使像上面的例子一樣只有一個字符串也必須用數組裝起來。第二個參數是對這一Blob物件的配置屬性，目前也只有一個type也就是相關的MIME需要設置，使用key-value的方式也許是為了今後的擴展。 　　那麼，把資料做成Blob有什麼用呢？對於Blob對象，我們可以建立出一個URL來存取它。使用URL物件的createObjectURL方法。

CSS Code

1. 複製內容到剪貼簿 var data=
'次碳酸鈷'
2. ;    var blob=new Blob([data],{"type":
3. "text/html"
4. "text/html" });   
onload=function(){   
5.   var iframe=document.createElement("iframe"
);   
  iframe.
7. src
=URL.createObjectURL(blob);   

  document.body.appendChild(iframe);   

};  

　不僅是上面範例中的text/html，任何瀏覽器支援的類型都可以這麼用。而這個Blob-URL的生存週期是從創建到文件釋放，不會造成資源的浪費。

　　Blob是一個HTML5中很基本的二進位資料對象，很多方法的操作參數都支援使用Blob，這個我一下也列舉不出。總之，幾乎所有參數類型都是二進位資料的方法都支援使用Blob作為參數就對了。所以把資料做成Blob可以讓之後的一些列操作變得更方便。

方法 slice()

傳回一個新的Blob物件,包含了來源Blob物件中指定範圍內的資料.

1. CSS Code
複製內容到剪貼簿
3. Blob slice(   
  optional long long start,   
  optional long long end,   

  optional DOMString contentType    };  

參數
start 可選
開始索引,可以為負數,語法類似於數組的slice方法.預設值為0.
end 可選
結束索引,可以為負數,語法類似於數組的slice方法.預設值為最後一個索引.
contentType 可選
新的Blob物件的MIME類型,這個值將會成為新的Blob物件的type屬性的值,預設為一個空字串.
傳回值
一個新的Blob物件,包含了來源Blob物件中指定範圍內的資料.
注意
如果start參數的值比來源Blob物件的size屬性的值還大,則傳回的Blob物件的size值為0,也就是不包含任何資料.

BlobPropertyBag

一個包含有兩個屬性type和endings的物件.
type
設定該Blob物件的type屬性.
endings(已廢棄)
對應於BlobBuilder.append()方法的endings參數.此參數的值可以是"transparent"或"native".
Blob建構子用法舉例

下面的程式碼:

CSS Code複製內容到剪貼簿

1. var aFileParts = ["hey!" ];   
2. var oMyBlob = new Blob(aFileParts, { "type" : 

 

等價於:

CSS Code

複製內容到剪貼簿

var oBuilder = new BlobBuilder();   
1. var aFileParts = [
2. "hey!" ];    oBuilder.append(aFileParts[0]);   
3. var oMyBlob = oBuilder.getBlob(
4. "text/xml"); // the blob  

 

BlobBuilder介面提供了另外一種創建Blob物件的方式,但該方式現在已經廢棄,所以不應該再使用了.

範例:使用類型陣列和Blob物件建立一個物件URL

CSS Code

複製內容到剪貼簿

1. var typedArray = GetTheTypedArraySomehow();   
var blob = new Blob([typedArray], {type: 
2. "application/octet-binary"}); // 傳入一個合適的類型/  var 
url
3.  = URL.createObjectURL(blob);    // 會產生一個類似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf這樣的URL字串   
4. // 你可以像使用一個普通URL一樣使用它,比如用在img.
src
5. 上.