作者：全棧成長之路?公號 / 山月行

作為一名前端，在工作中也會遇到很多有關(guān)二進制處理的需求，如 EXCEL 表格的導(dǎo)出，PDF 的生成，多個文件的打包，音頻的處理。

從前后端整體上來說前端代表 UI 層，它的外在表現(xiàn)是?human readable?的，而服務(wù)端代表數(shù)據(jù)層，所表現(xiàn)出來的是?machine readable。如果 EXCEL 以及 PDF 的處理交由服務(wù)端處理，服務(wù)端免不了要做一層格式化的邏輯處理，以便與前端保持一致。一來增加了復(fù)雜度，二來容易造成前端與服務(wù)器端的數(shù)據(jù)不一致。此時為了減少復(fù)雜度，工作量有可能都盡可能在瀏覽器端完成。

本篇文章總結(jié)了瀏覽器端的二進制以及有關(guān)數(shù)據(jù)之間的轉(zhuǎn)化，如?ArrayBuffer，TypedArray，Blob，DataURL，ObjectURL，Text?之間的互相轉(zhuǎn)換。為了更好的理解與方便以后的查詢，特意做了一張圖做總結(jié)。

二進制相互轉(zhuǎn)換圖

二進制相關(guān)數(shù)據(jù)類型

在介紹常見的二進制數(shù)據(jù)處理之前，先簡單介紹下幾種二進制相關(guān)的數(shù)據(jù)類型

ArrayBuffer && TypedArray

TypedArray?是 ES6+ 新增的描述二進制數(shù)據(jù)的類數(shù)組數(shù)據(jù)結(jié)構(gòu)。但它本身不可以被實例化，甚至無法訪問，你可以把它理解為?Abstract Class?或者?Interface。而基于?TypedArray，有如下數(shù)據(jù)類型：

Uint8ArrayUint?及?Unsigned Int?代表數(shù)組的每一項是無符號整型8?代表數(shù)據(jù)的每一項占 8 個比特位，即一個字節(jié)

Int8Array

Uint16Array

Int16Array

...

通過?Uint8Array，即可知道?Uint16Array，Int8Array?所代表的意義。

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

//?.length?代表數(shù)組的大小

//?3

array.length

//?.btyeLength?代表數(shù)據(jù)所占字節(jié)大小

//?12

array.byteLength

ArrayBuffer?代表二進制數(shù)據(jù)結(jié)構(gòu)，「并且只讀」，需要轉(zhuǎn)化為?TypedArray?進行寫操作。

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

//?TypedArray?->?ArrayBuffer

array.buffer

//?ArrayBuffer?->?TypedArray

new?Int16Array(array.buffer)

//?buffer.length?代表數(shù)據(jù)所占用字節(jié)大小

array.buffer.length?===?array.byteLength

連接多個 TypedArray

TypedArray?沒有像數(shù)組那樣的?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，然后逐一在對應(yīng)位置疊加

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?需要使用數(shù)據(jù)類型?FileReader。

FileReader?有以下方法，可以把?Blob?轉(zhuǎn)化為其它數(shù)據(jù)

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))

數(shù)據(jù)輸入

數(shù)據(jù)輸入或者叫資源的請求可以分為以下兩種途徑

通過 url 地址請求網(wǎng)絡(luò)資源

通過文件上傳請求本地資源

fetch

fetch?應(yīng)該是大家比較熟悉的，但大多使用環(huán)境比較單一，一般用來請求 json 數(shù)據(jù)。其實，?「它也可以設(shè)置返回數(shù)據(jù)格式為?Blob?或者?ArrayBuffer?！?/p>

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?作為輸入，又可以使用它們作為輸出。

「這意味著關(guān)于這三種數(shù)據(jù)類型的轉(zhuǎn)換完全可以通過 Response」

xhr

「xhr 可以設(shè)置 responseType 接收合適的數(shù)據(jù)類型」

const?request?=?new?XMLHttpRequest()

request.responseType?=?'arraybuffer'

request.responseType?=?'blob'

File

本地文件可以通過?input[type=file]?來上傳文件。

當上傳成功后，可以通過?document.getElementById('input').files[0]?獲取到上傳的文件，即一個 File 對象，它是 Blob 的子類，可以通過?FileReader?或者?Response?獲取文件內(nèi)容。

