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


Posted in HTML / CSS onSeptember 08, 2015

HTML5中的Blob对象和MYSQL中的BLOB类型在概念上是有点区别的。MYSQL中的BLOB类型就只是个二进制数据容器。而HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MINE类型,这相当于对文件的储存,其它很多二进制对象也是从这个对象继承的。

在稍低版本的现代浏览器中,这个Blob对象还没规范化,因此需要BlobBuilder之类的方式来创建。但是现在Blob已经规范到可以直接new它的构造器Blob来创建了,而且浏览器几乎都已经支持了这个方式,所以对于旧标准咱就没必要纠结了。

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

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

这样我们就创建了一个Blob对象,注意Blob这个构造器的参数比较诡异,第一个参数是一组数据,所以必须是数组,即使像上面的例子一样只有一个字符串也必须用数组装起来。第二个参数是对这一Blob对象的配置属性,目前也只有一个type也就是相关的MIME需要设置,使用key-value的方式也许是为了今后的扩展。

那么,把数据做成Blob有什么用呢?对于Blob对象,我们可以创建出一个URL来访问它。使用URL对象的createObjectURL方法。

CSS Code复制内容到剪贴板
  1. var data='<b style="font-size:32px;color:red;">次碳酸钴</b>';   
  2. var blob=new Blob([data],{"type":"text/html"});   
  3. onload=function(){   
  4.   var iframe=document.createElement("iframe");   
  5.   iframe.src=URL.createObjectURL(blob);   
  6.   document.body.appendChild(iframe);   
  7. };  

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

 不仅是上面例子中的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 = oBuilder.getBlob("text\/xml"); // the blob  

 
BlobBuilder接口提供了另外一种创建Blob对象的方式,但该方式现在已经废弃,所以不应该再使用了.

例子:使用类型数组和Blob对象创建一个对象URL

CSS Code复制内容到剪贴板
  1. var typedArray = GetTheTypedArraySomehow();   
  2. var blob = new Blob([typedArray], {type: "application/octet-binary"}); // 传入一个合适的MIME类型   
  3. var url = URL.createObjectURL(blob);   
  4. // 会产生一个类似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf这样的URL字符串   
  5. // 你可以像使用一个普通URL那样使用它,比如用在img.src上.  
HTML / CSS 相关文章推荐
一款基于css3麻将筛子3D翻转特效的实例教程
Dec 31 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 HTML / CSS
css3 clip实现圆环进度条的示例代码
Feb 07 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
May 28 HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
Jan 30 HTML / CSS
HTML5 video 事件应用示例
Sep 11 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
html5默认气泡修改的代码详解
Mar 13 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 #HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
Aug 31 #HTML / CSS
详解HTML5中的元素与元素
Aug 17 #HTML / CSS
详解HTML5中download属性的应用
Aug 06 #HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 #HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 #HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 #HTML / CSS
You might like
Linux操作系统安装LAMP环境
2015/06/26 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
一个用js实现控制台控件的代码
2007/09/04 Javascript
javascript 有用的脚本函数
2009/05/07 Javascript
js遍历td tr等html元素
2012/12/13 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
Nodejs极简入门教程(三):进程
2014/10/27 NodeJs
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
谈谈JS中的!!
2017/12/07 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
jquery实现上传图片功能
2020/06/29 jQuery
Python subprocess模块详细解读
2018/01/29 Python
python矩阵的转置和逆转实例
2018/12/12 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
python自动识别文本编码格式代码
2019/12/26 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
介绍一下Linux文件的记录形式
2013/09/29 面试题
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
编辑找工作求职信范文
2013/12/16 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
教师辞职信范文
2015/02/28 职场文书
社区节水倡议书
2015/04/29 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS