前端base64加密

一、Base64编码表

码值	字符	码值	字符	码值	字符	码值	字符
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	/

 

 

 

二、原理和过程

举个栗子说明原理和过程：

　 转码过程例子：3 * 8 = 4 * 6   内存1个字节占8位

          转前： s     1    3

先转成ascii对应：115   49   51

 翻译为2进制8*3：01110011  00110001  00110011

    重新分组6*4：011100   110011   000100   110011

然后计算机是8位的存数，6位不够，高位自动补0 

 科学计算器输入：00011100  00110011  00000100  00110011

   对应十进制为：28      　　51       　　4        　　 51

     照表译码为：c       　　z        　　E       　　  z

 

 

三、Base64的JavaScript实现方式

// Create Base64 Objectvar
Base64 = {  3   _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",  4   encode: function (e) {  5     var t = "";  6     var n, r, i, s, o, u, a;  7     var f = 0;  8     e = Base64._utf8_encode(e);  9     while (f < e.length) {  10       n = e.charCodeAt(f++);  11       r = e.charCodeAt(f++);  12       i = e.charCodeAt(f++);  13       s = n >> 2;  14       o = (n & 3) << 4 | r >> 4;  15       u = (r & 15) << 2 | i >> 6;  16       a = i & 63;  17       if (isNaN(r)) {  18         u = a = 64
      } else if (isNaN(i)) {  20         a = 64
 }  22       t = t + this._keyStr.charAt(s) + this._keyStr.charAt(o) + this._keyStr.charAt(u) + this._keyStr.charAt(a)  23  }  24     return t  25  },  26   decode: function (e) {  27     var t = "";  28     var n, r, i;  29     var s, o, u, a;  30     var f = 0;  31     e = e.replace(/[^A-Za-z0-9+/=]/g, "");
    while (f < e.length) {  33       s = this._keyStr.indexOf(e.charAt(f++));  34       o = this._keyStr.indexOf(e.charAt(f++));  35       u = this._keyStr.indexOf(e.charAt(f++));  36       a = this._keyStr.indexOf(e.charAt(f++));  37       n = s << 2 | o >> 4;  38       r = (o & 15) << 4 | u >> 2;  39       i = (u & 3) << 6 | a;  40       t = t + String.fromCharCode(n);  41       if (u != 64) {  42         t = t + String.fromCharCode(r)  43  }  44       if (a != 64) {  45         t = t + String.fromCharCode(i)  46  }  47  }  48     t = Base64._utf8_decode(t);  49     return t  50   }, _utf8_encode: function (e) {  51     e = e.replace(/rn/g, "n");  52     var t = "";  53     for (var n = 0; n < e.length; n++) {  54       var r = e.charCodeAt(n);  55       if (r < 128) {  56         t += String.fromCharCode(r)  57       } else if (r > 127 && r < 2048) {  58         t += String.fromCharCode(r >> 6 | 192);  59         t += String.fromCharCode(r & 63 | 128)  60       } else {  61         t += String.fromCharCode(r >> 12 | 224);  62         t += String.fromCharCode(r >> 6 & 63 | 128);  63         t += String.fromCharCode(r & 63 | 128)  64  }  65  }  66     return t  67   }, _utf8_decode: function (e) {  68     var t = "";  69     var n = 0;  70     var r = c1 = c2 = 0;  71     while (n < e.length) {  72       r = e.charCodeAt(n);  73       if (r < 128) {  74         t += String.fromCharCode(r);  75         n++
      } else if (r > 191 && r < 224) {  77         c2 = e.charCodeAt(n + 1);  78         t += String.fromCharCode((r & 31) << 6 | c2 & 63);  79         n += 2
      } else {  81         c2 = e.charCodeAt(n + 1);  82         c3 = e.charCodeAt(n + 2);  83         t += String.fromCharCode((r & 15) << 12 | (c2 & 63) << 6 | c3 & 63);  84         n += 3
 }  86  }  87     return t  88  }  89 }  90 // Define the string
var string = 'Hello World!';  92 // Encode the String
var encodedString = Base64.encode(string);  94 console.log(encodedString); // Outputs: "SGVsbG8gV29ybGQh"
// Decode the String
var decodedString = Base64.decode(encodedString);  97 console.log(decodedString); // Outputs: "Hello World!"

//这个自定义的Base64对象可以转码的字符也不仅限于Latin1字符;
var string = "Hello, 中国！"; 101 var encodedString = Base64.encode(string);//"SGVsbG8sIOS4reWbve+8gQ=="
console.log(encodedString); 103 var decodedString = Base64.decode(encodedString); 104 console.log(decodedString); //"Hello, 中国！"

 

四、JavaScript的api支持Base64

javascript的api支持Base64，因此我们可以很方便的来进行编译码。

var encodeData = window.btoa("name=xiaoming&age=10")　　//编码　　bmFtZT14aWFvbWluZyZhZ2U9MTA=

var decodeData = window.atob(encodeData)　　　//解码　　name=xiaoming&age=10

btoa和atob是window对象的两个函数，其中btoa是binary to ascii，用于将binary的数据用ascii码表示，即Base64的编码过程，而atob则是ascii to binary，用于将ascii码解析成binary数据，看一个例子：

1 // Define the stringvar
2 string = 'Hello World!';
3 
4 // Encode the Stringvar
5 encodedString = btoa(string);　　console.log(encodedString); // Outputs: "SGVsbG8gV29ybGQh"
6 
7 // Decode the Stringvar
8 decodedString = atob(encodedString);　　console.log(decodedString); // Outputs: "Hello World!"

但是window.btoa这中编码方式不能直接作用于Unicode字符串,只能将ascci字符串或二进制数据转换成Base64编码过的字符串。

如果要对Unicode字符进行编码可以将做如下转换：

var encodeData = window.btoa(window.encodeURIComponent("name=小明&age=10"))　　//编码　　bmFtZSUzRCVFNSVCMCU4RiVFNiU5OCU4RSUyNmFnZSUzRDEw

var decodeData = window.decodeURIComponent(window.atob(encodeData))　　//解码　　name=小明&age=10

 

五、通过nodeJs包管理工具安装base64插件:

npm install --save js-base64

引入base64：

import { Base64 } from 'js-base64';

使用base64:

　　编码：Base64.encode();  

　　译码：Base64.decode();