• 售前

  • 售后

热门帖子
入门百科

深入剖析HTML5中的Blob对象的使用

[复制链接]
123457176 显示全部楼层 发表于 2021-10-26 12:44:38 |阅读模式 打印 上一主题 下一主题
HTML5中的Blob对象和MYSQL中的BLOB类型在概念上是有点区别的。MYSQL中的BLOB类型就只是个二进制数据容器。而HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MINE类型,这相称于对文件的储存,别的许多二进制对象也是从这个对象继承的。
  在稍低版本的当代欣赏器中,这个Blob对象还没规范化,因此必要BlobBuilder之类的方式来创建。但是现在Blob已经规范到可以直接new它的构造器Blob来创建了,而且欣赏器几乎都已经支持了这个方式,所以对于旧尺度咱就没须要纠结了。

CSS Code复制内容到剪贴板
       
  • var data='<b style="font-size:32px;color:red;">次碳酸钴</b>';      
  • var blob=new Blob([data],{"type":"text/html"});      
  • console.log(blob);  

这样我们就创建了一个Blob对象,注意Blob这个构造器的参数比较诡异,第一个参数是一组数据,所以必须是数组,即使像上面的例子一样只有一个字符串也必须用数组装起来。第二个参数是对这一Blob对象的设置属性,现在也只有一个type也就是相干的MIME必要设置,使用key-value的方式大概是为了以后的扩展。
  那么,把数据做成Blob有什么用呢?对于Blob对象,我们可以创建出一个URL来访问它。使用URL对象的createObjectURL方法。

CSS Code复制内容到剪贴板
       
  • var data='<b style="font-size:32px;color:red;">次碳酸钴</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对象中指定范围内的数据.

CSS Code复制内容到剪贴板
       
  • 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复制内容到剪贴板
       
  • var aFileParts = ["<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>"];      
  • var oMyBlob = new Blob(aFileParts, { "type" : "text\/xml" }); // the blob  

等价于:

CSS Code复制内容到剪贴板
       
  • var oBuilder = new BlobBuilder();      
  • var aFileParts = ["<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>"];      
  • oBuilder.append(aFileParts[0]);      
  • var oMyBlob = oBuilder.getBlob("text\/xml"); // the blob  

BlobBuilder接口提供了别的一种创建Blob对象的方式,但该方式现在已经废弃,所以不应该再使用了.
例子:使用类型数组和Blob对象创建一个对象URL
CSS Code复制内容到剪贴板
       
  • var typedArray = GetTheTypedArraySomehow();      
  • 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上.  

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作