js中關(guān)于base64編碼的問題
更新時(shí)間：2023年02月08日 09:19:42 作者：分享心得
這篇文章主要介紹了js中關(guān)于base64編碼的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
關(guān)于base64編碼的問題
1. 使用 Buffer對象
Buffer.from(JSON.stringify(jwtHeader)).toString('base64')2. 使用base64js.js
/**
?* base64js ?Uint8Array 8位無符號(hào)整數(shù)，長度1個(gè)字節(jié),
?* base64js.byteLength(base64Str) ? base64字符串轉(zhuǎn)為字節(jié)數(shù)組的長度
?* 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('')));
}測試
base64.fromByteArray(utf8StrToBytes('打快點(diǎn)快點(diǎn)')) // 5omT5b+r54K55b+r54K5
//同Java中 org.apache.commons.codec
Base64.encodeBase64String("打快點(diǎn)快點(diǎn)".getBytes()) // 5omT5b+r54K55b+r54K53. js中類似java中byte強(qiáng)轉(zhuǎn)int類型
/**
?* 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è)可打印的字符來表示二進(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.先來看看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 （開始劃分成4個(gè)，不夠補(bǔ)0） 12 22 5 34 MWFi
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)Iterator模式實(shí)例分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)Iterator模式,實(shí)例分析了Iterator模式的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-06-06
在前端開發(fā)中，有時(shí)候我們需要判斷一個(gè)元素是否在可視區(qū)域內(nèi)，本文主要介紹了js如何對元素可視區(qū)域進(jìn)行判定，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
本文這里給大家總結(jié)了一些常用的javascript方法，都是些短小精悍的小代碼，提高執(zhí)行效率，這里推薦給大家。2015-02-02
等待控件在網(wǎng)上搜有好多種，但是都很復(fù)雜，不一定用的順手，再說我的項(xiàng)目是bootstrap的原因，又不敢輕易使用第三方控件，怕不兼容，于是自己動(dòng)手寫了個(gè)等待控件，有需要的朋友可以參考下2015-10-10
基于JavaScript實(shí)現(xiàn)除夕煙花秀與隨機(jī)祝福語
新年即將來臨，本文將為大家介紹一個(gè)基于JavaScript實(shí)現(xiàn)的頁面特效：煙花秀+春節(jié)隨機(jī)祝福語。文中的示例代碼講解詳細(xì)，感興趣的可以了解一下2022-01-01
js刪除對象中的某一個(gè)字段的方法實(shí)現(xiàn)
這篇文章主要介紹了js刪除對象中的某一個(gè)字段的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
js 限制數(shù)字 js限制輸入實(shí)現(xiàn)代碼
在工作中經(jīng)常會(huì)遇到j(luò)s限制輸入方面的要求，本文將詳細(xì)介紹其實(shí)現(xiàn)原理，需要的朋友可以參考下2012-12-12
基于JavaScript實(shí)現(xiàn)拖動(dòng)滑塊效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)拖動(dòng)滑塊效果，拖動(dòng)滑塊時(shí)數(shù)字進(jìn)行變化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
js前端加載超大圖片(100M以上)實(shí)現(xiàn)秒開的最佳解決方案
前端加載超大圖片時(shí),一般可以采取圖片壓縮,圖片分割,預(yù)加載等措施,而對于幾百M(fèi)或上G的大圖而言,不管對圖片進(jìn)行怎么優(yōu)化或加速處理,要實(shí)現(xiàn)秒開也是不太可能的事情,所以本文小編將給大家介紹如何對大圖進(jìn)行分割,在前端進(jìn)行拼接實(shí)現(xiàn)秒開,需要的朋友可以參考下2023-10-10
配置eslint規(guī)范項(xiàng)目代碼風(fēng)格
這篇文章主要介紹了配置eslint規(guī)范項(xiàng)目代碼風(fēng)格，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03