js中關(guān)于base64編碼的問(wèn)題
關(guān)于base64編碼的問(wèn)題
1. 使用 Buffer對(duì)象
Buffer.from(JSON.stringify(jwtHeader)).toString('base64')
2. 使用base64js.js
/** ?* base64js ?Uint8Array 8位無(wú)符號(hào)整數(shù),長(zhǎng)度1個(gè)字節(jié), ?* base64js.byteLength(base64Str) ? base64字符串轉(zhuǎn)為字節(jié)數(shù)組的長(zhǎng)度 ?* base64js.toByteArray(base64Str) base64字符串轉(zhuǎn)為字節(jié)數(shù)組 ?* base64js.fromByteArray(bytes) ? 字節(jié)數(shù)組轉(zhuǎn)為base64字符串 ?*/ (function (r) { ? if (typeof exports === "object" && typeof module !== "undefined") { ? ? module.exports = r() ? } else { ? ? if (typeof define === "function" && define.amd) { ? ? ? define([], r) ? ? } else { ? ? ? var e; ? ? ? if (typeof window !== "undefined") { ? ? ? ? e = window ? ? ? } else { ? ? ? ? if (typeof global !== "undefined") { ? ? ? ? ? e = global ? ? ? ? } else { ? ? ? ? ? if (typeof self !== "undefined") { ? ? ? ? ? ? e = self ? ? ? ? ? } else { ? ? ? ? ? ? e = this ? ? ? ? ? } ? ? ? ? } ? ? ? } ? ? ? e.base64js = r() ? ? } ? } })(function () { ? var r, e, t; ? return function r(e, t, n) { ? ? function o(i, a) { ? ? ? if (!t[i]) { ? ? ? ? if (!e[i]) { ? ? ? ? ? var u = typeof require == "function" && require; ? ? ? ? ? if (!a && u) { ? ? ? ? ? ? return u(i, !0) ? ? ? ? ? } ? ? ? ? ? if (f) { ? ? ? ? ? ? return f(i, !0) ? ? ? ? ? } ? ? ? ? ? var d = new Error("Cannot find module '" + i + "'"); ? ? ? ? ? throw d.code = "MODULE_NOT_FOUND", d ? ? ? ? } ? ? ? ? var c = t[i] = { ? ? ? ? ? exports: {} ? ? ? ? }; ? ? ? ? e[i][0].call(c.exports, function (r) { ? ? ? ? ? var t = e[i][1][r]; ? ? ? ? ? return o(t ? t : r) ? ? ? ? }, c, c.exports, r, e, t, n) ? ? ? } ? ? ? return t[i].exports ? ? } ? ? var f = typeof require == "function" && require; ? ? for (var i = 0; i < n.length; i++) { ? ? ? o(n[i]) ? ? } ? ? return o ? }({ ? ? "/": [function (r, e, t) { ? ? ? t.byteLength = c; ? ? ? t.toByteArray = v; ? ? ? t.fromByteArray = s; ? ? ? var n = []; ? ? ? var o = []; ? ? ? var f = typeof Uint8Array !== "undefined" ? Uint8Array : Array; ? ? ? var i = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"; ? ? ? for (var a = 0, u = i.length; a < u; ++a) { ? ? ? ? n[a] = i[a]; ? ? ? ? o[i.charCodeAt(a)] = a ? ? ? } ? ? ? o["-".charCodeAt(0)] = 62; ? ? ? o["_".charCodeAt(0)] = 63; ? ? ? function d(r) { ? ? ? ? var e = r.length; ? ? ? ? if (e % 4 > 0) { ? ? ? ? ? throw new Error("Invalid string. Length must be a multiple of 4") ? ? ? ? } ? ? ? ? return r[e - 2] === "=" ? 2 : r[e - 1] === "=" ? 1 : 0 ? ? ? } ? ? ? function c(r) { ? ? ? ? return r.length * 3 / 4 - d(r) ? ? ? } ? ? ? function v(r) { ? ? ? ? var e, t, n, i, a; ? ? ? ? var u = r.length; ? ? ? ? i = d(r); ? ? ? ? a = new f(u * 3 / 4 - i); ? ? ? ? t = i > 0 ? u - 4 : u; ? ? ? ? var c = 0; ? ? ? ? for (e = 0; e < t; e += 4) { ? ? ? ? ? n = o[r.charCodeAt(e)] << 18 | o[r.charCodeAt(e + 1)] << 12 | o[r.charCodeAt(e + 2)] << 6 | o[r.charCodeAt(e + 3)]; ? ? ? ? ? a[c++] = n >> 16 & 255; ? ? ? ? ? a[c++] = n >> 8 & 255; ? ? ? ? ? a[c++] = n & 255 ? ? ? ? } ? ? ? ? if (i === 2) { ? ? ? ? ? n = o[r.charCodeAt(e)] << 2 | o[r.charCodeAt(e + 1)] >> 4; ? ? ? ? ? a[c++] = n & 255 ? ? ? ? } else { ? ? ? ? ? if (i === 1) { ? ? ? ? ? ? n = o[r.charCodeAt(e)] << 10 | o[r.charCodeAt(e + 1)] << 4 | o[r.charCodeAt(e + 2)] >> 2; ? ? ? ? ? ? a[c++] = n >> 8 & 255; ? ? ? ? ? ? a[c++] = n & 255 ? ? ? ? ? } ? ? ? ? } ? ? ? ? return a ? ? ? } ? ? ? function l(r) { ? ? ? ? return n[r >> 18 & 63] + n[r >> 12 & 63] + n[r >> 6 & 63] + n[r & 63] ? ? ? } ? ? ? function h(r, e, t) { ? ? ? ? var n; ? ? ? ? var o = []; ? ? ? ? for (var f = e; f < t; f += 3) { ? ? ? ? ? n = (r[f] << 16) + (r[f + 1] << 8) + r[f + 2]; ? ? ? ? ? o.push(l(n)) ? ? ? ? } ? ? ? ? return o.join("") ? ? ? } ? ? ? function s(r) { ? ? ? ? var e; ? ? ? ? var t = r.length; ? ? ? ? var o = t % 3; ? ? ? ? var f = ""; ? ? ? ? var i = []; ? ? ? ? var a = 16383; ? ? ? ? for (var u = 0, d = t - o; u < d; u += a) { ? ? ? ? ? i.push(h(r, u, u + a > d ? d : u + a)) ? ? ? ? } ? ? ? ? if (o === 1) { ? ? ? ? ? e = r[t - 1]; ? ? ? ? ? f += n[e >> 2]; ? ? ? ? ? f += n[e << 4 & 63]; ? ? ? ? ? f += "==" ? ? ? ? } else { ? ? ? ? ? if (o === 2) { ? ? ? ? ? ? e = (r[t - 2] << 8) + r[t - 1]; ? ? ? ? ? ? f += n[e >> 10]; ? ? ? ? ? ? f += n[e >> 4 & 63]; ? ? ? ? ? ? f += n[e << 2 & 63]; ? ? ? ? ? ? f += "=" ? ? ? ? ? } ? ? ? ? } ? ? ? ? i.push(f); ? ? ? ? return i.join("") ? ? ? } ? ? }, {}] ? }, {}, [])("/") });
字符串編碼
/** ?* utf8字符串轉(zhuǎn)為字節(jié)數(shù)組 同java中 String.getBytes(utf8Str) ?* @param utf8Str ?* @returns {[]} ?*/ var utf8StrToBytes = function (utf8Str) { ? ? var ens = encodeURIComponent(utf8Str); ? ? var es = unescape(ens); ? ? var esLen = es.length; ? ? // Convert ? ? var words = []; ? ? for (var i = 0; i < esLen; i++) { ? ? ? ? words[i] = es.charCodeAt(i); ? ? } ? ? return words; } /** ?* 字節(jié)數(shù)組轉(zhuǎn)為utf8字符串 ?同java中 new String(bytes) ?* @param bytesArray ?* @returns {string} ?*/ var bytesToUtf8Str = function (bytesArray) { ? ? var utf8Byte = bytesArray; ? ? var latin1Chars = []; ? ? for (var i = 0; i < utf8Byte.length; i++) { ? ? ? ? latin1Chars.push(String.fromCharCode(utf8Byte[i])); ? ? } ? ? return decodeURIComponent(escape(latin1Chars.join(''))); }
測(cè)試
base64.fromByteArray(utf8StrToBytes('打快點(diǎn)快點(diǎn)')) // 5omT5b+r54K55b+r54K5 //同Java中 org.apache.commons.codec Base64.encodeBase64String("打快點(diǎn)快點(diǎn)".getBytes()) // 5omT5b+r54K55b+r54K5
3. js中類(lèi)似java中byte強(qiáng)轉(zhuǎn)int類(lèi)型
/** ?* int 轉(zhuǎn) byte, js中int轉(zhuǎn)byte(-128—127) ?* @param i 整數(shù) ?*/ var intToByte = function(i) { ? var b = i & 0xFF; ? var c = 0; ? if (b >= 128) { ? ? c = b % 128; ? ? c = -1 * (128 - c); ? } else { ? ? c = b; ? } ? return c }
手把手教你js實(shí)現(xiàn)base64編碼規(guī)則
base64編碼是使用自己的編碼規(guī)則重新編碼ascii碼,原理是將3*8個(gè)字節(jié)用4*6去代替,將8字節(jié)劃分時(shí)會(huì)在前面添加2個(gè)0形成6位,最后不夠4個(gè)字節(jié)全補(bǔ)0。
base64也是基于64個(gè)可打印的字符來(lái)表示二進(jìn)制的數(shù)據(jù)的一種方法。
base64編碼表如下圖所示:
js實(shí)現(xiàn)代碼如下:
//2.加密、解密算法封裝: function Base64() { // private property _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; // public method for encoding this.encode = function (input) { var output = ""; var chr1, chr2, chr3, enc1, enc2, enc3, enc4; var i = 0; input = _utf8_encode(input); while (i < input.length) { chr1 = input.charCodeAt(i++); chr2 = input.charCodeAt(i++); chr3 = input.charCodeAt(i++); enc1 = chr1 >> 2; // &3表示只要chr1的后兩位 enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); enc4 = chr3 & 63; if (isNaN(chr2)) { enc3 = enc4 = 64; } else if (isNaN(chr3)) { enc4 = 64; } output = output + _keyStr.charAt(enc1) + _keyStr.charAt(enc2) + _keyStr.charAt(enc3) + _keyStr.charAt(enc4); } return output; } // public method for decoding this.decode = function (input) { var output = ""; var chr1, chr2, chr3; var enc1, enc2, enc3, enc4; var i = 0; input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); while (i < input.length) { enc1 = _keyStr.indexOf(input.charAt(i++)); enc2 = _keyStr.indexOf(input.charAt(i++)); enc3 = _keyStr.indexOf(input.charAt(i++)); enc4 = _keyStr.indexOf(input.charAt(i++)); chr1 = (enc1 << 2) | (enc2 >> 4); chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); chr3 = ((enc3 & 3) << 6) | enc4; output = output + String.fromCharCode(chr1); if (enc3 != 64) { output = output + String.fromCharCode(chr2); } if (enc4 != 64) { output = output + String.fromCharCode(chr3); } } output = _utf8_decode(output); return output; } // private method for UTF-8 encoding _utf8_encode = function (string) { string = string.replace(/\r\n/g,"\n"); var utftext = ""; for (var n = 0; n < string.length; n++) { var c = string.charCodeAt(n); if (c < 128) { utftext += String.fromCharCode(c); } else if((c > 127) && (c < 2048)) { utftext += String.fromCharCode((c >> 6) | 192); utftext += String.fromCharCode((c & 63) | 128); } else { utftext += String.fromCharCode((c >> 12) | 224); utftext += String.fromCharCode(((c >> 6) & 63) | 128); utftext += String.fromCharCode((c & 63) | 128); } } return utftext; } // private method for UTF-8 decoding _utf8_decode = function (utftext) { var string = ""; var i = 0; var c = c1 = c2 = 0; while ( i < utftext.length ) { c = utftext.charCodeAt(i); if (c < 128) { string += String.fromCharCode(c); i++; } else if((c > 191) && (c < 224)) { c2 = utftext.charCodeAt(i+1); string += String.fromCharCode(((c & 31) << 6) | (c2 & 63)); i += 2; } else { c2 = utftext.charCodeAt(i+1); c3 = utftext.charCodeAt(i+2); string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); i += 3; } } return string; } } const base64 = new Base64() console.log(base64.encode('1ab')); console.log(base64.decode('MWE='));
二進(jìn)制3*8位轉(zhuǎn)4*6參考下圖:
- 1.先來(lái)看看encode實(shí)現(xiàn)原理,首先是獲取ascii碼值,第一個(gè)字節(jié)001100是1在ascii碼中是49,二進(jìn)制是110001,此時(shí)在前面新增00得到00110001,第一個(gè)字節(jié)是110001右移兩位得到001100。
- 2.我們看看第二個(gè)碼010110,它是由第一個(gè)字節(jié)110001的后兩位(&3)和第二個(gè)字節(jié)1100001的前四位(>>4)共同構(gòu)成。
- 3.第三個(gè)碼000101,它是由第二個(gè)字節(jié)1100001后四位(&15)和第三個(gè)字節(jié)的前兩位(>>6)。
- 4.第四個(gè)碼100010,它是由第三個(gè)字節(jié)1100010的后六位(&63)構(gòu)成。
解碼的操作跟這個(gè)剛好相反,大家可以試試。
1ab 110001 1100001 1100010 49 97 98 00110001 01100001 01100010(補(bǔ)成8位,劃分成6位,高位補(bǔ)2個(gè)0) 001100 010110 000101 100010 (開(kāi)始劃分成4個(gè),不夠補(bǔ)0) 12 22 5 34 MWFi
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條并分頁(yè)顯示(zepto.js)
這篇文章主要為大家詳細(xì)介紹了scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條并分頁(yè)顯示示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12js實(shí)現(xiàn)兼容性好的微軟官網(wǎng)導(dǎo)航下拉菜單效果
這篇文章主要介紹了js實(shí)現(xiàn)兼容性好的微軟官網(wǎng)導(dǎo)航下拉菜單效果,涉及JavaScript基于鼠標(biāo)事件實(shí)現(xiàn)頁(yè)面樣式變換的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09javascript游戲開(kāi)發(fā)之《三國(guó)志曹操傳》零部件開(kāi)發(fā)(五)可移動(dòng)地圖的實(shí)現(xiàn)
首先來(lái)說(shuō),我對(duì)游戲開(kāi)發(fā)可以算是不怎么深入,因?yàn)楝F(xiàn)在的程序員愛(ài)用canvas,我卻就只會(huì)拿幾個(gè)div湊和。不過(guò)沒(méi)關(guān)系,因?yàn)樽龀鰜?lái)的同樣是游戲。哈!廢話最近有點(diǎn)多,感興趣的朋友可以了解下2013-01-01關(guān)于JS數(shù)據(jù)類(lèi)型檢測(cè)的多種方式總結(jié)
Javascript中檢查數(shù)據(jù)類(lèi)型一直是老生常談的問(wèn)題,類(lèi)型判斷在web開(kāi)發(fā)中也有著非常廣泛的應(yīng)用,所以下面這篇文章主要給大家介紹了關(guān)于JS數(shù)據(jù)類(lèi)型檢測(cè)的那些事,需要的朋友可以參考下2021-09-09js點(diǎn)擊文本框后才加載驗(yàn)證碼實(shí)例代碼
這篇文章是一段關(guān)于js點(diǎn)擊文本框后才加載驗(yàn)證碼實(shí)例代碼,而不是直接顯示驗(yàn)證碼,感興趣的小伙伴們可以參考一下2015-10-10javascript實(shí)現(xiàn)判斷鼠標(biāo)的狀態(tài)
這篇文章主要介紹了javascript實(shí)現(xiàn)判斷鼠標(biāo)的狀態(tài)的相關(guān)代碼,十分簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下。2015-07-07JavaScript基于inquirer封裝一個(gè)控制臺(tái)文件選擇器
這篇文章主要介紹了JavaScript基于inquirer封裝一個(gè)控制臺(tái)文件選擇器,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下2022-08-08javascript巧用eval函數(shù)組裝表單輸入項(xiàng)為json對(duì)象的方法
這篇文章主要介紹了javascript巧用eval函數(shù)組裝表單輸入項(xiàng)為json對(duì)象的方法,實(shí)例分析了JavaScript使用eval函數(shù)動(dòng)態(tài)構(gòu)造json對(duì)象的相關(guān)技巧,需要的朋友可以參考下2015-11-11