-前言-

上前幾篇博客做圖集分解的時候Image對象生成的時候，不是使用的直接用二進制數(shù)據(jù)生成的圖像數(shù)據(jù)，而是使用的轉化后的base64數(shù)據(jù)來生成的。本片博客就讓我們來了解下Base64及寫一個編解碼器。

-正文-

base64編碼格式是一種可以由文本編輯器打開查看的編碼格式，與二進制不同，base64之所有稱為64，也是因為我們要映射的二進制數(shù)據(jù)是在一個64長度的字符集中映射出來的。base64最終生成的其實就是一長串字符串。因此Base64是一種用64個字符來表示任意二進制數(shù)據(jù)的方法。

下面是base64的字符集：

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=

字節(jié)、位

位是計算機存儲單元最小單位，一個位表示一個0或者一個1，一字節(jié)有8位。

二進制與Base64的轉換關系

如上圖所示，當數(shù)據(jù)剛好3個字節(jié)的時候使用4個字符去表示這3個字節(jié)，它們的比例為3：4，這就意味著基于base64編碼的文本數(shù)據(jù)要比基于二進制表示的數(shù)據(jù)要多33%，原本3個字節(jié)可以表示的數(shù)據(jù)我們用base64去表示就會需要4個字節(jié)去表示。

因此base64的優(yōu)點就是它的可讀性，易用性。缺點就是比原始二進制數(shù)據(jù)使用了更多空間去表示數(shù)據(jù)。

上面說的比例3：4可以使用4個字節(jié)去生成base64字符串，當原始二進制數(shù)據(jù)不是3的倍數(shù)時也同樣可以表示。

當原始數(shù)據(jù)不是字節(jié)數(shù)不是3的倍數(shù)時

原始數(shù)據(jù)不可能剛剛好3的倍數(shù)，假設現(xiàn)在我們的原始數(shù)據(jù)是2個字節(jié)，也就是16位，換算成base64要囊括這16位數(shù)據(jù)需要3 * 6 =18位數(shù)據(jù)來表示，就多余了2位，多出的數(shù)據(jù)我們就可以使用”=“來表示，也就是上面字符集中的最后一個符號。當多出2位的時候就使用兩個”=“來補足。

二進制數(shù)據(jù)與base64的轉換

我們以字符”A“的轉換舉例來看看是如何轉換的。

首先A的Unicode碼為65，二進制表示為0100 0001，然后將其右移2位，相對于取8位中的6位，與上面所說一致。得到16，二進制表示為0001 0000。之后我們補足了一個字節(jié)的6位還需要2位，后面的兩位需要由下一個字符貢獻4位，當前字符貢獻2位。雖然我們輸入的A只有一個字符，但還是需要這樣算。我們去A的末尾有效為兩位即與3（二進制11）與運算然后左移4位，之后用后面一個字符的右移4位組成一個新的字符，算出兩個值均為16，查表得16，因為A用base64空了4位，需要用兩個==補足，因此A用base64表示得到了QQ==。

代碼實現(xiàn)

/*** 個人工具集合*/ window.Tool = (function(exports){'use strict';/*** base64處理工具*/class Base64{/*** 構造函數(shù)*/constructor(){}/*** 編碼Base64* @param {string} input */static encode64(input){input = escape(input);//轉義字符var output = "";var c1,c2,c3 = "";var e1,e2,e3,e4 = "";var i = 0;do{c1 = input.charCodeAt(i++);//返回指定字符位置的Unicode編碼c2 = input.charCodeAt(i++);c3 = input.charCodeAt(i++);e1 = c1 >> 2;//右移2位 e2 = ((c1 & 3) << 4) | (c2 >> 4);//3二進制：11e3 = c3 & 63;//63二進制：111111if(isNaN(c2)){e3 = e4 = 64;//=}else if(isNaN(c3)){e4 = 64;//=}output = output + Base64.keyChar.charAt(e1) + Base64.keyChar.charAt(e2) + Base64.keyChar.charAt(e3) + Base64.keyChar.charAt(e4);c1 = c2 = c3 = "";e1 = e2 = e3 = e4 = ""; }while(i < input.length);return output;}/*** 解碼Base64* @param {string} input */static decode64(input){var output = "";var c1,c2,c3 = "";var e1,e2,e3,e4 = "";var i = 0;var base64test = /[^A-Za-z0-9\+\/\=]/g;if(base64test.exec(input)){alert("ERROR INPUT:base64字符只能包含A-Z,a-z,0-9,'+','/','='");return;}input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");do{e1 = Base64.keyChar.indexOf(input.charAt(i++));e2 = Base64.keyChar.indexOf(input.charAt(i++));e3 = Base64.keyChar.indexOf(input.charAt(i++));e4 = Base64.keyChar.indexOf(input.charAt(i++));c1 = (e1 << 2) | (e2 >> 4);//c2 = ((e2 & 15) << 4) | (e3 >> 2);//15二進制：1111c3 = ((e3 & 3) << 6) | e4;//3二進制：11output = output + String.fromCharCode(c1);if(e3 != 64){output = output + String.fromCharCode(c2);}if(e4 != 64){output = output + String.fromCharCode(c3);}c1 = c2 = c3 = "";e1 = e2 = e3 = e4 = "";}while(i < input.length);return unescape(output);}}Base64.keyChar = `ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=`;exports.Base64 = Base64;return exports; }({}))

?

總結

以上是生活随笔為你收集整理的理解Base64编码及实现编解码Base64的全部內容，希望文章能夠幫你解決所遇到的問題。

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