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用作文件。我们可以通过多种不同方式使用它们,以使它们更有用。

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

时间: 2020-10-12

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对象类型的具体使用方法

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实现把图片的绝对路径转为base64字符串、blob对象再上传

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

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

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

Java使用sftp定时下载文件的示例代码

sftp简介 sftp是Secure File Transfer Protocol的缩写,安全文件传送协议.可以为传输文件提供一种安全的网络的加密方法.sftp 与 ftp 有着几乎一样的语法和功能.SFTP 为 SSH的其中一部分,是一种传输档案至 Blogger 伺服器的安全方式.其实在SSH软件包中,已经包含了一个叫作SFTP(Secure File Transfer Protocol)的安全文件信息传输子系统,SFTP本身没有单独的守护进程,它必须使用sshd守护进程(端口号默认是22)

python读写文件操作示例程序

文件操作示例 复制代码 代码如下: #输入文件f = open(r'D:\Python27\pro\123.bak') #输出文件fw = open(r'D:\Python27\pro\123e.bak','w')#按行读出所有文本lines = f.readlines()num = -1for line in lines:    str = '@SES/%i/' %num    line = line.replace('@SES/1/',str)    num = num + 1    #写入

RxJava2.x+ReTrofit2.x多线程下载文件的示例代码

写在前面: 接到公司需求:要做一个apk升级的功能,原理其实很简单,百度也一大堆例子,可大部分都是用框架,要么就是HttpURLConnection,实在是不想这么干.正好看了两天的RxJava2.x+ReTrofit2.x,据说这俩框架是目前最火的异步请求框架了.固本文使用RxJava2.x+ReTrofit2.x实现多线程下载文件的功能. 如果对RxJava2.x+ReTrofit2.x不太了解的请先去看相关的文档. 大神至此请无视. 思路分析: 思路及其简洁明了,主要分为以下四步 1.获取

php+js实现的无刷新下载文件功能示例

本文实例讲述了php+js实现的无刷新下载文件功能.分享给大家供大家参考,具体如下: 服务器端页面 步骤就是,设置头文件参数,然后读入并输出文件.下面代码的file_get_contents可以使用fread,fclose代替. download.php <?php $filename = $_GET['filename']; $path = __DIR__."/file/".$filename; Header( "Content-type: application/o

PHP使用CURL实现下载文件功能示例

本文实例讲述了PHP使用CURL实现下载文件功能.分享给大家供大家参考,具体如下: 如果使用CURL下载从微信手机端上传的图片?参考下面代码 /** * CURL下载文件 成功返回文件名,失败返回false * @param $url * @param string $savePath * @return bool|string * @author Zou Yiliang */ public function downFile($url, $savePath = './uploads') { /

python 读写excel文件操作示例【附源码下载】

本文实例讲述了python 读写excel文件操作.分享给大家供大家参考,具体如下: 对excel文件的操作,python有第三方的工具包支持,xlutils,在这个工具包中包含了xlrd,xlwt等工具包.利用这些工具,可以方便的对excel 进行操作. 1. 下载 xlutils : http://pypi.python.org/pypi/xlutils 2. 安装,解压下载文件之后,可以 python setup.py install 3. 应用(生成EXCEL,遍历EXCEL,修改EXC

nodejs搭建本地服务器并访问文件操作示例

本文实例讲述了nodejs搭建本地服务器并访问文件操作.分享给大家供大家参考,具体如下: 安装node:https://nodejs.org/en/download/ 在本地建立目录:f:/nodetest,在该目录下新建index.html作为我们将要访问的内容.新建server.js作为node开启的入口: $ cd f:/nodetest $ mkdir index.html $ mkdir server.js index.html文件里简单写一点东西: <!DOCTYPE html>

django框架基于模板 生成 excel(xls) 文件操作示例

本文实例讲述了django框架基于模板 生成 excel(xls) 文件操作.分享给大家供大家参考,具体如下: 生成Excel 文件,很多人会采用一些开源的库来实现,比如python 自带 csv 库可以生成类似Excel  一样的东西,当然还有一些专门处理 excel 的库,我以前也有用过,比如这里: //www.jb51.net/article/163408.htm 我介绍过用第三方的库来实现.但事实上还有另外一种办法,采用模板的方法. 虽然标题写的是利用 django 模板来实现,其实并一

PHP5.6读写excel表格文件操作示例

本文实例讲述了PHP5.6读写excel表格文件操作.分享给大家供大家参考,具体如下: 测试环境:php5.6.24.这块没啥兼容问题. 需要更多栗子,请看PHPExcel的examples.还是蛮强大的. 读取excel文件: 第一步.下载开源的PHPExcel的类库文件,官方网站是http://www.codeplex.com/PHPExcel.里面也有很多示例包. 或者从本站下载:https://www.jb51.net/codes/194070.html 第二步.读取的基本代码示例: <