相關(guān)文章：
一步到位 Base64 編碼
在Web前端還可以這樣實(shí)現(xiàn)Base64
JavaScript 實(shí)現(xiàn) Base64 的 代碼如下
!function(){
// 一般的Base64編碼字符
var commonbase64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
// 對(duì)URL進(jìn)行編碼使用的字符
var urlBase64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
// Base64解碼用到的映射表，兼容一般編碼的Base64和針對(duì)URL進(jìn)行擴(kuò)展編碼的Base64
var base64DecodeChars = new Array(
-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 62, 63, -1, -1, 63,
52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1, -1, -1, -1, -1, -1,
-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,
15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, -1, -1, -1, 62, -1,
-1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, -1, -1, -1, -1, -1);
/** 通用的Base64編碼函數(shù)
* str為待編碼的串
* isUrl用來(lái)表明編碼的對(duì)象(str)是否是一個(gè)URL
*/
function base64encode(str,isUrl){
var out, i, len;
var c1, c2, c3;
// 針對(duì)不同的編碼方式营密，選擇不同的字符集
var base64EncodeChars = isUrl ? urlBase64EncodeChars : commonbase64EncodeChars;
len = str.length;
i = 0;
out = "";
while(i < len){
c1 = str.charCodeAt(i++) & 0xff;
// 當(dāng)最后只有一個(gè)字節(jié)時(shí)
if(i == len){
out += base64EncodeChars.charAt(c1 >> 2);
out += base64EncodeChars.charAt((c1 & 0x3) << 4);
out += "==";
break;
}
c2 = str.charCodeAt(i++);
// 當(dāng)最后剩余兩個(gè)字節(jié)時(shí)
if(i == len){
out += base64EncodeChars.charAt(c1 >> 2);
out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
out += base64EncodeChars.charAt((c2 & 0xF) << 2);
out += "=";
break;
}
//當(dāng)剩余字節(jié)數(shù)大于等于3時(shí)
c3 = str.charCodeAt(i++);
out += base64EncodeChars.charAt(c1 >> 2);
out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
out += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
out += base64EncodeChars.charAt(c3 & 0x3F);
}
return out;
}
/**
* Base64解碼函數(shù)
* @param str
* @returns {*}
*/
function base64decode(str){
var c1, c2, c3, c4;
var i, len, out;
len = str.length;
i = 0;
out = "";
while(i < len){
/* 得到第一個(gè)字符 c1
* 并過(guò)慮掉前后所有與Base64編碼無(wú)關(guān)的字符
* */
do{
c1 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
}while(i < len && c1 == -1);
// 如果已經(jīng)到達(dá)字符串結(jié)尾疗疟，并最后還未得到有效的Base64編碼字符就結(jié)尾循環(huán)
if(c1 == -1)
break;
/* 得到字符 c2
* 并過(guò)濾掉所有與Base64編碼無(wú)關(guān)的字符
*/
do{
c2 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
}while(i < len && c2 == -1);
// 如果已經(jīng)到達(dá)字符串結(jié)尾，并最后還未得到有效的Base64編碼字符就結(jié)尾循環(huán)
if(c2 == -1)
break;
// 根據(jù)Base64編碼的 c1 和 c2 解碼得到一個(gè)編碼前的字符
out += String.fromCharCode((c1 << 2) | ((c2 & 0x30) >> 4));
/* 得到字符 c3
* 并過(guò)濾掉所有與Base64編碼無(wú)關(guān)的字符
* 如果獲取的 c3 是 '=' 字符則說(shuō)明已經(jīng)解碼完成般贼，返回解碼得到的字符串
*/
do{
c3 = str.charCodeAt(i++) & 0xff;
if(c3 == 61)
return out;
c3 = base64DecodeChars[c3];
}while(i < len && c3 == -1);
// 如果已經(jīng)到達(dá)字符串結(jié)尾交洗，并最后還未得到有效的Base64編碼字符就結(jié)尾循環(huán)
if(c3 == -1)
break;
// 根據(jù)Base64編碼的 c2 和 c3 解碼得到一個(gè)編碼前的字符
out += String.fromCharCode(((c2 & 0XF) << 4) | ((c3 & 0x3C) >> 2));
/* 這一步就比較復(fù)雜了
* 先是嘗試獲取第四個(gè)Base64 編碼的字符 c4
* 如果獲取的 c4 是 '=' 字符則說(shuō)明已經(jīng)解碼完成骑科，返回解碼得到的字符串
* */
do{
c4 = str.charCodeAt(i++) & 0xff;
if(c4 == 61)
return out;
c4 = base64DecodeChars[c4];
}while(i < len && c4 == -1);
// 如果已經(jīng)到達(dá)字符串結(jié)尾，并最后還未得到有效的Base64編碼字符就結(jié)尾循環(huán)
if(c4 == -1)
break;
// 根據(jù)Base64編碼的 c3 和 c4 解碼得到一個(gè)編碼前的字符
out += String.fromCharCode(((c3 & 0x03) << 6) | c4);
}
return out;
}
/**
* 把 unicode 碼轉(zhuǎn)換成 utf8 編碼
* @param str
* @returns {string}
*/
function unicodeToUtf8(str){
var out, i, len, c;
out = "";
len = str.length;
for(i = 0; i < len; i++){
c = str.charCodeAt(i);
// 兼容 ASCII
if((c >= 0x0001) && (c <= 0x007F)){
out += str.charAt(i);
}else if(c > 0x07FF){
// 占三個(gè)字節(jié)的 utf8
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}else{
// 占兩個(gè)字節(jié)的 utf8
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
/**
* 把 utf8 編碼轉(zhuǎn)換成 unicode 碼
* @param str
* @returns {string}
*/
function utf8ToUnicode(str){
var out, i, len, c;
var char2, char3;
out = "";
len = str.length;
i = 0;
while(i < len){
c = str.charCodeAt(i++);
switch(c >> 4){
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
case 6:
case 7:
// 0xxxxxxx ASCII 編碼
out += str.charAt(i - 1);
break;
case 12:
case 13:
// 110x xxxx 10xx xxxx
// 占兩個(gè)字節(jié)的 utf8
char2 = str.charCodeAt(i++);
out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
break;
case 14:
// 1110 xxxx 10xx xxxx 10xx xxxx
// 占三個(gè)字節(jié)的 utf8
char2 = str.charCodeAt(i++);
char3 = str.charCodeAt(i++);
out += String.fromCharCode(((c & 0x0F) << 12) |
((char2 & 0x3F) << 6) |
((char3 & 0x3F) << 0));
break;
}
}
return out;
}
/**
* 轉(zhuǎn)成 十六 進(jìn)制編碼
* @param str
* @returns {string}
* @constructor
*/
function CharToHex(str){
var out, i, len, c, h;
out = "";
len = str.length;
i = 0;
while(i < len){
c = str.charCodeAt(i++);
// 把數(shù)據(jù)轉(zhuǎn)換成十六進(jìn)制的字符串
h = c.toString(16);
if(h.length < 2)
h = "0" + h;
out += "\\x" + h + " ";
if(i > 0 && i % 8 == 0)
out += "\r\n";
}
return out;
}
window.Base64={
encode:function(str){
// 普通 Base64 編碼
return base64encode(unicodeToUtf8(str));
},
encodeUrl:function(str){
// 使用 Base64 編碼字符串
return base64encode(unicodeToUtf8(str),1)
},
decode:function(str){
// 兼容的 Base64 解碼
return utf8ToUnicode(base64decode(str));
},
encodeToHex:function(str){
// 普通 Base64 編碼 以十六進(jìn)制顯示
return CharToHex(base64encode(unicodeToUtf8(str)));
},
encodeUrlToHex:function(str){
// 使用 Base64 編碼 url 以十六進(jìn)制顯示
return CharToHex(base64encode(unicodeToUtf8(str),1));
}
}
}();
代碼說(shuō)明及相關(guān)知識(shí)點(diǎn)
凡注釋中已經(jīng)解釋過(guò)的內(nèi)容构拳，在這里都不再贅述咆爽。
上述代碼中的最外層是一個(gè)自執(zhí)行的函數(shù)，代碼執(zhí)行之后置森，會(huì)在 window 對(duì)象下注冊(cè)一個(gè)對(duì)象 Base64斗埂。在瀏覽器中window對(duì)象下的變量和對(duì)象都是全局的，所以這相當(dāng)于這段代碼加載完成后自執(zhí)行并在全局作用域(命名空間)注冊(cè)(聲明)了一個(gè)名為 Base64 的對(duì)象暇藏。
Base64.encode 方法
Base64 對(duì)象 的 encode 方法蜜笤，傳一個(gè)字符串 str (可以是中文和中文符號(hào))，返回字符串 str 的 Base64 編碼盐碱。
Base64.encodeUrl
Base64 對(duì)象的 encodeUrl 方法把兔，接受一個(gè)字符串 str 作為參數(shù)(支持中文和中文符號(hào))，返回字符串 str 的 Base64 針對(duì) url 的擴(kuò)展編碼瓮顽。
Base64.decode
Base64對(duì)象的 decode 方法县好，接受一個(gè) Base64 編碼串(可以是普通 Base64 串，也可以是針對(duì) url 的擴(kuò)展 Base64 串)暖混，返回一個(gè)解碼后的字符串缕贡。
這個(gè)方法執(zhí)行的是 encode 和 encodeUrl 的逆過(guò)程，它能很好的處理 Base64 針對(duì) url 的擴(kuò)展編碼，是一個(gè)兼容方法晾咪。
相關(guān)知識(shí)點(diǎn)
想要了解Base64 對(duì)象的內(nèi)部細(xì)節(jié)可以詳細(xì)分析源碼收擦，里面有詳細(xì)的注釋，相信只要基礎(chǔ)知道過(guò)關(guān)谍倦，理解這段代碼應(yīng)該都不成問題塞赂。下面是這段代碼中涉及的基礎(chǔ)知識(shí)：
- Base64 編碼
- 對(duì) url 進(jìn)行 Base64 編碼時(shí)的擴(kuò)展
- unicode 編碼
- utf-8 編碼
- JavaScript 語(yǔ)言基礎(chǔ)
- JavaScript 中 String 對(duì)象的
charCodeAt方法 - JavaScript 中 Number 對(duì)象的
toString方法
