js Blob、ArrayBuffer

原创已于 2025-02-13 14:37:09 修改 · 1.2k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2025-02-13 14:36:39 首次发布

Blob

Blob 全称为 binary large object ，即二进制大对象，它是 JavaScript 中的一个对象，表示原始的类似文件的数据。下面是 MDN 中对 Blob 的解释：

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

实际上，Blob 对象是包含有只读原始数据的类文件对象。简单来说，Blob 对象就是一个不可修改的二进制文件。

BlobURL（ObjectURL）是一种伪协议，只能由浏览器在内部生成

我们知道script/img/video/iframe等标签的src属性和background的url可以通过url和base64来显示，我们同样可以把blob或者file转换为url生成BlobURL来展示图像，BlobURL允许Blob和File对象用作图像，下载二进制数据链接等的URL源

BlobURL并不代表数据本身，数据存储在浏览器中，BlobUrl只是访问它的key。数据会一直有效，直到关闭浏览器或者手动清除。因此即使将BlobUrl传递给服务器等也无法访问数据

DataUrl:允许内容的创建者将较小的文件嵌入到文档中。

由于可以将其用作URL的替代，因此DataURL和BlobUrl一样可以在script/img/video/iframe等标签的src属性和background的url中使用，用法与BlobUrl基本一致

data:[<mediatype>][;base64],data
   data:前缀
   mediatype表明数据类型,是一个MIME类型字符串，如image/jpeg表示一个JPEG图片文件。如果省略，默认值为text/plain;charset=US-ASCII。
   base64:标志位（如果是文本，则可选）
   data:数据本身

ArrayBuffer

（1）ArrayBuffer

ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer 的内容不能直接操作，只能通过 DataView 对象或 TypedArrray 对象来访问。这些对象用于读取和写入缓冲区内容。

ArrayBuffer 本身就是一个黑盒，不能直接读写所存储的数据，需要借助以下视图对象来读写：

TypedArray：用来生成内存的视图，通过9个构造函数，可以生成9种数据格式的视图。
DataViews：用来生成内存的视图，可以自定义格式和字节序。

TypedArray视图和 DataView视图的区别主要是字节序，前者的数组成员都是同一个数据类型，后者的数组成员可以是不同的数据类型。

那 ArrayBuffer 与 Blob 有啥区别呢？根据 ArrayBuffer 和 Blob 的特性，Blob 作为一个整体文件，适合用于传输；当需要对二进制数据进行操作时（比如要修改某一段数据时），就可以使用 ArrayBuffer。

关系及转换

字符串 → Uint8Array

var str = 'ab';
console.log(Uint8Array.from(str.split(''), (e) => e.charCodeAt(0))); // Uint8Array(2) [97, 98]

Uint8Array → 字符串

var u8 = Uint8Array.of(97, 98);
console.log(Array.from(u8, (e) => String.fromCharCode(e)).join('')); // ab

字符串 → DataUrl

var str = 'ab';
console.log('data:application/octet-stream;base64,' + btoa(str)); // data:application/octet-stream;base64,YWI=

DataUrl -> 字符串

var data = 'data:application/octet-stream;base64,YWI=';
console.log(atob(data.split(',')[1])); // ab

Uint8Array -> ArrayBuffer

var u8 = Uint8Array.of(1, 2);
console.log(u8.buffer); // ArrayBuffer(2) {}

ArrayBuffer -> Uint8Array

var buffer = new ArrayBuffer(2);
console.log(new Uint8Array(buffer)); // Uint8Array(2) [0, 0]

ArrayBuffer -> DataView

var buffer = new ArrayBuffer(2);

var dataView = new DataView(buffer, 0); // DataView(2) {}

DataView -> ArrayBuffer

console.log(dataView.buffer); // ArrayBuffer(2) {}

ArrayBuffer → Blob

var buffer = new ArrayBuffer(32);

var blob = new Blob([buffer]); // Blob {size: 32, type: ""}

UintXXArray → Blob

var u8 = Uint8Array.of(97, 32, 72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100, 33);
var blob = new Blob([u8]);

字符串 → Blob

var blob = new Blob(['Hello World!'], {type: 'text/plain'}); // Blob {size: 12, type: "text/plain"}

DataUrl -> blob

var data = 'data:application/octet-stream;base64,YWI=';
    function dataURLtoBlob(dataurl) {
      var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);

      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    }
    console.log(dataURLtoBlob(data)); // Blob {size: 2, type: "application/octet-stream"}

js Blob、ArrayBuffer(Uint8Array、TypedArray、DataView)、Buffer、DataUrl_js bufferarray-CSDN博客谈谈JS二进制：File、Blob、FileReader、ArrayBuffer、Base64 - 知乎

Js：Blob、ArrayBuffer、FileReader、URL、Image、关于文件下载的方法案例-CSDN博客