JS中ArrayBuffer、Uint8Array、Blob與文本字符之間的相互轉換

前端 File 上傳、下載，Canvas 保存圖片，Ajax 和 Fetch 二進制流傳輸，PDF 預覽，瀏覽器上 WebAssembly 的應用 等等都需要用到 ArrayBuffer 和 Blob 。文件就具體介紹一下這些對象的相互轉換。

API介紹

1. FileReader 對象允許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩沖區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。
2. Blob 對象表示一個不可變、原始數據的類文件對象。它的數據可以按文本或二進制的格式進行讀取，也可以轉換成 ReadableStream 來用於數據操作。Blob 表示的不一定是 JavaScript 原生格式的數據。File 接口基於 Blob，繼承了 blob 的功能並將其擴展使其支持用戶系統上的文件。
3. ArrayBuffer 對象代表儲存二進制數據的一段內存，它不能直接讀寫，只能通過視圖（TypedArray 視圖和 DataView 視圖)來讀寫，視圖的作用是以指定格式解讀二進制數據。
4. Uint8Array 對象是 ArrayBuffer 的一個數據類型（8 位不帶符號整數）。
5. TextEncoder 接受代碼點流作為輸入，並提供 UTF-8 字節流作為輸出。
6. TextDecoder 接口表示一個文本解碼器，一個解碼器只支持一種特定文本編碼，例如 utf-8、iso-8859-2、koi8、cp1261，gbk 等等。解碼器將字節流作為輸入，並提供代碼點流作為輸出。

注意： 二進制數組並不是真正的數組，而是類似數組的對象。

字符與ArrayBuffer，Uint8Array相互轉換

1. TextEncoder => ArrayBuffer

let encoder = new TextEncoder();

// 字符 轉 Uint8Array
let uint8Array = encoder.encode("你好啊");

// Uint8Array 轉 ArrayBuffer
let arrayBuffer = uint8Array.buffer

2. Blob => ArrayBuffer

let str = 'hello，你好嗎？'
let blob = new Blob([str],{type:'text/plain;charset=utf-8'});
let utf8decoder = new TextDecoder()
blob.arrayBuffer().then(buffer=>{
  // ArrayBuffer
  console.log(buffer)
  let text = utf8decoder.decode(buffer)
  // String
  console.log(text)
})

3. FileReader => ArrayBuffer

let str = 'hello，你好嗎？'
let blob = new Blob([str],{type:'text/plain;charset=utf-8'});
let utf8decoder = new TextDecoder()
let fr = new FileReader()
fr.readAsArrayBuffer(blob)
fr.onload = function(res) {
  // ArrayBuffer
  let buffer = fr.result
  console.log(buffer)
  let text = utf8decoder.decode(buffer)
  // String
  console.log(text)
}

---

歡迎訪問：天問博客