js中ArrayBuffer操作

首先聲明一下,本人前端菜鳥一枚,這里只是記錄一下我個(gè)人最近使用js操作二進(jìn)制文件的一些方法,以便日后用的時(shí)候查詢,如果有寫的不對(duì)的地方,請(qǐng)大神指出。

數(shù)據(jù)獲取

前端請(qǐng)求二進(jìn)制數(shù)據(jù)的時(shí)候需要設(shè)置數(shù)據(jù)響應(yīng)格式:xhr.responseType = "arraybuffer";
寫法如下:

var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
    buffer = xhr.response;
    console.log(buffer)
};
xhr.send();

responseType可選的參數(shù)有:"text"、"arraybuffer"、"blob"或"document";對(duì)應(yīng)的返回?cái)?shù)據(jù)為DOMString、ArrayBuffer、Blob、Document;默認(rèn)參數(shù)為"text"。

數(shù)據(jù)解析

通過對(duì)應(yīng)數(shù)據(jù)類型的請(qǐng)求,可以得到二進(jìn)制數(shù)據(jù),數(shù)據(jù)被存儲(chǔ)在通過ArrayBuffer這個(gè)構(gòu)造函數(shù)創(chuàng)建一個(gè)緩沖區(qū)內(nèi),取得數(shù)據(jù)后需要使用相對(duì)應(yīng)的TypedArray進(jìn)行解析。
類型化數(shù)組有以下幾種:

名稱 占用字節(jié) 描述
Int8Array 1 8位二補(bǔ)碼有符號(hào)整數(shù)
Uint8Array 1 8位無(wú)符號(hào)整數(shù)
Uint8ClampedArray 1 8位無(wú)符號(hào)整型固定數(shù)組(數(shù)值在0~255之間)
Int16Array 2 16位二補(bǔ)碼有符號(hào)整數(shù)
Uint16Array 2 16位無(wú)符號(hào)整數(shù)
Int32Array 4 32 位二補(bǔ)碼有符號(hào)整數(shù)
Uint32Array 4 32 位無(wú)符號(hào)整數(shù)
Float32Array 4 32 位 IEEE 浮點(diǎn)數(shù)
Float64Array 8 64 位 IEEE 浮點(diǎn)數(shù)

Int 為整型,Uint 為無(wú)符號(hào)數(shù),F(xiàn)loat 為浮點(diǎn)型,一個(gè)字節(jié)占八位,解析數(shù)據(jù)以"字節(jié)"為基礎(chǔ)單位,無(wú)法直接讀取位(不知道是不是這樣,反正我是沒找到方法)。解析數(shù)據(jù)的時(shí)候要了解數(shù)據(jù)的存儲(chǔ)格式。

單一類型數(shù)據(jù)

單一類型數(shù)據(jù)可用對(duì)應(yīng)的類型化數(shù)組直接進(jìn)行解析:

var array = new Uint8Array(buffer);
for(var i = 0; i < array.length; ++i){
  console.log(array[i])
}
混編類型數(shù)據(jù)

混編類型數(shù)據(jù)解析需要用移位的方式解析其中對(duì)應(yīng)類型的數(shù)據(jù):

var array = new Uint8Array(buffer [, byteOffset [, length]])
for(var i = 0; i < array.length; ++i){
  console.log(array[i])
}

初始化數(shù)組的時(shí)候用第二個(gè)和第三個(gè)參數(shù)截取某段數(shù)據(jù),生成相應(yīng)類型的數(shù)據(jù),其中第二個(gè)參數(shù)表示偏移的字節(jié)數(shù),第三個(gè)參數(shù)表示數(shù)組長(zhǎng)度。

DataView

DataView視圖是一個(gè)可以從對(duì)象中讀寫多種數(shù)值類型的底層接口,使用它時(shí),不用考慮不同平臺(tái)的字節(jié)序問題。

var dataView = new DataView(buffer [, byteOffset [, byteLength]]);

DataView中提供了各種類型數(shù)據(jù)的get和set方法,通過這些方法可以更加直觀的操作TypedArray,關(guān)于其中的各方法的詳細(xì)解釋,請(qǐng)參見MDN web doc
DataView的get方法中除了get一個(gè)字節(jié)的數(shù)據(jù)外,均含有第二個(gè)可選參數(shù)littleEndian,指示數(shù)據(jù)是以小端還是大端格式存儲(chǔ)。如果為false或未定義,則偏移位是按照元素偏移的。設(shè)置為true時(shí),則偏移位是按照字節(jié)數(shù)偏移的(個(gè)人見解。可能有誤)。

小結(jié)

本篇文章主要寫的是前端獲取ArrayBuffer數(shù)據(jù)的方法,以及拿到數(shù)據(jù)時(shí)候該如何解析,寫的時(shí)候才發(fā)現(xiàn)自己還是有很多沒搞懂的地方,雖然查了一些資料,但是可能還是錯(cuò)誤的地方,希望發(fā)現(xiàn)的讀者可以指出,不勝感激。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容