Base64原理

一. Base64編碼由來

　　為什麼會有Base64編碼呢？因為有些網路傳送渠道並不支援所有的位元組，例如傳統的郵件只支援可見字元的傳送，像ASCII碼的控制字元就不能通過郵件傳送。這樣用途就受到了很大的限制，比如圖片二進位制流的每個位元組不可能全部是可見字元，所以就傳送不了。最好的方法就是在不改變傳統協議的情況下，做一種擴充套件方案來支援二進位制檔案的傳送。把不可列印的字元也能用可列印字元來表示，問題就解決了。Base64編碼應運而生，Base64就是一種基於64個可列印字元來表示二進位制資料的表示方法。

二. Base64編碼原理

我們的圖片大部分都是可以轉換成base64編碼的data：image。這個在將canvas儲存為img的時候尤其有用。現代瀏覽器都已經支援原生的基於base64的encode和decode，例如btoa和atob

　　看一下Base64的索引表，字元選用了"A-Z、a-z、0-9、+、/" 64個可列印字元。數值代表字元的索引，這個是標準Base64協議規定的，不能更改。64個字元用6個bit位就可以全部表示，一個位元組有8個bit位，剩下兩個bit就浪費掉了，這樣就不得不犧牲一部分空間了。這裡需要弄明白的就是一個Base64字元是8個bit，但是有效部分只有右邊的6個bit，左邊兩個永遠是0。

　　那麼怎麼用6個有效bit來表示傳統字元的8個bit呢？8和6的最小公倍數是24，也就是說3個傳統位元組可以由4個Base64字元來表示，保證有效位數是一樣的，這樣就多了1/3的位元組數來彌補Base64只有6個有效bit的不足。你也可以說用兩個Base64字元也能表示一個傳統字元，但是採用最小公倍數的方案其實是最減少浪費的。結合下邊的圖比較容易理解。Man是三個字元，一共24個有效bit，只好用4個Base64字元來湊齊24個有效位。紅框表示的是對應的Base64，6個有效位轉化成相應的索引值再對應Base64字元表，查出"Man"對應的Base64字元是"TWFU"。說到這裡有個原則不知道你發現了沒有，要轉換成Base64的最小單位就是三個位元組，對一個字串來說每次都是三個位元組三個位元組的轉換，對應的是Base64的四個位元組。這個搞清楚了其實就差不多了。

　　但是轉換到最後你發現不夠三個位元組了怎麼辦呢？願望終於實現了，我們可以用兩個Base64來表示一個字元或用三個Base64表示兩個字元，像下圖的A對應的第二個Base64的二進位制位只有兩個，把後邊的四個補0就是了。所以A對應的Base64字元就是QQ。上邊已經說過了，原則是Base64字元的最小單位是四個字元一組，那這才兩個字元，後邊補兩個"="吧。其實不用"="也不耽誤解碼，之所以用"="，可能是考慮到多段編碼後的Base64字串拼起來也不會引起混淆。由此可見Base64字串只可能最後出現一個或兩個"="，中間是不可能出現"="的。下圖中字元"BC"的編碼過程也是一樣的。

三.具體實現:

我們來看看，在javascript中如何使用Base64轉碼

var str = 'javascript';

window.btoa(str)
//轉碼結果 "amF2YXNjcmlwdA=="

window.atob("amF2YXNjcmlwdA==")
//解碼結果 "javascript"
複製程式碼

二.對於轉碼來說，Base64轉碼的物件只能是字串，因此來說，對於其他資料還有這一定的侷限性，在此特別需要注意的是對Unicode轉碼。

var str = "China，中國"
window.btoa(str)
複製程式碼

Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

很明顯，這種方式是不行的，那麼如何讓他支援漢字呢，這就要使用window.encodeURIComponent和window.decodeURIComponent

var str = "China，中國";

window.btoa(window.encodeURIComponent(str))
//"Q2hpbmElRUYlQkMlOEMlRTQlQjglQUQlRTUlOUIlQkQ="

window.decodeURIComponent(window.atob('Q2hpbmElRUYlQkMlOEMlRTQlQjglQUQlRTUlOUIlQkQ='))
//"China，中國"複製程式碼

