ArrayBuffer 和 Blob 对象

更新日期: 2019-12-16阅读: 2.1k标签: blob

ArrayBuffer 对象与 Blob 对象大家或许不太陌生,常见于文件上传操作处理(如处理图片上传预览等问题)。那么本文将与大家深入介绍两者。


一、ArrayBuffer 对象

ArrayBuffer 对象是 ES6 才纳入正式 ECMAScript 规范,是 JavaScript 操作二进制数据的一个接口。ArrayBuffer 对象是以数组的语法处理二进制数据,也称二进制数组。

介绍 ArrayBuffer 对象还需介绍 TypedArray 视图和 DataView 视图,本文不具体介绍,详细可以查看阮一峰老师《ECMAScript 6 入门 ArrayBuffer》 章节。


1. 概念介绍

ArrayBuffer 对象代表储存二进制数据的一段内存,它不能直接读写,只能通过视图(TypedArray视图和DataView视图)来读写,视图的作用是以指定格式解读二进制数据。

关于 TypedArray 视图和 DataView 视图 ,可以查看阮一峰老师《ECMAScript 6 入门 ArrayBuffer》 章节的介绍。


2. 对象使用

浏览器原生提供 ArrayBuffer() 构造函数,用来生成实例。

参数:

  • 整数,表示二进制数据占用的字节长度。

返回值:

  • 一个指定大小的 ArrayBuffer 对象,其内容被初始化为 0。
const buffer = new ArrayBuffer(32);

上面代码表示实例对象 buffer 占用 32 个字节。


3. 实例属性和方法

ArrayBuffer 对象有实例属性 byteLength ,表示当前实例占用的内存字节长度(单位字节),一单创建就不可变更(只读)

const buffer = new ArrayBuffer(32);
buffer.byteLength; // 32

ArrayBuffer 对象有实例方法 slice(),用来复制一部分内存。

参数如下:

  • start,整数类型,表示开始复制的位置。默认从 0 开始。

  • end,整数类型,表示结束复制的位置(不包括结束的位置)。如果省略,则表示复制到结束。

const buffer = new ArrayBuffer(32);
const buffer2 = buffer.slice(0);


4. 兼容性


图片来自 MDN


二、Blob 对象

1. 概念介绍

Blob 全称:Binary Large Object (二进制大型对象)。

Blob 对象表示一个二进制文件的数据内容,通常用来读写文件,比如一个图片文件的内容就可以通过 Blob 对象读写。

与 ArrayBuffer 区别:

  • Blob 用于操作二进制文件
  • ArrayBuffer 用于操作内存

2. 对象使用

浏览器原生提供 Blob() 构造函数,用来生成实例。

Blob 的内容由参数数组中给出的值的串联组成。

const leoBlob = new Blob(array [, options]);

参数:

  • array,必填,成员是字符串或二进制对象,表示新生成的Blob实例对象的内容;

成员可以是一个由 ArrayBuffer , ArrayBufferView , Blob , domString 等对象构成的 Array ,或者其他类似对象的混合体,它将会被放进 Blob。DOMStrings会被编码为UTF-8。

  • options,可选,是一个配置对象,这里介绍常用的属性 type,表示数据的 MIME 类型,默认空字符串;

options 目前可能有两个属性: type 和 endings。

endings 用于指定包含行结束符 \n 的字符串如何被写入,默认值 transparent。它只有这两个值:native (代表行结束符会被更改为适合宿主操作系统文件系统的换行符)和 transparent (代表会保持blob中保存的结束符不变)。

使用案例:

const leohtmlFragment = ['<a id="a"><b id="b">hey leo!</b></a>']; // 一个包含 DOMString 的数组
const leoBlob = new Blob(leoHtmlFragment, {type : 'text/html'});   // 得到 blob

该代码中,实例对象 leoBlob 包含的是字符串。生成实例时,指定数据类型为 text/html。

还可以使用 Blob 保存 JSON 数据:

const obj = { hello: 'leo' };
const blob = new Blob([ JSON.stringify(obj) ], {type : 'application/json'});


3. 实例属性和方法

Blob 具有两个实例属性:

  • size:文件的大小,单位为字节。

  • type:文件的 MIME 类型。如果类型无法确定,则返回空字符串。

const leoHtmlFragment = ['<a id="a"><b id="b">hey leo!</b></a>']; // 一个包含 DOMString 的数组
const leoBlob = new Blob(leoHtmlFragment, {type : 'text/html'});   // 得到 blob

leoBlob.size; // 38
leoBlob.type; // "text/html"

Blob 实例方法:

  • clice:方法用于创建一个包含源 Blob 的指定字节范围内的数据的新 Blob 对象。
const newBlob = oldBlob.slice([start [, end [, contentType]]])

包含三个参数:

start,可选,起始的字节位置,默认 0;

end,可选,结束的字节位置,默认 size 属性的值,不包含该位置;

contentType,可选,新实例的数据类型(默认为空字符串);


4. 兼容性


图片来自 MDN


5. 实际案例

5.1 获取文件信息

文件选择器 <input type="file"> 用来让用户选取文件。出于安全考虑,浏览器不允许脚本自行设置这个控件的 value 属性,即文件必须是用户手动选取的,不能是脚本指定的。一旦用户选好了文件,脚本就可以读取这个文件。

文件选择器返回一个 FileList 对象,该对象是个类数组对象,每个成员都是一个 File 实例对象。File 实例对象是一个特殊的 Blob 实例,增加了 name 和 lastModifiedDate 属性。

也包括拖放 api 的 dataTransfer.files 返回的也是一个 FileList 对象,成员也是 File 实例对象。

// HTML 代码如下
// <input type="file" accept="image/*" multiple onchange="fileinfo(this.files)"/>

