HTML5中的Blob對象的使用

　　HTML5中的Blob對象和MYSQL中的BLOB類型在概念上是有點區別的。MYSQL中的BLOB類型就只是個二進制數據容器。而HTML5中的Blob對象除了存放二進制數據外還能夠設置這個數據的MINE類型，這至關於對文件的儲存，其它不少二進制對象也是從這個對象繼承的。 　　

　　在稍低版本的現代瀏覽器中，這個Blob對象還沒規範化，所以須要BlobBuilder之類的方式來建立。可是如今Blob已經規範到能夠直接new它的構造器Blob來建立了，並且瀏覽器幾乎都已經支持了這個方式，因此對於舊標準咱就不必糾結了。

var data='<b style="font-size:32px;color:red;">次碳酸鈷</b>'; 
var blob=new Blob([data],{"type":"text/html"}); 
console.log(blob); 
//Blob(53) {size: 53, type: "text/html"}

　　這樣咱們就建立了一個Blob對象，注意Blob這個構造器的參數比較詭異，第一個參數是一組數據，因此必須是數組，即便像上面的例子同樣只有一個字符串也必須用數組裝起來。第二個參數是對這一Blob對象的配置屬性，目前也只有一個type也就是相關的MIME須要設置，使用key-value的方式也許是爲了從此的擴展。
　　那麼，把數據作成Blob有什麼用呢？對於Blob對象，咱們能夠建立出一個URL來訪問它。使用URL對象的createObjectURL方法。

var data='<b style="font-size:32px;color:red;">text</b>'; 
var blob=new Blob([data],{"type":"text/html"}); 
onload=function(){ 
var iframe=document.createElement("iframe"); 
iframe.src=URL.createObjectURL(blob); 
document.body.appendChild(iframe); 
};

　　效果圖：

　　

　　不只是上面例子中的text/html，任何瀏覽器支持的類型均可以這麼用。並且這個Blob-URL的生存週期是從建立到文檔釋放，不會形成資源的浪費。 　

　　Blob是一個HTML5中很基本的二進制數據對象，不少方法的操做參數都支持使用Blob，這個我一下也列舉不出。總之，幾乎全部參數類型是二進制數據的方法都支持使用Blob做爲參數就對了。因此把數據作成Blob可讓以後的一些列操做變得更方便。

方法

　　slice()

　　返回一個新的Blob對象,包含了源Blob對象中指定範圍內的數據.

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,也就是不包含任何數據.