function Base64() {
 
	// private property
	_keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
 
	// public method for encoding
	this.encode = function (input) {
		var output = "";
		var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
		var i = 0;
		input = _utf8_encode(input);
		while (i < input.length) {
			chr1 = input.charCodeAt(i++);
			chr2 = input.charCodeAt(i++);
			chr3 = input.charCodeAt(i++);
			enc1 = chr1 >> 2;
			enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
			enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
			enc4 = chr3 & 63;
			if (isNaN(chr2)) {
				enc3 = enc4 = 64;
			} else if (isNaN(chr3)) {
				enc4 = 64;
			}
			output = output +
			_keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
			_keyStr.charAt(enc3) + _keyStr.charAt(enc4);
		}
		return output;
	}
 
	// public method for decoding
	this.decode = function (input) {
		var output = "";
		var chr1, chr2, chr3;
		var enc1, enc2, enc3, enc4;
		var i = 0;
		input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
		while (i < input.length) {
			enc1 = _keyStr.indexOf(input.charAt(i++));
			enc2 = _keyStr.indexOf(input.charAt(i++));
			enc3 = _keyStr.indexOf(input.charAt(i++));
			enc4 = _keyStr.indexOf(input.charAt(i++));
			chr1 = (enc1 << 2) | (enc2 >> 4);
			chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
			chr3 = ((enc3 & 3) << 6) | enc4;
			output = output + String.fromCharCode(chr1);
			if (enc3 != 64) {
				output = output + String.fromCharCode(chr2);
			}
			if (enc4 != 64) {
				output = output + String.fromCharCode(chr3);
			}
		}
		output = _utf8_decode(output);
		return output;
	}
 
	// private method for UTF-8 encoding
	_utf8_encode = function (string) {
		string = string.replace(/\r\n/g,"\n");
		var utftext = "";
		for (var n = 0; n < string.length; n++) {
			var c = string.charCodeAt(n);
			if (c < 128) {
				utftext += String.fromCharCode(c);
			} else if((c > 127) && (c < 2048)) {
				utftext += String.fromCharCode((c >> 6) | 192);
				utftext += String.fromCharCode((c & 63) | 128);
			} else {
				utftext += String.fromCharCode((c >> 12) | 224);
				utftext += String.fromCharCode(((c >> 6) & 63) | 128);
				utftext += String.fromCharCode((c & 63) | 128);
			}
 
		}
		return utftext;
	}
 
	// private method for UTF-8 decoding
	_utf8_decode = function (utftext) {
		var string = "";
		var i = 0;
		var c = c1 = c2 = 0;
		while ( i < utftext.length ) {
			c = utftext.charCodeAt(i);
			if (c < 128) {
				string += String.fromCharCode(c);
				i++;
			} else if((c > 191) && (c < 224)) {
				c2 = utftext.charCodeAt(i+1);
				string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
				i += 2;
			} else {
				c2 = utftext.charCodeAt(i+1);
				c3 = utftext.charCodeAt(i+2);
				string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
				i += 3;
			}
		}
		return string;
	}
}
複製程式碼

三. 總結　　

　　說起Base64編碼可能有些奇怪，因為大多數的編碼都是由字元轉化成二進位制的過程，而從二進位制轉成字元的過程稱為解碼。而Base64的概念就恰好反了，由二進位制轉到字元稱為編碼，由字元到二進位制稱為解碼。

　　Base64編碼主要用在傳輸、儲存、表示二進位制等領域，還可以用來加密，但是這種加密比較簡單，只是一眼看上去不知道什麼內容罷了，當然也可以對Base64的字元序列進行定製來進行加密。

　　Base64編碼是從二進位制到字元的過程，像一些中文字元用不同的編碼轉為二進位制時，產生的二進位制是不一樣的，所以最終產生的Base64字元也不一樣。例如"上網"對應utf-8格式的Base64編碼是"5LiK572R"，對應GB2312格式的Base64編碼是"yc/N+A=="。

Base64原理

三.具體實現:

相關文章