數(shù)據(jù)輸出

或者叫數(shù)據(jù)展示或者下載，數(shù)據(jù)經(jīng)二進制處理后可以由 url 表示，然后通過 image, video 等元素引用或者直接下載。

Data URL

Data URL 即 Data As URL。所以，?「如果資源過大，地址便會很長。」?使用以下形式表示。

data:[][;base64],

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

data:text/html,

Hello%2C%20World!

Base64 編碼與解碼

Base64 使用大小寫字母，數(shù)字，+ 和 / 64 個字符來編碼數(shù)據(jù)，所以稱為 Base64。經(jīng)編碼后，文本體積會變大 1/3

在瀏覽器中，可以使用?atob?和?btoa?編碼解碼數(shù)據(jù)。

//?aGVsbG8=

btoa('hello')

Object URL

可以使用瀏覽器新的 API?URL?對象生成一個地址來表示?Blob?數(shù)據(jù)。

//?粘貼生成的地址，可以訪問到?hello,?world

//?blob:http://host/27254c37-db7a-4f2f-8861-0cf9aec89a64

URL.createObjectURL(new?Blob('hello,?world'.split('')))

下載

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

資源的下載可以利用 FileSaver[1]?。

這里也簡單寫一個函數(shù)，用來下載一個鏈接

function?download?(url,?name)?{

const?a?=?document.createElement('a')

a.download?=?name

a.rel?=?'noopener'

a.href?=?url

//?觸發(fā)模擬點擊

a.dispatchEvent(new?MouseEvent('click'))

//?或者?a.click(

}

二進制數(shù)據(jù)轉(zhuǎn)換

二進制數(shù)據(jù)轉(zhuǎn)換

以上是二進制數(shù)據(jù)間的轉(zhuǎn)換圖，有一些轉(zhuǎn)換可以直接通過 API，有些則需要代碼，以下貼幾種常見轉(zhuǎn)換的代碼

String to TypedArray

根據(jù)上圖，由字符串到 TypedArray 的轉(zhuǎn)換，可以通過?「String -> Blob -> ArrayBuffer -> TypedArray」?的途徑。

關(guān)于代碼中的函數(shù)?readBlob?可以回翻環(huán)節(jié) 數(shù)據(jù)類型 - Blob[2]

const?name?=?'山月'

const?blob?=?new?Blob(name.split(''))

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

也可以通過 Response API 直接轉(zhuǎn)換?「String -> ArrayBuffer -> TypedArray」

const?name?=?'山月'

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

這上邊兩種方法都是直接通過 API 來轉(zhuǎn)化，如果你更像了解如何手動轉(zhuǎn)換一個字符串和二進制的 TypedArray

String to TypedArray 2

使用 enodeURIComponent 把字符串轉(zhuǎn)化為 utf8，再進行構(gòu)造 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. 如何上傳本地圖片并在網(wǎng)頁上展示

由以上整理的轉(zhuǎn)換圖得出途徑

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

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

由以上整理的轉(zhuǎn)換圖得出途徑

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

3. 如何把 json 數(shù)據(jù)轉(zhuǎn)化為 demo.json 并下載文件

json 視為字符串，由以上整理的轉(zhuǎn)換圖得出途徑

Text -> DataURL

除了使用 DataURL，還可以轉(zhuǎn)化為 Object URL 進行下載。關(guān)于下載的函數(shù)?download，可以參考以上環(huán)節(jié) 數(shù)據(jù)輸出-下載[3]

Text -> Blob -> Object URL

可以把以下代碼直接粘貼到控制臺下載文件

const?json?=?{

a:?3,

b:?4,

c:?5

}

const?str?=?JSON.stringify(json,?null,?2)

//?方案一：Text -> DataURL

const?dataUrl?=?`data:,${str}`

download(dataUrl,?'demo.json')

//?方案二：Text -> Blob -> ObjectURL

const?url?=?URL.createObjectURL(new?Blob(str.split('')))

download(url,?'demo1.json')

總結(jié)

以上是生活随笔為你收集整理的编码 data text html c,谁说前端不需要懂二进制的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。