JavaScript Blob对象原理及用法详解


Posted in Javascript onOctober 14, 2020

Blob是JavaScript内建对象,表示不可变的原始数据,类似文件的对象。

blob是表示原始数据的不可变对象,这些数据不一定是JavaScript原生格式的,文件接口基于Blob,继承Blob功能并将其扩展为支持用户系统上的文件。

Blob有很多用途:

可以从网络的内容创建。

可以保存到磁盘或从磁盘读取。

例如,它们是FileReader API中使用的File的基础数据结构。

我们可以使用 Blob() 构造函数从其他非blob对象和数据构造Blob。

Blob构造函数

Blob构造函数允许从其他对象创建Blob。例如,从字符串构造Blob。

let hero = {name: 'Batman'}
let blobObject = new Blob([jsON.stringify(hero, null, 2)], { type: 'application/json' });
console.log(blobObject);

现在,如果我们在浏览器中运行此文件,我们将在浏览器控制台中看到以下输出。

JavaScript Blob对象原理及用法详解

Blob size 属性

Blob.size 属性返回Blob或File的大小(以字节为单位)。

var sizeInBytes = blob.size

参见以下示例。

let hero = {name: 'Batman'}
let blobObject = new Blob([JSON.stringify(hero, null, 2)],{ type: 'application/json' });
console.log(blobObject.size);

将会输出:22

Blob.slice() 方法

Blob.slice() 函数用于创建新的Blob对象,该对象包含源Blob的指定字节范围内的数据。

instanceOfBlob.slice([start [, end [, contentType]]]);

参见以下代码。

let hero = {name: 'Batman'}
let blobObject = new Blob([JSON.stringify(hero, null, 2)], { type: 'application/json' });
console.log(blobObject.slice(10, 16, { type: 'application/json' }));

输出

JavaScript Blob对象原理及用法详解

总结

使用二进制远程文件时,Blob非常有用。

Blob可能非常大,即也可能包含音频和视频数据。可以动态创建它们,并使用Blob URL用作文件。我们可以通过多种不同方式使用它们,以使它们更有用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 实现 秒杀,团购 倒计时展示的记录 分享
Jul 12 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
网页挂马方式整理及详细介绍
Nov 03 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
javascript+Canvas实现画板功能
Jun 23 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 #Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 #Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 #Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 #Javascript
原生JS实现相邻月份日历
Oct 13 #Javascript
jquery简易手风琴插件的封装
Oct 13 #jQuery
原生js实现照片墙效果
Oct 13 #Javascript
You might like
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
python实现按任意键继续执行程序
2016/12/30 Python
python2 与python3的print区别小结
2018/01/16 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
应届毕业生如何写求职信
2014/02/16 职场文书
2014年消防工作实施方案
2014/02/20 职场文书
会计岗位职责模板
2014/03/12 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
六一晚会主持词开场白
2015/05/28 职场文书
Redis 哨兵集群的实现
2021/06/18 Redis
一条 SQL 语句执行过程
2022/03/17 MySQL
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle