JavaScript Blob对象原理及用法详解

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);

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

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' }));

输出

总结

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js实现把图片的绝对路径转为base64字符串、blob对象再上传

    主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: 使用canvas.toDataURL()方法将图片的绝对路径转换为base64编码. 具体用法: 在这我们引用淘宝服务器上的一张图片举例: var imgSrc = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.j

  • JavaScript之Blob对象类型的具体使用方法

    JavaScript之Blob对象类型的具体使用方法

    Blob(Binary Large Object)术语最初来自数据库(oracle 中也有类似的栏位类型.),早期数据库因为要存储声音.图片.以及可执行程序等二进制数据对象所以给该类对象取名为Blob. 在Web领域,Blob被定义为包含只读数据的类文件对象.Blob中的数据不一定是js原生数据形式.常见的File接口就继承自Blob,并扩展它用于支持用户系统的本地文件. 构建一个Blob对象通常有三种方式: 通过Blob对象的构造函数来构建. 从已有的Blob对象调用slice接口切出一个新的

  • js如何获取图片url的Blob值并预览示例代码

    前言 Blob 对象表示一个不可变.原始数据的类文件对象.Blob 表示的不一定是JavaScript原生格式的数据.File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件. 本文主要给大家介绍了关于js获取图片url的Blob值并预览的相关内容,下面话不多说了,来一起看看详细的介绍吧 方法如下 1)使用 XMLHttpRequest 对象获取图片url的Blob值 //获取图片的Blob值 function getImageBlob(url, cb) { var

  • js blob类型url的视频下载问题的解决

    blob下载问题的详细描述 我想用src url blob:https://www.youtube.com/23aea5c8-9ae2-40dc-9417-e675ea99b386下载视频,但是不知道应该怎么做. 有没有下载这类视频的通用方法? 推荐的解决方法 我在Vimeo中找到了一个使用blob url下载视频的方法(读了这篇文章,我才知道做法).我正在使用Google Chrome,具体步骤如下: 1.打开More Tools(更多工具)→Developer Tools(开发工具) 2.检

  • js中关于Blob对象的介绍与使用

    blob对象介绍 一个 Blob对象表示一个不可变的, 原始数据的类似文件对象.Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是js中的一个对象,里面可以储存大量的二进制编码格式的数据. 创建blob对象 创建blob对象本质上和创建一个其他对象的方式是一样的,都是使用Blob() 的构造函数来进行创建. 构造函数接受两个参数: 第一个参数为一个数据序列,可以是任意格式的值. 第二个参数是一个包含两个属性的对象{ type: MIME的类型, endings: 决

  • javascript实现blob加密视频源地址的方法

     一.HTML代码: <video id="my-video" class="video-js" playsinline controls preload="auto" controlslist="nodownload" controlslist="nofullscreen" width="100%" height="240" poster="uplo

  • javascript使用Blob对象实现的下载文件操作示例

    本文实例讲述了javascript使用Blob对象实现的下载文件操作.分享给大家供大家参考,具体如下: Blob对象 前言 环境 操作 总结 Blob是一个类文件的不可变的原始数据对象,非javascript原生数据类型,File对象就是继承自Blob对象,且在Blob的基础上进行扩展,以便支持用户系统上的文件. 前言 最近在做以post请求方式导出excel时,想到了可以使用Blob对象将后台返回的输出流以arraybuffer或blob的格式接收交给Blob处理,最后使用URL生成链接,供浏

  • JavaScript Blob对象原理及用法详解

    Blob是JavaScript内建对象,表示不可变的原始数据,类似文件的对象. blob是表示原始数据的不可变对象,这些数据不一定是JavaScript原生格式的,文件接口基于Blob,继承Blob功能并将其扩展为支持用户系统上的文件. Blob有很多用途: 可以从网络的内容创建. 可以保存到磁盘或从磁盘读取. 例如,它们是FileReader API中使用的File的基础数据结构. 我们可以使用 Blob() 构造函数从其他非blob对象和数据构造Blob. Blob构造函数 Blob构造函数

  • JavaScript模板引擎原理与用法详解

    本文实例讲述了JavaScript模板引擎原理与用法.分享给大家供大家参考,具体如下: 一.前言 什么是模板引擎,说的简单点,就是一个字符串中有几个变量待定.比如: var tpl = 'Hei, my name is <%name%>, and I\'m <%age%> years old.'; 通过模板引擎函数把数据塞进去, var data = { "name": "Barret Lee", "age": "

  • JavaScript中window和document用法详解

    JavaScript中window和document用法详解

    一.验证表单 封装一个函数用于验证手机号 /** * @param {String}eleId * @param {Object}reg */ function checkInput(eleId,reg) { var ele = document.getElementById(eleId); ele.onblur = function (ev) { if(!reg.test(this.value)){ //不匹配 this.style.borderColor = "#ff0000" /

  • JavaScript this的原理以及指向详解

    怎么判断this指向? ①在全局环境中调用就指向window. ②作为对象的方法调用就指向该对象. ③作为构造函数调用就指向这个新创建的对象. ④可以使用apply,call,bind改变this指向. ⑤箭头函数中的this与定义时所处的上下文绑定,且不能被改变, 箭头函数this指向取决于它外层找到的离它最近的第一个非箭头函数的this. 怎么理解this原理? JavaScript语言学懂需要理解下面两种写法 var obj = { foo: function () {} }; var f

  • nodejs 全局变量和全局对象知识点及用法详解

    1.全局对象 所有模块都可以调用 1)global:表示Node所在的全局环境,类似于浏览器中的window对象. 2)process:指向Node内置的process模块,允许开发者与当前进程互动. 例如你在DOS或终端窗口直接输入node,就会进入NODE的命令行方式(REPL环境).退出要退出的话,可以输入 process.exit(); 3)console:指向Node内置的console模块,提供命令行环境中的标准输入.标准输出功能. 通常是写console.log(),无须多言 2.

  • JavaScript原始数据类型Symbol的用法详解

    目录 Symbol介绍与创建 设置Symbol属性的注意点 Symbol属性名的遍历 Symbol内置值 Symbol.hasInstance Symbol.isConcatSpreadable Symbol.unscopables Symbol.match Symbol.replace Symbol.search Symbol.split Symbol.iterator Symbol.toPrimitive Symbol.toStringTag Symbol.species Symbol介绍与

  • JavaScript中的splice方法用法详解

    JavaScript中的splice主要用来对js中的数组进行操作,包括删除,添加,替换等. 注意:这种方法会改变原始数组!. 1.删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数) 2.插入-向数组指定位置插入任意项元素.三个参数,第一个参数(插入位置),第二个参数(0),第三个参数(插入的项) 3.替换-向数组指定位置插入任意项元素,同时删除任意数量的项,三个参数.第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项) 示例:

  • Java switch关键字原理及用法详解

    这篇文章主要介绍了Java中 switch关键原理及用法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Switch语法 switch作为Java内置关键字,却在项目中真正使用的比较少.关于switch,还是有那么一些奥秘的. 要什么switch,我有if-else 确实,项目中使用switch比较少的一个主要原因就在于它的作用能被if-else代替,况且switch对类型的限制,也阻碍了switch的进一步使用. 先看看switch的语法

  • python 标准库原理与用法详解之os.path篇

    os中的path 查看源码会看到,在os.py中有这样几行 if 'posix' in _names: name = 'posix' linesep = '\n' from posix import * #省略若干代码 elif 'nt' in _names: from nt import * try: from nt import _exit __all__.append('_exit') except ImportError: pass import ntpath as path #...

  • Java基础之Stream流原理与用法详解

    Java基础之Stream流原理与用法详解

    目录 一.接口设计 二.创建操作 三.中间操作 四.最终操作 五.Collect收集 Stream简化元素计算 一.接口设计 从Java1.8开始提出了Stream流的概念,侧重对于源数据计算能力的封装,并且支持序列与并行两种操作方式:依旧先看核心接口的设计: BaseStream:基础接口,声明了流管理的核心方法: Stream:核心接口,声明了流操作的核心方法,其他接口为指定类型的适配: 基础案例:通过指定元素的值,返回一个序列流,元素的内容是字符串,并转换为Long类型,最终计算求和结果并

随机推荐