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