由圖片亂碼所想 - 前端中的二進位制以及相關操作與轉換

shanyue發表於2019-03-12

前端

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

最近工作中遇到了很多有關二進位制的處理，如PDF的生成，多個PDF的打包，音訊的拼接。為了資料的一致性，以及減少與後端通訊的複雜度，工作量都在瀏覽器端。

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

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

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

原文連結見 shanyue.tech/post/binary…

二進位制相關資料型別

在此之前，首先簡單介紹下幾種相關的資料型別，更多文件請參考 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/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/set

// 在位移 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/en-US/docs/Web/API/Response

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. 如何拼接兩個音訊檔案