前端中的二進制以及相關操做與轉換

前端中的二進制以及相關操做與轉換

最近工做中遇到了不少有關二進制的處理，如PDF的生成，多個PDF的打包，音頻的拼接。爲了數據的一致性，以及減小與後端通訊的複雜度，工做量都在瀏覽器端。

瀏覽器，或者前端更多處理的是 View 層，即 UI = f(state)，狀態至界面的轉化。可是也有不少關於二進制的處理，如

• 下載 Excel
• 文檔生成 PDF
• 對多個文件打包下載
• 圖片的亂碼問題

本篇文章總結了瀏覽器端的二進制以及有關數據之間的轉化，如 ArrayBuffer，TypedArray，Blob，DataURL，ObjectURL，Text 之間的互相轉換。爲了更好的理解與方便之後的查詢，特地作了一張圖作總結。

原文連接見 http://shanyue.tech/post/binary-in-frontend/

二進制相關數據類型

在此以前，首先簡單介紹下幾種相關的數據類型，更多文檔請參考 MDN

ArrayBuffer && TypedArray

TypedArray 是 ES6+ 新增的描述二進制數據的類數組數據結構。但它自己不能夠被實例化，甚至沒法訪問，你能夠把它理解爲 Abstract Class 或者 Interface。而基於 TypedArray，有以下數據類型。

• Uint8Array
  Uint 表明數組的每一項是無符號整型
  8 表明數據的每一項佔 8 個比特位，即一個字節
• Int8Array
• Uint8Array
• Int16Array
• ...

const array = new Int8Array([1, 2, 3])

// .length 表明數據大小
// 3
array.length

// .btyeLength 表明數據所佔字節大小
array.byteLength

ArrayBuffer 表明二進制數據結構，只讀。須要轉化爲 TypedArray 進行操做。

const array = new Int16Array([1, 2, 3])

// TypedArray -> ArrayBuffer
array.buffer

// ArrayBuffer -> TypedArray
new Int16Array(array.buffer)

// buffer.length 表明數據所佔用字節大小
array.buffer.length === array.byteLength

鏈接多個 TypedArray

TypedArray 沒有像數組那樣的 Array.prototype.concat 方法用來鏈接多個 TypedArray。不過它提供了 TypedArray.prototype.set 能夠用來間接鏈接字符串

能夠參考 MDN 文檔： https://developer.mozilla.org...

// 在位移 offset 位置放置 typedarray
typedarray.set(typedarray, offset)

原理就是先分配一塊空間足以容納須要鏈接的 TypedArray，而後逐一在對應位置疊加

function concatenate(constructor, ...arrays) {
  let length = 0;
  for (let arr of arrays) {
    length += arr.length;
  }
  let result = new constructor(length);
  let offset = 0;
  for (let arr of arrays) {
    result.set(arr, offset);
    offset += arr.length;
  }
  return result;
}

concatenate(Uint8Array, new Uint8Array([1, 2, 3]), new Uint8Array([4, 5, 6]))

同時您還須要對資源的獲取有大體的瞭解，如 XHR，fetch，經過文件上傳。

Blob

Blob 是瀏覽器端的類文件對象。操做 Blob 須要使用數據類型 FileReader。

FileReader 有如下方法，能夠把 Blob 轉化爲其它數據

• FileReader.prototype.readAsArrayBuffer
• FileReader.prototype.readAsText
• FileReader.prototype.readAsDataURL
• FileReader.prototype.readAsBinaryString

const blob = new Blob('hello'.split(''))

// 表示文件的大小
blob.size

const array = new Uint8Array([128, 128, 128])
const blob2 = new Blob([array])

function readBlob (blob, type) {
  return new Promise(resolve => {
    const reader = new FileReader()
    reader.onload = function (e) {
      resolve(e.target.result)  
    }
    reader.readAsArrayBuffer(blob)
  })
}

readBlob(blob, 'DataURL').then(url => console.log(url))

數據輸入

數據輸入或者叫資源的請求能夠分爲如下兩種途徑

• 經過 url 地址請求網絡資源
• 經過文件上傳請求本地資源

fetch

fetch 應該是你們比較熟悉的，但大多使用環境比較單一，通常用來請求 json 數據。其實， 它也能夠設置返回數據格式爲 Blob 或者 ArrayBuffer。

fetch 返回一個包含 Response 對象的 Promise，Response 有如下方法

• Response.prototype.arrayBuffer
• Response.prototype.blob
• Response.prototype.text
• Response.prototype.json

詳情能夠查看MDN文檔 https://developer.mozilla.org...

fetch('/api/ping').then(res => {
  // true
  console.log(res instanceof Response)
  // 最多見的使用
  return res.json()

  // 返回 Blob
  // return res.blob()

  // 返回 ArrayBuffer
  // return res.arrayBuffer()
})

另外，Response API 既能夠可使用 TypedArray，Blob，Text 做爲輸入，又可使用它們做爲輸出。

這意味着關於這三種數據類型的轉換徹底能夠經過 Response

xhr

xhr 能夠設置 responseType 接收合適的數據類型

const request = new XMLHttpRequest()
request.responseType = 'arraybuffer'
request.responseType = 'blob'

File

本地文件能夠經過 input[type=file] 來上傳文件。

<input type="file" id="input">

當上傳成功後，能夠經過 document.getElementById('input').files[0] 獲取到上傳的文件，即一個 File 對象，它是 Blob 的子類，能夠經過 FileReader 或者 Response 獲取文件內容。

數據輸出

或者叫數據展現或者下載，數據經二進制處理後能夠由 url 表示，而後經過 image, video 等元素引用或者直接下載。

Data URL

Data URL 即 Data As URL。因此， 若是資源過大，地址便會很長。 使用如下形式表示。

data:[<mediatype>][;base64],<data>

先來一個 hello, world。把如下地址粘入地址欄，會訪問到 hello, world

data:text/html,<h1>Hello%2C%20World!</h1>

Base64 編碼與解碼

Base64 使用大小寫字母，數字，+ 和 / 64 個字符來編碼數據，因此稱爲 Base64。經編碼後，文本體積會變大 1/3

在瀏覽器中，可使用 atob 和 btoa 編碼解碼數據。

// aGVsbG8=
btoa('hello')

Object URL

可使用瀏覽器新的API URL 對象生成一個地址來表示 Blob 數據。

// 粘貼生成的地址，能夠訪問到 hello, world
// blob:http://host/27254c37-db7a-4f2f-8861-0cf9aec89a64
URL.createObjectURL(new Blob('hello, world'.split('')))

下載

data:application/octet-stream;base64,5bGx5pyI

資源的下載能夠利用 FileSaver 。

這裏也簡單寫一個函數，用來下載一個連接

function download (url, name) {
  const a = document.createElement('a')
  a.download = name
  a.rel = 'noopener'
  a.href = url
  // 觸發模擬點擊
  a.dispatchEvent(new MouseEvent('click'))
  // 或者 a.click(
}

二進制數據轉換

以上是二進制數據間的轉換圖，有一些轉換能夠直接經過 API，有些則須要代碼，如下貼幾種常見轉換的代碼

String to TypedArray

根據上圖，由字符串到 TypedArray 的轉換，能夠經過 String -> Blob -> ArrayBuffer -> TypedArray 的途徑。

關於代碼中的函數 readBlob 能夠回翻環節 數據類型 - Blob

const name = '山月'
const blob = new Blob(name.split(''))

readBlob(blob, 'ArrayBuffer').then(buffer => new Uint8Array(buffer))

也能夠經過 Response API 直接轉換 String -> ArrayBuffer -> TypedArray

const name = '山月'

new Response(name).arrayBuffer(buffer => new Uint8Array(buffer))

這上邊兩種方法都是直接經過 API 來轉化，若是你更像瞭解如何手動轉換一個字符串和二進制的 TypedArray

String to TypedArray 2

使用 enodeURIComponent 把字符串轉化爲 utf8，再進行構造 TypedArray。

function stringToTypedArray(s) {
  const str = encodeURIComponent(s)
  const binstr = str.replace(/%([0-9A-F]{2})/g, (_, p1) => {
    return String.fromCharCode('0x' + p1)
  })
  return new Uint8Array(binstr.split('').map(x => x.charCodeAt(0)))
}

實踐

1. 如何上傳本地圖片並在網頁上展現

由以上整理的轉換圖得出途徑

本地上傳圖片 -> Blob -> Object URL

2. 如何拼接兩個音頻文件

由以上整理的轉換圖得出途徑

fetch請求音頻資源 -> ArrayBuffer -> TypedArray -> 拼接成一個 TypedArray -> ArrayBuffer -> Blob -> Object URL

3. 如何把 json 數據轉化爲 demo.json 並下載文件

json 視爲字符串，由以上整理的轉換圖得出途徑

Text -> DataURL

除了使用 DataURL，還能夠轉化爲 Object URL 進行下載。關於下載的函數 download，能夠參考以上環節 數據輸出-下載

Text -> Blob -> Object URL

能夠把如下代碼直接粘貼到控制檯下載文件

const json = {
  a: 3,
  b: 4,
  c: 5
}
const str = JSON.stringify(json, null, 2)

const dataUrl = `data:,${str}`
const url = URL.createObjectURL(new Blob(str.split('')))

download(dataUrl, 'demo.json')
download(url, 'demo1.json')