當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

关于base64编码的原理及实现

發(fā)布時(shí)間：2023/12/10 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了关于base64编码的原理及实现小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

我們的圖片大部分都是可以轉(zhuǎn)換成base64編碼的data：image。這個(gè)在將canvas保存為img的時(shí)候尤其有用。雖然除ie外，大部分現(xiàn)代瀏覽器都已經(jīng)支持原生的基于base64的encode和decode，例如btoa和atob。（將canvas畫布保存成img并強(qiáng)制改變mimetype進(jìn)行下載，會(huì)在下一篇記錄）

但是處于好奇心，還是驅(qū)使我去了解下base64編碼的原理。以便也在不支持原生base64編碼的ie下可以得以實(shí)現(xiàn)。

【Base64】
-base64的編碼都是按字符串長(zhǎng)度，以每3個(gè)8bit的字符為一組，
-然后針對(duì)每組，首先獲取每個(gè)字符的ASCII編碼，
-然后將ASCII編碼轉(zhuǎn)換成8bit的二進(jìn)制，得到一組3*8=24bit的字節(jié)
-然后再將這24bit劃分為4個(gè)6bit的字節(jié)，并在每個(gè)6bit的字節(jié)前面都填兩個(gè)高位0，得到4個(gè)8bit的字節(jié)
-然后將這4個(gè)8bit的字節(jié)轉(zhuǎn)換成10進(jìn)制，對(duì)照Base64編碼表（下表），得到對(duì)應(yīng)編碼后的字符。

（注：1. 要求被編碼字符是8bit的，所以須在ASCII編碼范圍內(nèi)，\u0000-\u00ff，中文就不行。
　　　2. 如果被編碼字符長(zhǎng)度不是3的倍數(shù)的時(shí)候，則都用0代替，對(duì)應(yīng)的輸出字符為=）

Base64 編碼表ValueCharValueCharValueCharValueChar

?	?	?
			0	A	16	Q	32	g	48	w
			1	B	17	R	33	h	49	x
			2	C	18	S	34	i	50	y
			3	D	19	T	35	j	51	z
			4	E	20	U	36	k	52	0
			5	F	21	V	37	l	53	1
			6	G	22	W	38	m	54	2
			7	H	23	X	39	n	55	3
			8	I	24	Y	40	o	56	4
			9	J	25	Z	41	p	57	5
			10	K	26	a	42	q	58	6
			11	L	27	b	43	r	59	7
			12	M	28	c	44	s	60	8
			13	N	29	d	45	t	61	9
			14	O	30	e	46	u	62	+
			15	P	31	f	47	v	63	/

比如舉下面2個(gè)例子：
a) 字符長(zhǎng)度為能被3整除時(shí)：比如“Tom” ：

T o m
ASCII: 84 111 109
8bit字節(jié): 01010100 01101111 01101101
6bit字節(jié): 010101 000110 111101 101101
十進(jìn)制: 21 6 61 45
對(duì)應(yīng)編碼: V G 9 t

所以，btoa('Tom') = VG9t

b) 字符串長(zhǎng)度不能被3整除時(shí)，比如“Lucy”：

L u c y
ASCII: 76 117 99 121
8bit字節(jié): 01001100 01110101 01100011 01111001 00000000 00000000
6bit字節(jié): 010011 000111 010101 100011 011110 010000 000000 000000
十進(jìn)制: 19 7 21 35 30 16 (異常) (異常)
對(duì)應(yīng)編碼: T H V j e Q = =

由于Lucy只有4個(gè)字母，所以按3個(gè)一組的話，第二組還有兩個(gè)空位，所以需要用0來補(bǔ)齊。這里就需要注意，因?yàn)槭切枰a(bǔ)齊而出現(xiàn)的0，所以轉(zhuǎn)化成十進(jìn)制的時(shí)候就不能按常規(guī)用base64編碼表來對(duì)應(yīng)，所以不是a，可以理解成為一種特殊的“異常”，編碼應(yīng)該對(duì)應(yīng)“=”。

有了上面的理論，那我們實(shí)現(xiàn)一個(gè)base64編碼就容易了。
?

/**
* base64 encoding & decoding
* for fixing browsers which don't support Base64 | btoa |atob
*/

