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 相关文章推荐
Div Select挡住的解决办法
Aug 07 Javascript
jquery.validate使用攻略 第一部
Jul 01 Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
iframe子页面获取父页面元素的方法
Nov 05 Javascript
JavaScript中的迭代器和生成器详解
Oct 29 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
AngularJS 指令详细介绍
Jul 27 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
vue-music关于Player播放器组件详解
Nov 28 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
Jun 01 Javascript
用webpack4开发小程序的实现方法
Jun 04 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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
PHP完整的日历类(CLASS)
2006/11/27 PHP
php获取网页内容方法总结
2008/12/04 PHP
PHP优于Node.js的五大理由分享
2012/09/15 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
PHP基本语法实例总结
2016/09/09 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
python 从远程服务器下载日志文件的程序
2013/02/10 Python
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
SVM基本概念及Python实现代码
2017/12/27 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
物流专业自荐信
2014/05/23 职场文书
经典团队口号大全
2014/06/21 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
素质拓展训练感想
2015/08/07 职场文书
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers