前端也要学的“二进制”知识

Blob

Blob 全称是 Binary Large Object，二进制大型对象。

• 可以用来存储二进制数据。
• 不能修改。
• 不能直接读取，只能通过 FileReader 读取。

构造函数

通过 Blob 构造函数创建。

interface BlobPropertyBag {
  type?: string;
  endings?: "transparent" | "native";
}

type BlobPart = ArrayBufferView | ArrayBuffer | Blob | string;

interface BlobConstructor {
  new (blobParts?: BlobPart[], options?: BlobPropertyBag): Blob;
}

var Blob: BlobConstructor;

const blob = new Blob(["wain"], {
  type: "text/plain",
});

参数

1. blobParts(Array<ArrayBufferView | ArrayBuffer | Blob | string>): 初始源数据。
2. options(BlobPropertyBag) :实例时的配置：
   • type(string): 媒体类型（MIME 类型）。
   • endings(string): 换行符的表示方式。

例子

const textBlob = new Blob(["wain"], {
  type: "text/plain",
  endings: "transparent",
});

const arrayBuffer = new ArrayBuffer(8);
const arrayBufferBlob = new Blob([arrayBuffer], {
  type: "image/png",
  endings: "transparent",
});

创造实例

构造函数

const textBlob = new Blob(["wain"], {
  type: "text/plain",
});

实例分割

const textBlob = new Blob(["hello world"], {
  type: "text/plain",
});
const textBlob1 = textBlob.slice(0, 5);
const textBlob2 = textBlob.slice(6);

小细节

• 不同的 type 的值并不会影响 blobParts 源数据。

File

FIle 继承 Blob，不仅仅拥有 Blob 的全部属性和方法，自身也多了一些属性和方法，可以更加详细的描述文件的信息，例如：文件名称、文件类型、文件大小、文件最后修改时间等。

• 可以用来存储二进制数据。
• 不能修改。
• 不能直接读取，只能通过 FileReader 读取。

构造函数

通过 File 构造函数创建。

interface BlobPropertyBag {
  type?: string;
  endings?: "transparent" | "native";
}

interface FilePropertyBag extends BlobPropertyBag {
  lastModified?: number;
}

type BlobPart = ArrayBufferView | ArrayBuffer | Blob | string;

interface FileConstructor {
  new (
    blobParts: BlobPart[],
    fileName: string,
    options?: BlobPropertyBag
  ): Blob;
}

var File: FileConstructor;

参数

1. blobParts(Array<ArrayBufferView | ArrayBuffer | Blob | string>): 初始源数据。
2. fileName(string): 文件名称。
3. options(BlobPropertyBag) :实例时的配置：
   • type(string): 媒体类型（MIME 类型）。
   • lastModified(number): 最后修改时间，单位为毫秒。
   • endings(string): 换行符的表示方式。

例子

const file = new File(["wain"], "text.txt", {
  type: "text/plain",
  lastModified: Date.now(),
  endings: "transparent",
});

创造实例

构造函数

const textFile = new File(["file"], "text.txt", {
  type: "text/plain",
});

实例分割

const textFile = new File(["file"], "text.txt", {
  type: "text/plain",
});
const textFile1 = textFile.slice(0, 4);
const textFile2 = textFile.slice(5);

输入框选择文件

<input id="fileId" type="file"></input>
<script>
    const fileDom = document.getElementById("fileId");
    fileDom.type = "file";
    fileDom.onchange = (event) => {
        const files = event.target.files;
        console.log(files);
    };
</script>

拖拽选择上传

<div
  id="fileId"
  style="width: 100px;height: 100px;background-color: #ccc;"
></div>
<script>
  const fileDom = document.getElementById("fileId");
  fileDom.addEventListener("dragover", (event) => {
    event.preventDefault();
  });
  fileDom.addEventListener("drop", (event) => {
    event.preventDefault();
    const files = event.dataTransfer.files;
    console.log(files);
  });
</script>

ArrayBuffer

ArrayBuffer 表示在内存中开辟的一段连续的二进制区域，所有字节内容都是 0。

