Base64原理

一. Base64編碼由來

　　爲何會有Base64編碼呢？由於有些網絡傳送渠道並不支持全部的字節，例如傳統的郵件只支持可見字符的傳送，像ASCII碼的控制字符就不能經過郵件傳送。這樣用途就受到了很大的限制，好比圖片二進制流的每一個字節不可能所有是可見字符，因此就傳送不了。最好的方法就是在不改變傳統協議的狀況下，作一種擴展方案來支持二進制文件的傳送。把不可打印的字符也能用可打印字符來表示，問題就解決了。Base64編碼應運而生，Base64就是一種基於64個可打印字符來表示二進制數據的表示方法。

二. Base64編碼原理

     咱們的圖片大部分都是能夠轉換成base64編碼的data：image。 這個在將canvas保存爲img的時候尤爲有用。現代瀏覽器都已經支持原生的基於base64的encode和decode，例如btoa和atob

　　看一下Base64的索引表，字符選用了"A-Z、a-z、0-九、+、/" 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=="。