相關(guān)文章：
一步到位 Base64 編碼
在Web前端還可以這樣實現(xiàn)Base64
JavaScript 實現(xiàn) Base64 的 代碼如下
!function(){
// 一般的Base64編碼字符
var commonbase64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
// 對URL進行編碼使用的字符
var urlBase64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
// Base64解碼用到的映射表，兼容一般編碼的Base64和針對URL進行擴展編碼的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用來表明編碼的對象(str)是否是一個URL
*/
function base64encode(str,isUrl){
var out, i, len;
var c1, c2, c3;
// 針對不同的編碼方式，選擇不同的字符集
var base64EncodeChars = isUrl ? urlBase64EncodeChars : commonbase64EncodeChars;
len = str.length;
i = 0;
out = "";
while(i < len){
c1 = str.charCodeAt(i++) & 0xff;
// 當(dāng)最后只有一個字節(jié)時
if(i == len){
out += base64EncodeChars.charAt(c1 >> 2);
out += base64EncodeChars.charAt((c1 & 0x3) << 4);
out += "==";
break;
}
c2 = str.charCodeAt(i++);
// 當(dāng)最后剩余兩個字節(jié)時
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時
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){
/* 得到第一個字符 c1
* 并過慮掉前后所有與Base64編碼無關(guān)的字符
* */
do{
c1 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
}while(i < len && c1 == -1);
// 如果已經(jīng)到達字符串結(jié)尾，并最后還未得到有效的Base64編碼字符就結(jié)尾循環(huán)
if(c1 == -1)
break;
/* 得到字符 c2
* 并過濾掉所有與Base64編碼無關(guān)的字符
*/
do{
c2 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
}while(i < len && c2 == -1);
// 如果已經(jīng)到達字符串結(jié)尾，并最后還未得到有效的Base64編碼字符就結(jié)尾循環(huán)
if(c2 == -1)
break;
// 根據(jù)Base64編碼的 c1 和 c2 解碼得到一個編碼前的字符
out += String.fromCharCode((c1 << 2) | ((c2 & 0x30) >> 4));
/* 得到字符 c3
* 并過濾掉所有與Base64編碼無關(guān)的字符
* 如果獲取的 c3 是 '=' 字符則說明已經(jīng)解碼完成，返回解碼得到的字符串
*/
do{
c3 = str.charCodeAt(i++) & 0xff;
if(c3 == 61)
return out;
c3 = base64DecodeChars[c3];
}while(i < len && c3 == -1);
// 如果已經(jīng)到達字符串結(jié)尾，并最后還未得到有效的Base64編碼字符就結(jié)尾循環(huán)
if(c3 == -1)
break;
// 根據(jù)Base64編碼的 c2 和 c3 解碼得到一個編碼前的字符
out += String.fromCharCode(((c2 & 0XF) << 4) | ((c3 & 0x3C) >> 2));
/* 這一步就比較復(fù)雜了
* 先是嘗試獲取第四個Base64 編碼的字符 c4
* 如果獲取的 c4 是 '=' 字符則說明已經(jīng)解碼完成，返回解碼得到的字符串
* */
do{
c4 = str.charCodeAt(i++) & 0xff;
if(c4 == 61)
return out;
c4 = base64DecodeChars[c4];
}while(i < len && c4 == -1);
// 如果已經(jīng)到達字符串結(jié)尾，并最后還未得到有效的Base64編碼字符就結(jié)尾循環(huán)
if(c4 == -1)
break;
// 根據(jù)Base64編碼的 c3 和 c4 解碼得到一個編碼前的字符
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){
// 占三個字節(jié)的 utf8
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}else{
// 占兩個字節(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
// 占兩個字節(jié)的 utf8
char2 = str.charCodeAt(i++);
out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
break;
case 14:
// 1110 xxxx 10xx xxxx 10xx xxxx
// 占三個字節(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)成 十六 進制編碼
* @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)換成十六進制的字符串
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 編碼 以十六進制顯示
return CharToHex(base64encode(unicodeToUtf8(str)));
},
encodeUrlToHex:function(str){
// 使用 Base64 編碼 url 以十六進制顯示
return CharToHex(base64encode(unicodeToUtf8(str),1));
}
}
}();
代碼說明及相關(guān)知識點
凡注釋中已經(jīng)解釋過的內(nèi)容，在這里都不再贅述。
上述代碼中的最外層是一個自執(zhí)行的函數(shù)，代碼執(zhí)行之后，會在 window 對象下注冊一個對象 Base64。在瀏覽器中window對象下的變量和對象都是全局的，所以這相當(dāng)于這段代碼加載完成后自執(zhí)行并在全局作用域(命名空間)注冊(聲明)了一個名為 Base64 的對象。
Base64.encode 方法
Base64 對象 的 encode 方法，傳一個字符串 str (可以是中文和中文符號)，返回字符串 str 的 Base64 編碼。
Base64.encodeUrl
Base64 對象的 encodeUrl 方法，接受一個字符串 str 作為參數(shù)(支持中文和中文符號)，返回字符串 str 的 Base64 針對 url 的擴展編碼。
Base64.decode
Base64對象的 decode 方法，接受一個 Base64 編碼串(可以是普通 Base64 串，也可以是針對 url 的擴展 Base64 串)，返回一個解碼后的字符串。
這個方法執(zhí)行的是 encode 和 encodeUrl 的逆過程，它能很好的處理 Base64 針對 url 的擴展編碼，是一個兼容方法。
相關(guān)知識點
想要了解Base64 對象的內(nèi)部細節(jié)可以詳細分析源碼，里面有詳細的注釋，相信只要基礎(chǔ)知道過關(guān)，理解這段代碼應(yīng)該都不成問題。下面是這段代碼中涉及的基礎(chǔ)知識：
- Base64 編碼
- 對 url 進行 Base64 編碼時的擴展
- unicode 編碼
- utf-8 編碼
- JavaScript 語言基礎(chǔ)
- JavaScript 中 String 對象的
charCodeAt方法 - JavaScript 中 Number 對象的
toString方法
