深⼊解析HTML5中的Blob对象的使⽤
HTML5中的Blob对象和MYSQL中的BLOB类型在概念上是有点区别的。MYSQL中的BLOB类型就只是个⼆进制数据容器。⽽HTML5中的Blob对象除了存放⼆进制数据外还可以设置这个数据的MINE类型，这相当于对⽂件的储存，其它很多⼆进制对象也是从这个对象继承的。
在稍低版本的现代浏览器中，这个Blob对象还没规范化，因此需要BlobBuilder之类的⽅式来创建。但是现在Blob已经规范到可以直接new它的构造器Blob来创建了，⽽且浏览器⼏乎都已经⽀持了这个⽅式，所以对于旧标准咱就没必要纠结了。
CSS Code复制内容到剪贴板
1. var data='<b >次碳酸钴</b>';
2. var blob=new Blob([data],{"type":"text/html"});
3. console.log(blob);
这样我们就创建了⼀个Blob对象，注意Blob这个构造器的参数⽐较诡异，第⼀个参数是⼀组数据，所以必须是数组，即使像上⾯的例⼦⼀样只有⼀个字符串也必须⽤数组装起来。第⼆个参数是对这⼀Blob对象的
配置属性，⽬前也只有⼀个type也就是相关的MIME需要设置，使⽤key-value的⽅式也许是为了今后的扩展。
那么，把数据做成Blob有什么⽤呢？对于Blob对象，我们可以创建出⼀个URL来访问它。使⽤URL对象的createObjectURL⽅法。
CSS Code复制内容到剪贴板
1. var data='<b >次碳酸钴</b>';
2. var blob=new Blob([data],{"type":"text/html"});
3. onload=function(){
4. var ateElement("iframe");
5. iframe.ateObjectURL(blob);
6. document.body.appendChild(iframe);
7. };
不仅是上⾯例⼦中的text/html，任何浏览器⽀持的类型都可以这么⽤。⽽且这个Blob-URL的⽣存周期是从创建到⽂档释放，不会造成资源的浪费。
Blob是⼀个HTML5中很基本的⼆进制数据对象，很多⽅法的操作参数都⽀持使⽤Blob，这个我⼀下也列举不出。总之，⼏乎所有参数类型是⼆进制数据的⽅法都⽀持使⽤Blob作为参数就对了。所以把数据做成Blob可以让之后的⼀些列操作变得更⽅便。
⽅法
slice()
返回⼀个新的Blob对象，包含了源Blob对象中指定范围内的数据.
CSS Code复制内容到剪贴板
1. Blob slice(
2. optional long long start,
3. optional long long end,
4. optional DOMString contentType
5. };
参数
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 = ["<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>"];
2. var oMyBlob = new Blob(aFileParts, { "type" : "text\/xml" }); // the blob
等价于:
CSS Code复制内容到剪贴板
1. var oBuilder = new BlobBuilder();
2. var aFileParts = ["<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>"];
3. oBuilder.append(aFileParts[0]);
4. var oMyBlob = Blob("text\/xml"); // the blob
BlobBuilder接⼝提供了另外⼀种创建Blob对象的⽅式，但该⽅式现在已经废弃，所以不应该再使⽤了.
iframe参数传递例⼦：使⽤类型数组和Blob对象创建⼀个对象URL
CSS Code复制内容到剪贴板
1. var typedArray = GetTheTypedArraySomehow();
2. var blob = new Blob([typedArray], {type: "application/octet-binary"}); // 传⼊⼀个合适的MIME类型
3. var url = ateObjectURL(blob);
4. // 会产⽣⼀个类似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf这样的URL字符串
5. // 你可以像使⽤⼀个普通URL那样使⽤它,⽐如⽤在img.src上.
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论