function fileinfo(files) {
  for (let i = 0; i < files.length; i++) {
    let f = files[i];
    console.log(
      f.name, // 文件名,不含路径
      f.size, // 文件大小,Blob 实例属性
      f.type, // 文件类型,Blob 实例属性
      f.lastModifiedDate // 文件的最后修改时间
    );
  }
}

5.2 下载文件

在 AJAX 请求中,指定 responseType 属性为 blob ,皆可以下下载一个 Blob 对象。

function getBlob(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.onload = function () {
    callback(xhr.response);
  }
  xhr.send(null);
}

然后,xhr.response 拿到的就是一个 Blob 对象。

5.3 生成 URL

浏览器允许使用 URL.createObjectURL() 方法,针对 Blob 对象生成一个临时 URL,以便于某些 API 使用。

如作为图片预览的 URL。

这个 URL 以 blob:// 开头,表明对应一个 Blob 对象,协议头后面是一个识别符,用来唯一对应内存里面的 Blob 对象。这一点与 data://URL(URL 包含实际数据)和 file://URL(本地文件系统里面的文件)都不一样。

const droptarget = document.getElementById('droptarget');

droptarget.ondrop = function (e) {
  const files = e.dataTransfer.files;
  for (let i = 0; i < files.length; i++) {
    let type = files[i].type;
    if (type.substring(0,6) !== 'image/')
      continue;
    let img = document.createElement('img');
    img.src = URL.createObjectURL(files[i]);
    img.onload = function () {
      this.width = 100;
      document.body.appendChild(this);
      URL.revokeObjectURL(this.src);
    }
  }
}

代码中,通过为拖放的图片文件生成一个 URL,作为预览的缩略图。

浏览器处理 Blob URL 就跟普通的 URL 一样,如果 Blob 对象不存在,返回404状态码;如果跨域请求,返回403状态码。Blob URL 只对 GET 请求有效,如果请求成功,返回200状态码。由于 Blob URL 就是普通 URL,因此可以下载。

5.4 读取文件

取得 Blob 对象以后,可以通过 FileReader 对象,读取 Blob 对象的内容,即文件内容。

FileReader 对象提供四个方法。将 Blob 对象作为参数传入,然后以指定的格式返回。

  • FileReader.readAsText():返回文本,需要指定文本编码,默认为 UTF-8。
  • FileReader.readAsArrayBuffer():返回 ArrayBuffer 对象。
  • FileReader.readAsDataURL():返回 Data URL。
  • FileReader.readAsBinaryString():返回原始的二进制字符串。

下面是 FileReader.readAsText() 方法的例子,用来读取文本文件:

// HTML 代码如下
// <input type='file' onchange='readfile(this.files[0])'></input>
// <pre id='output'></pre>
function readfile(f) {
  let reader = new FileReader();
  reader.readAsText(f);
  reader.onload = function () {
    let text = reader.result;
    let out = document.getElementById('output');
    out.innerHTML = '';
    out.appendChild(document.createTextNode(text));
  }
  reader.onerror = function(e) {
    console.log('Error', e);
  };
}

下面是 FileReader.readAsArrayBuffer() 方法的例子,用于读取二进制文件:

// HTML 代码如下
// <input type="file" onchange="typefile(this.files[0])"></input>
function typefile(file) {
  // 文件开头的四个字节,生成一个 Blob 对象
  let slice = file.slice(0, 4);
  let reader = new FileReader();
  // 读取这四个字节
  reader.readAsArrayBuffer(slice);
  reader.onload = function (e) {
    let buffer = reader.result;
    // 将这四个字节的内容,视作一个32位整数
    let view = new DataView(buffer);
    let magic = view.getUint32(0, false);
    // 根据文件的前四个字节,判断它的类型
    switch(magic) {
      case 0x89504E47: file.verified_type = 'image/png'; break;
      case 0x47494638: file.verified_type = 'image/gif'; break;
      case 0x25504446: file.verified_type = 'application/pdf'; break;
      case 0x504b0304: file.verified_type = 'application/zip'; break;
    }
    console.log(file.name, file.verified_type);
  };
}

原文:http://www.pingan8787.com/2019/12/16/187-【前端知乎系列】ArrayBuffer和Blob对象/


链接: https://fly63.com/article/detial/6857

html5中二进制对象Blob的使用——Blob与ArrayBuffer、TypeArray和String的相互转换

html5中Blob是什么?js如何创建Blob对象?Blob类型转换:String转换成Blob对象、TypeArray转换成 Blob对象 、ArrayBuffer转Blob、将Blob对象转换成String字符串,使用FileReader的readAsText方法 、将Blob对象转换成ArrayBuffer

原生JS上传图片接收服务器端图片并且显示图片(主要描述blob类型)

图片以独立文件的形式存储在服务器的指定文件夹中,再将路径存入数据库字段中;将图片转换成blob,直接存储到数据库的 Image 类型字段中(这种方式负担很大不建议使用)

前端js实现Blob、DataURL、canvas、image的相互转换

canvas转dataURL:canvas对象、转换格式、图像品质;DataURL转canvas;image转canvas:图片地址;dataURL转image,这个不需要转,直接给了src就能用

js blob流和base64,以及file和base64的相互转换

file文件转换为base64,得到base64格式图片;base64转换为file;base64转换为blob流;blob流转换为base64;测试案例,可直接复制运行

通过Blob实现文件下载

最近遇到一个需求,需要将页面中的配置信息下载下来供用户方便使用,以前这个场景的需求有时候会放到后端处理,然后给返回一个下载链接。其实并不需要这么麻烦,这样既增大了服务器的负载

你不知道的 Blob

Blob(Binary Large Object)表示二进制类型的大对象。在数据库管理系统中,将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!