• 内存是一段连续的二进制区域。
• 字节内容都是 0。
• 不能直接读取和修改，需要通过 TypeView 和DataView 进行读取和修改，

构造函数

通过 ArrayBuffer 构造函数创建。

interface ArrayBufferConstructor {
  new (byteLength: number): ArrayBuffer;
}

var ArrayBuffer: ArrayBufferConstructor;

参数

1. byteLength(number): 数组长度，单位为字节。

例子

const arrayBuffer = new ArrayBuffer(8);

创造实例

构造函数

const arrayBuffer = new ArrayBuffer(16);

File、Blob 实例转换为 ArrayBuffer

const textFile = new File(["hello"], "text.txt", {
  type: "text/plain",
});
const render = new FileReader();
render.onload = function () {
  console.log(render.result);
};
render.readAsArrayBuffer(textFile);

Text 转为 ArrayBuffer

const text = "hello";
const textArrayBuffer = new TextEncoder().encode(text);
console.log(textArrayBuffer);

读取器

DataView

DataView 是一种视图，用于读取和修改二进制数据。 包含Int8Array、Int16Array、Int32Array、Float32Array、Float64Array、BigInt64Array、BigUint64Array... 按照不同的字节长度划分不同的视图，每个视图的长度都是固定的。

• 读取和修改二进制数据。
• 内存中一串二进制数据的代理。
• 每个视图的长度都是固定的。

const arrayBuffer = new ArrayBuffer(5);
const int8Array = new Int8Array(arrayBuffer);
int8Array[0] = 104;
int8Array[1] = 101;

TypeView

TypeView 是一种视图，用于读取和修改二进制数据。不固定字节长度，可以使用不同方法读取和修改数据。 可以按照不同的字节序读取和修改数据，这也是和 DataView 读取器的主要区别。

• 读取和修改二进制数据。
• 内存中一串二进制数据的代理。
• 通过不同方法读取和修改二进制数据。 可以按照不同的字节序读取和修改数据。

const arrayBuffer = new ArrayBuffer(5);
const dataView = new DataView(arrayBuffer);
dataView.setInt8(0, 104);
dataView.setInt16(1, 101);

dataView.getInt8(0);

Base64

Base64 是一种编码方式，将二进制数据转换为字符串。

• 值为字符串。
• 二进制的的一种表现方式。
• 一种编码方式，字符集包含A-Z、a-z、0-9、+、/。

创造实例

读取File、Blob

let blob = new Blob(["Hello, world!"], { type: "text/plain" });
let render = new FileReader();
render.onload = function (e) {
  console.log(e.target.result);
};
render.readAsDataURL(blob);

Canvas 创建 Base64

<canvas id="canvasId" width="200" height="200"></canvas>
<script>
  const canvasDom = document.getElementById("canvasId");
  const context = canvasDom.getContext("2d");
  context.fillStyle = "red";
  context.fillRect(0, 0, 200, 200);

  console.log(canvasDom.toDataURL());
</script>

ObjectURL

ObjectURL 属于 URL 类型，是一种特殊的 URL，可以用来表示一个内存中的对象。

• 属于 URL 字符串。
• 用来表示内存中的二进制对象 （Blob、File）。
• 可以用来表示一个内存中的对象。
• 生存周期与其创建时所在窗口的生存周期绑定在一起。

创造实例

URL.createObjectURL

const blob = new Blob(["hello"], {
  type: "text/plain",
});
URL.createObjectURL(blob);

小细节

• 在 ObjectURL 中创建的URL 不会自动释放内存空间，需要手动释放。

  const blob = new Blob(["hello"], {
    type: "text/plain",
  });
  const objectURL = URL.createObjectURL(blob);
  console.log(objectURL);
  
  // 手动释放
  URL.revokeObjectURL(objectURL);

Text

Text 是一种字符串类型，用于表示文本数据。

创造实例

字面量

const text = "hello";

ArrayBuffer 转 Text

const arrayBuffer = new Int8Array([104, 101, 108, 108, 111]);
const text = new TextDecoder().decode(arrayBuffer);
console.log(text);

后记

• 前端也要学的"编码"知识
• 前端也要学的"二级制"知识
• 前端也要学的"文件转换规则"知识