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 相关文章推荐
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
javascript 写类方式之五
Jul 05 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
AngularJS  $modal弹出框实例代码
Aug 24 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
vue项目首屏打开速度慢的解决方法
Mar 31 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 12 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高级对象构建 工厂模式的使用
2012/02/05 PHP
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
python抽象基类用法实例分析
2015/06/04 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
我的梦中国梦演讲稿
2014/04/23 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
Golang 实现WebSockets
2022/04/24 Golang
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android