(function (win, undefined) {

var Base64 = function () {
var base64hash = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';

// btoa method
function _btoa (s) {
if (/([^\u0000-\u00ff])/.test(s)) {
throw new Error('INVALID_CHARACTER_ERR');
}
var i = 0,
prev,
ascii,
mod,
result = [];

while (i < s.length) {
ascii = s.charCodeAt(i);
mod = i % 3;

switch(mod) {
// 第一個(gè)6位只需要讓8位二進(jìn)制右移兩位
case 0:
result.push(base64hash.charAt(ascii >> 2));
break;
//第二個(gè)6位 = 第一個(gè)8位的后兩位 + 第二個(gè)8位的前4位
case 1:
result.push(base64hash.charAt((prev & 3) << 4 | (ascii >> 4)));
break;
//第三個(gè)6位 = 第二個(gè)8位的后4位 + 第三個(gè)8位的前2位
//第4個(gè)6位 = 第三個(gè)8位的后6位
case 2:
result.push(base64hash.charAt((prev & 0x0f) << 2 | (ascii >> 6)));
result.push(base64hash.charAt(ascii & 0x3f));
break;
}

prev = ascii;
i ++;
}

// 循環(huán)結(jié)束后看mod, 為0 證明需補(bǔ)3個(gè)6位，第一個(gè)為最后一個(gè)8位的最后兩位后面補(bǔ)4個(gè)0。另外兩個(gè)6位對(duì)應(yīng)的是異常的“=”；
// mod為1，證明還需補(bǔ)兩個(gè)6位，一個(gè)是最后一個(gè)8位的后4位補(bǔ)兩個(gè)0，另一個(gè)對(duì)應(yīng)異常的“=”
if(mod == 0) {
result.push(base64hash.charAt((prev & 3) << 4));
result.push('==');
} else if (mod == 1) {
result.push(base64hash.charAt((prev & 0x0f) << 2));
result.push('=');
}

return result.join('');
}

// atob method
// 逆轉(zhuǎn)encode的思路即可
function _atob (s) {
s = s.replace(/\s|=/g, '');
var cur,
prev,
mod,
i = 0,
result = [];

while (i < s.length) {
cur = base64hash.indexOf(s.charAt(i));
mod = i % 4;

switch (mod) {
case 0:
//TODO
break;
case 1:
result.push(String.fromCharCode(prev << 2 | cur >> 4));
break;
case 2:
result.push(String.fromCharCode((prev & 0x0f) << 4 | cur >> 2));
break;
case 3:
result.push(String.fromCharCode((prev & 3) << 6 | cur));
break;

}

prev = cur;
i ++;
}

return result.join('');
}

return {
btoa: _btoa,
atob: _atob,
encode: _btoa,
decode: _atob
};
}();

if (!win.Base64) { win.Base64 = Base64 }
if (!win.btoa) { win.btoa = Base64.btoa }
if (!win.atob) { win.atob = Base64.atob }

})(window)

Base64 example

轉(zhuǎn)載于:https://www.cnblogs.com/hongru/archive/2012/01/14/2321397.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的关于base64编码的原理及实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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

原理

上一篇：将应用程序安装为Windows服务
下一篇：地图图元的闪烁效果制作

?	?	?
			0	A	16	Q	32	g	48	w
			1	B	17	R	33	h	49	x
			2	C	18	S	34	i	50	y
			3	D	19	T	35	j	51	z
			4	E	20	U	36	k	52	0
			5	F	21	V	37	l	53	1
			6	G	22	W	38	m	54	2
			7	H	23	X	39	n	55	3
			8	I	24	Y	40	o	56	4
			9	J	25	Z	41	p	57	5
			10	K	26	a	42	q	58	6
			11	L	27	b	43	r	59	7
			12	M	28	c	44	s	60	8
			13	N	29	d	45	t	61	9
			14	O	30	e	46	u	62	+
			15	P	31	f	47	v	63	/

?	?	?
			0	A	16	Q	32	g	48	w
			1	B	17	R	33	h	49	x
			2	C	18	S	34	i	50	y
			3	D	19	T	35	j	51	z
			4	E	20	U	36	k	52	0
			5	F	21	V	37	l	53	1
			6	G	22	W	38	m	54	2
			7	H	23	X	39	n	55	3
			8	I	24	Y	40	o	56	4
			9	J	25	Z	41	p	57	5
			10	K	26	a	42	q	58	6
			11	L	27	b	43	r	59	7
			12	M	28	c	44	s	60	8
			13	N	29	d	45	t	61	9
			14	O	30	e	46	u	62	+
			15	P	31	f	47	v	63	/

?	?	?
			0	A	16	Q	32	g	48	w
			1	B	17	R	33	h	49	x
			2	C	18	S	34	i	50	y
			3	D	19	T	35	j	51	z
			4	E	20	U	36	k	52	0
			5	F	21	V	37	l	53	1
			6	G	22	W	38	m	54	2
			7	H	23	X	39	n	55	3
			8	I	24	Y	40	o	56	4
			9	J	25	Z	41	p	57	5
			10	K	26	a	42	q	58	6
			11	L	27	b	43	r	59	7
			12	M	28	c	44	s	60	8
			13	N	29	d	45	t	61	9
			14	O	30	e	46	u	62	+
			15	P	31	f	47	v	63	/