第js如何實(shí)現(xiàn)小程序wx.arrayBufferToBase64方法實(shí)例目錄前言探索失敗的過程卡殼的arrayBuffer轉(zhuǎn)base64關(guān)鍵點(diǎn)btoa的實(shí)現(xiàn)修成正果總結(jié)

前言

在小程序開發(fā)中，需要將接口請(qǐng)求獲得的arrayBuffer數(shù)據(jù)，轉(zhuǎn)換為base64格式數(shù)據(jù)，進(jìn)行圖片的顯示。

微信小程序提供了wx.arrayBufferToBase64方法，但很不幸，這個(gè)方法在基礎(chǔ)庫(kù)版本2.4.0起已廢棄，已不推薦使用。

雖然目前即使小程序基礎(chǔ)庫(kù)版本為2.22.0，也能正常使用。但是不確定未來(lái)哪天，在更新的基礎(chǔ)庫(kù)中，該方法被刪除。這樣就會(huì)帶來(lái)項(xiàng)目上的隱患。

所以需要自己去實(shí)現(xiàn)arrayBuffer轉(zhuǎn)為base64這一過程。

探索失敗的過程

newFileReader()在小程序中無(wú)法進(jìn)行使用。無(wú)法使用newFileReader()實(shí)例中的readAsDataURL方法將數(shù)據(jù)轉(zhuǎn)為base64。如果不熟悉該方法，可以查看FileReader介紹URL.createObjectURL在小程序中無(wú)法使用。無(wú)法使用該方法將數(shù)據(jù)轉(zhuǎn)為在內(nèi)存中的地址，進(jìn)而能被image標(biāo)簽進(jìn)行引用。如果不熟悉該方法，可以查看URL.createObjectURL講解window.btoa在小程序中無(wú)法使用。無(wú)法將文本直接轉(zhuǎn)為base64格式。

好了，條條大路都被阻斷了。那就該自己鋪路搭橋了。

卡殼的arrayBuffer轉(zhuǎn)base64

問題的起始條件有arrayBuffer數(shù)據(jù)，期望結(jié)果是最終形成base64格式數(shù)據(jù)。那開始進(jìn)行求解。

首先我們得來(lái)說(shuō)說(shuō)arrayBuffer這回事。

在JavaScript中，有一個(gè)很常用的引用數(shù)據(jù)類型Array,你可以在里面放字符串、數(shù)字、對(duì)象、布爾值等等等等。它存放在堆中，可以自由增減。

ArrayBuffer對(duì)象用來(lái)表示通用的、固定長(zhǎng)度的原始二進(jìn)制數(shù)據(jù)緩沖區(qū)。它是一個(gè)字節(jié)數(shù)組，通常在其他語(yǔ)言中稱為bytearray。它的誕生就是為了解決一個(gè)問題：操作二進(jìn)制數(shù)據(jù)。

只由0和1組成的二進(jìn)制數(shù)據(jù)往往是非常巨大的，上千個(gè)字節(jié)可以說(shuō)司空見慣，傳統(tǒng)的Array這時(shí)候處理起二進(jìn)制數(shù)據(jù)起來(lái)就顯得非常低效，所以ArrayBuffer出現(xiàn)了，它作為一塊專用的內(nèi)存區(qū)域存放在棧中，取數(shù)據(jù)非常快。

我們現(xiàn)在通過newArrayBuffer(10)初始化一個(gè)buffer實(shí)例，看看會(huì)得到什么。

letbuffer=newArrayBuffer(10);

console.log(buffer);

//在控制臺(tái)上顯示如下

ArrayBuffer(10)

byteLength:10

[[Prototype]]:ArrayBuffer

[[Int8Array]]:Int8Array(10)

[[Uint8Array]]:Uint8Array(10)

[[Int16Array]]:Int16Array(5)

[[ArrayBufferByteLength]]:10

[[ArrayBufferData]]:1367

可以看到在ArrayBuffer中，主要存放了幾個(gè)視圖，Int8Array表示8位有符號(hào)整數(shù)數(shù)組，Int16Array表示16位有符號(hào)整數(shù)數(shù)組，Uint8Array則表示8位無(wú)符號(hào)整數(shù)數(shù)組。

當(dāng)然，如果比如說(shuō)我們想取出Int8Array這個(gè)數(shù)組來(lái)，是不能直接通過buffer.Int8Array來(lái)取的。這是因?yàn)锳rrayBuffer不能直接通過下標(biāo)去讀寫，我們需要把它轉(zhuǎn)成一個(gè)類型化數(shù)組（TypedArray）。

你不能直接操作ArrayBuffer的內(nèi)容，而是要通過類型數(shù)組對(duì)象或DataView對(duì)象來(lái)操作，它們會(huì)將緩沖區(qū)中的數(shù)據(jù)表示為特定的格式，并通過這些格式來(lái)讀寫緩沖區(qū)的內(nèi)容。

constmyTypedArray=newUint8Array(buffer)

轉(zhuǎn)化完之后，我們我們不僅可以通過下標(biāo)去對(duì)類型化數(shù)組進(jìn)行索引，也可以獲取其length，當(dāng)然TypedArray仍與普通的Array存在細(xì)微的區(qū)別，那就是假設(shè)我們用超出邊界的索引語(yǔ)法去獲取數(shù)組元素時(shí)，TypedArray并不會(huì)去原型鏈中進(jìn)行查找。

