前端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 = {
  _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
  encode: function (e) {
    var t = "";
    var n, r, i, s, o, u, a;
    var f = 0;
    e = Base64._utf8_encode(e);
    while (f < e.length) {
      n = e.charCodeAt(f++);
      r = e.charCodeAt(f++);
      i = e.charCodeAt(f++);
      s = n >> 2;
      o = (n & 3) << 4 | r >> 4;
      u = (r & 15) << 2 | i >> 6;
      a = i & 63;
      if (isNaN(r)) {
        u = a = 64
      } else if (isNaN(i)) {
        a = 64
      }
      t = t + this._keyStr.charAt(s) + this._keyStr.charAt(o) + this._keyStr.charAt(u) + this._keyStr.charAt(a)
    }
    return t
  },
  decode: function (e) {
    var t = "";
    var n, r, i;
    var s, o, u, a;
    var f = 0;
    e = e.replace(/[^A-Za-z0-9+/=]/g, "");
    while (f < e.length) {
      s = this._keyStr.indexOf(e.charAt(f++));
      o = this._keyStr.indexOf(e.charAt(f++));
      u = this._keyStr.indexOf(e.charAt(f++));
      a = this._keyStr.indexOf(e.charAt(f++));
      n = s << 2 | o >> 4;
      r = (o & 15) << 4 | u >> 2;
      i = (u & 3) << 6 | a;
      t = t + String.fromCharCode(n);
      if (u != 64) {
        t = t + String.fromCharCode(r)
      }
      if (a != 64) {
        t = t + String.fromCharCode(i)
      }
    }
    t = Base64._utf8_decode(t);
    return t
  }, _utf8_encode: function (e) {
    e = e.replace(/rn/g, "n");
    var t = "";
    for (var n = 0; n < e.length; n++) {
      var r = e.charCodeAt(n);
      if (r < 128) {
        t += String.fromCharCode(r)
      } else if (r > 127 && r < 2048) {
        t += String.fromCharCode(r >> 6 | 192);
        t += String.fromCharCode(r & 63 | 128)
      } else {
        t += String.fromCharCode(r >> 12 | 224);
        t += String.fromCharCode(r >> 6 & 63 | 128);
        t += String.fromCharCode(r & 63 | 128)
      }
    }
    return t
  }, _utf8_decode: function (e) {
    var t = "";
    var n = 0;
    var r = c1 = c2 = 0;
    while (n < e.length) {
      r = e.charCodeAt(n);
      if (r < 128) {
        t += String.fromCharCode(r);
        n++
      } else if (r > 191 && r < 224) {
        c2 = e.charCodeAt(n + 1);
        t += String.fromCharCode((r & 31) << 6 | c2 & 63);
        n += 2
      } else {
        c2 = e.charCodeAt(n + 1);
        c3 = e.charCodeAt(n + 2);
        t += String.fromCharCode((r & 15) << 12 | (c2 & 63) << 6 | c3 & 63);
        n += 3
      }
    }
    return t
  }
}
// Define the string
var string = 'Hello World!';
// Encode the String
var encodedString = Base64.encode(string);
console.log(encodedString); // Outputs: "SGVsbG8gV29ybGQh"
// Decode the String
var decodedString = Base64.decode(encodedString);
console.log(decodedString); // Outputs: "Hello World!"

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