blob 图片_《你不知道的 Blob》番外篇
学习时间:2020.06.06
学习章节:《你不知道的 Blob》
原文对 Blob 的知识点介绍得非常完整清晰,本文通过四个问题来总结本文核心知识:
- Blob 是什么?
- Blob 怎么用?
- Blob 有哪些使用场景?
- Blob 与 ArrayBuffer 有何区别?
一、Blob 是什么?
Blob(Binary Large Object)表示二进制类型的大对象,通常是影像、声音或多媒体文件。MySql/Oracle数据库中,就有一种Blob类型,专门存放二进制数据。在 JavaScript 中 Blob 对象表示一个不可变、原始数据的类文件对象,它不一定非得是大量数据,也可以表示一个小型文件的内容。另外,JavaScript 中的 File 接口是基于 Blob,继承 Blob 的功能并将其扩展使其支持用户系统上的文件。
二、Blob 怎么用?
Blob 由一个可选字符串 type 和 blobParts 组成,其中, type 通常为 MIME 类型。
MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型,常见有:超文本标记语言文本 .html text/html 、PNG图像 .png image/png 、普通文本 .txt text/plain 等。
1. 构造函数
Blob 构造函数语法为:
const myBlob = new Blob(blobParts[, options])
入参:
- blobParts:它是一个由 ArrayBuffer,ArrayBufferView,Blob,DOMString 等对象构成的数组。DOMStrings 会被编码为 UTF-8。
- options :一个可选的对象,包含以下两个属性: type :默认值为 "" ,表示将会被放入到 blob 中的数组内容的 MIME 类型。endings :默认值为 "transparent",用于指定包含行结束符 的字符串如何被写入。它是以下两个值中的一个:"native",代表行结束符会被更改为适合宿主操作系统文件系统的换行符,或者 "transparent",代表会保持 blob 中保存的结束符不变。
出参:返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
2. 属性和方法
2.1 属性介绍
Blob 对象拥有 2 个属性:
- size :只读,表示 Blob 对象中所包含的数据大小(以字节为单位);
- type :只读,值为字符串,表示该 Blob 对象所包含数据的 MIME 类型。若类型未知,则该属性值为空字符串。
2.2 方法介绍
- slice([start[, end[, contentType]]]) :返回一个新的 Blob 对象,包含了源 Blob 对象中指定范围内的数据。
- stream():返回一个能读取 Blob 内容的 ReadableStream 。
- text():返回一个 Promise 对象且包含 Blob 所有内容的 UTF-8 格式的 USVString 。
- arrayBuffer():返回一个 Promise 对象且包含 Blob 所有内容的二进制格式的 ArrayBuffer 。
注意:** Blob 对象是不可改变的**,但是可以进行分割,并创建出新的 Blob 对象,将它们混合到一个新的 Blob 中。类似于 JavaScript 字符串:我们无法更改字符串中的字符,但可以创建新的更正后的字符串。
3. 简单上手
3.1 示例1:从字符串创建 Blob
let myBlobParts = ['
Hello Leo
']; // 一个包含DOMString的数组let myBlob = new Blob(myBlobParts, {type : 'text/html', endings: "transparent"}); // 得到 blobconsole.log(myBlob.size + " bytes size");// Output: 31 bytes sizeconsole.log(myBlob.type + " is the type");// Output: text/html is the type
3.2 示例2:从类型化数组和字符串创建 Blob
JavaScript类型化数组是一种类似数组的对象,并提供了一种用于 访问原始二进制数据的机制 。并且在类型数组上调用 Array.isArray() 会返回 false 。详细可参考MDN《JavaScript 类型化数组》章节。
let hello = new Uint8Array([72, 101, 108, 108, 111]); // 二进制格式的 "hello"let blob = new Blob([hello, ' ', 'leo'], {type: 'text/plain'});// Output: "Hello leo"
3.3 示例3:组装新的 Blob
由于 Blob 对象是不可改变的,但我们可以进行分割,并组装成一个新的 Blob 对象:
let blob1 = new Blob(['
Hello Leo
'], {type : 'text/html', endings: "transparent"});let blob2 = new Blob(['
Happy Boy!
'], {type : 'text/html', endings: "transparent"});let slice1 = blob1.slice(16);let slice2 = blob2.slice(0, 16);await slice1.text();// currtent slice1 value: "Leo
blob 图片_《你不知道的 Blob》番外篇相关推荐
- 动态正则化权重系数_蘑菇街增量学习番外篇三:deepFM的动态正则实践
欢迎关注公众号: 『诗品算法』,禁止一切未经本人@琦琦许可的转载.转载必须注明出处. 0.引言 这篇文章仍是在蘑菇街 增量学习背景下的实践,增量学习的理论很简单,但实践起来,还是有很多细节和trick ...
- ensp 双机热备 配置_【解忧番外篇】基于eNSP USG6000v的双机热备实验
前言 本实验使用华为模拟器eNSP中USG6000v完成实验. 实验拓扑 配置过程 一.导入设备包 由于USG6000v模拟器需要导入设备包才能使用,所以需要在华为企业专网下载USG6000v的设备包 ...
- 小小智慧树机器人_中国工厂番外篇丨AGV机器人演绎智能“搬运工”
汽车新制造技术从哪里开始?在重庆金康两江智能工厂, 是从AGV机器人开始! AGV机器人 全名叫做Automated Guided Vehicle 翻译成中文名为 "自动的,被指挥的小汽车& ...
- 安卓开发学习日记第四天番外篇_用Kotlin炒冷饭——越炒越小_莫韵乐的欢乐笔记
安卓开发学习日记第四天番外篇--用Kotlin炒冷饭--越炒越小 前情提要 安卓开发学习日记第一天_Android Studio3.6安装 安卓开发学习日记第二天_破坏陷阱卡之sync的坑 安卓开发学 ...
- 机器人鸣人是哪一集_火影忍者596集剧情介绍番外篇九尾抢夺指令_鸣人VS机器人版鸣人...
亲爱的火影迷们,没想到火影忍者本周竟然更新了两集,终于可以一饱眼福了,在火影忍者596集中,不仅是晓,就连大蛇丸都加入了九尾的抢夺中,袭击木叶,看鸣人等木叶的伙伴们如何迎敌,下面本网为您介绍一下火影忍 ...
- 给深度学习入门者的Python快速教程 - 番外篇之Python-OpenCV
转载自:https://zhuanlan.zhihu.com/p/24425116 本篇是前面两篇教程:给深度学习入门者的Python快速教程 - 基础篇 给深度学习入门者的Python快速教程 - ...
- [uboot] (番外篇)uboot之fdt介绍
以下例子都以project X项目tiny210(s5pv210平台,armv7架构)为例 [uboot] uboot流程系列: [project X] tiny210(s5pv210)上电启动流程( ...
- Java番外篇2——jdk8新特性
Java番外篇2--jdk8新特性 1.Lambda 1.1.无参无返回值 public class Test {interface Print{void print();}public static ...
- IO多路复用(番外篇)、poll、epoll三者的区别
Python之路,Day9 , IO多路复用(番外篇) 同步IO和异步IO,阻塞IO和非阻塞IO分别是什么,到底有什么区别?不同的人在不同的上下文下给出的答案是不同的.所以先限定一下本文的上下文. 本 ...
- 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6)
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
最新文章
- 大牛告诉你,只有突破程序员思维,才不会沦为码农!
- Java Web - 服务器中的过滤器和监听器
- Python入门100题 | 第030题
- iOS开发-模板方法模式
- .net framework 4.0环境下遇到版本不同编译不通过的解决办法
- zabbix监控ntpd服务
- psql: FATAL: role “appleyuchi” does not exist与修改默认密码
- 项目管理平台(总结篇一)
- Python Base64模块的使用
- nio的优势_BIO、NIO、AIO 介绍和适用场景分析
- 【华为云技术分享】五个Taurus垃圾回收compactor优化方案,减少系统资源占用
- php pdo insertid,php-在PDO准备好的语句内使用LAST_INSERT_ID插入...
- 社工库mysql_社工库源码大全(转载)
- 基于EEG信号的文献记录01(0719)-特征选择和分类算法在基于脑电信号的睡眠阶段分类中的比较研究
- 2019年5月个人总结:大家都在跨界,原谅自己的懈怠
- WebMvcConfigurerAdapter已被废弃的解决方法
- 计算思维是运用计算机科学的什么进行,什么是计算思维?
- 该怎么说,爱到最后成了路人甲,陌路天涯
- tomcat服务器报503
- RGB和HSV相互转换
热门文章
- Spring Framework 5.2.5 发布,增加对 Java 14 的支持
- 2的1000 次是超出python表示范围的整数。_第4卷讲解Python语言计算机等级考试二级操作题...
- json中{}和[]的区别
- 数据库更新的时候不能正确的执行找错记录
- 困难样本挖掘(Online Hard Sample Mining)
- morphologyEx 形态学
- LFD-A-Light-and-Fast-Detector
- /org/gnome/Terminal/Factory0: Could not connec
- dlib win32
- android操作ui线程