現(xiàn)在我們已經(jīng)拿到了這個(gè)類型化數(shù)組，是時(shí)候把它轉(zhuǎn)成普通字符串了。看看String.fromCharCode這個(gè)函數(shù)，它接受的參數(shù)為一堆代碼單元序列，輸出一個(gè)普通字符串。而我們剛剛得到的類型化數(shù)組，里面存放的正是代碼單元。

conststr=String.fromCharCode(...myTypedArray)

這里我們用拓展運(yùn)算符...把類型數(shù)組的代碼單元解出來(lái)，一次性轉(zhuǎn)完，得到一個(gè)普通的字符串。

最后，我們需要借助一個(gè)window對(duì)象的方法，也就是btoa方法，它的作用是：把一個(gè)普通字符串編碼成base-64格式的字符串。

上面看似很好，但是在最后一步，btoa，在小程序中是沒有該方法的去使用的。需要自己去實(shí)現(xiàn)btoa這個(gè)方法。

關(guān)鍵點(diǎn)btoa的實(shí)現(xiàn)

因?yàn)樵摵瘮?shù)，在瀏覽器中已經(jīng)實(shí)現(xiàn)，所以更多使用在小程序及node環(huán)境中。所以總體以module.exports進(jìn)行方法的輸出，以require形式進(jìn)行引入。

輸出方法

module.exports={

btoa:...,

atob:...

}

引入文件

const{btoa}=require('./base64')

base64.js

varb64="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",

a256='',

r64=[256],

r256=[256],

i=0;

varUTF8={

*Encodemulti-byteUnicodestringintoutf-8multiplesingle-bytecharacters

*(BMP/basicmultilingualplaneonly)

*CharsinrangeU+0080-U+07FFareencodedin2chars,U+0800-U+FFFFin3chars

*@param{String}strUniUnicodestringtobeencodedasUTF-8

*@returns{String}encodedstring

encode:function(strUni){

//useregularexpressionsString.replacecallbackfunctionforbetterefficiency

//thanproceduralapproaches

varstrUtf=strUni.replace(/[\u0080-\u07ff]/g,//U+0080-U+07FF=2bytes110yyyyy,10zzzzzz

function(c){

varcc=c.charCodeAt(0);

returnString.fromCharCode(0xc0|cc6,0x80|cc0x3f);

.replace(/[\u0800-\uffff]/g,//U+0800-U+FFFF=3bytes1110xxxx,10yyyyyy,10zzzzzz

function(c){

varcc=c.charCodeAt(0);

returnString.fromCharCode(0xe0|cc12,0x80|cc60x3F,0x80|cc0x3f);

returnstrUtf;

*Decodeutf-8encodedstringbackintomulti-byteUnicodecharacters

*@param{String}strUtfUTF-8stringtobedecodedbacktoUnicode

*@returns{String}decodedstring

decode:function(strUtf){

//note:decode3-bytecharsfirstasdecoded2-bytestringscouldappeartobe3-bytechar!

varstrUni=strUtf.replace(/[\u00e0-\u00ef][\u0080-\u00bf][\u0080-\u00bf]/g,//3-bytechars

function(c){//(noteparenthesesforprecence)

varcc=((c.charCodeAt(0)0x0f)12)|((c.charCodeAt(1)0x3f)6)|(c.charCodeAt(2)0x3f);

returnString.fromCharCode(cc);

.replace(/[\u00c0-\u00df][\u0080-\u00bf]/g,//2-bytechars

function(c){//(noteparenthesesforprecence)

varcc=(c.charCodeAt(0)0x1f)6|c.charCodeAt(1)0x3f;

returnString.fromCharCode(cc);

returnstrUni;

while(i256){

varc=String.fromCharCode(i);

a256+=c;

r256[i]=i;

r64[i]=b64.indexOf(c);

++i;

functioncode(s,discard,alpha,beta,w1,w2){

s=String(s);

varbuffer=0,

i=0,

length=s.length,

result='',

bitsInBuffer=0;

while(ilength){

varc=s.charCodeAt(i);

c=c256alpha[c]:-1;

buffer=(bufferw1)+c;

bitsInBuffer+=w1;

while(bitsInBuffer=w2){

bitsInBuffer-=w2;

vartmp=bufferbitsInBuffer;

result+=beta.charAt(tmp);

buffer^=tmpbitsInBuffer;

++i;

if(!discardbitsInBuffer0)result+=beta.charAt(buffer(w2-bitsInBuffer));

returnresult;

varPlugin=function(dir,input,encode){

returninputPlugin[dir](input,encode):dirnull:this;

Plugin.btoa=Plugin.encode=function(plain,utf8encode){

plain=Plugin.raw===false||Plugin.utf8encode||utf8encodeUTF8.encode(plain):plain;

plain=code(plain,false,r256,b64,8,6);

returnplain+'===='.slice((plain.length%4)||4);

Plugin.atob=Plugin.decode=function(coded,utf8decode){

coded=coded.replace(/[^A-Za-z0-9\+\/\=]/g,"");

coded=String(coded).split('=');

vari=coded.length;

do{

--i;

coded[i]=code(coded[i],true,r64,a256,6,8);

}while(i

coded=c