背景：
公司需要对接第三方的合作商，需要跳转至对方的网站，使用get请求访问对方链接直接跳转，get请求会直接暴露登陆的用户名和密码，我们采用base64编码，对用户信息进行保护。
常用的base64转换，有三种方法：①使用第三方插件（或者，他人写好的编码和解码）；②游览器就原生提供的base64编码与解码的方法；③node中自带的base64编码与解码的方法。
一、js实现基于base64的编码与解码
1.使用第三方插件
推荐两个第三方的开源插件，引用到项目中就可以直接使用：
①使用jquery的base64.js，在/beatgammit/base64-js 项目中进行下载base64.js；
②开源的base64.js（/dankogai/js-base64），使用很简单，游览器引入该JS文件即可：
Base64.encode('china is so nb'); // 编码"Y2hpbmEgaXMgc28gbmI="
Base64.decode("Y2hpbmEgaXMgc28gbmI="); // 解码'china is so nb'
③借鉴他人的方法，在项目中引入成公共的方法，方便调用：
var 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}}
使用方法如下：
也可以对对象进行编码，编码前将对象转换成字符串就行：
2.window自带函数进行base64编码与解码
从IE10+游览器开始，所有的游览器就原生提供了Base64编码与解码的方法，不仅可以用于游览器环境，Service Worker环境也可以使用。
①方法名就是atob和btoa，具体语法如下：
window.btoa('china is so nb') // 编码"Y2hpbmEgaXMgc28gbmI="window.atob("Y2hpbmEgaXMgc28gbmI=") // 解码"china is so nb"
②但是，这两个函数并不支持Unicode字符串的编码，许结合encodeURIComponent、decodeURIComponent函数来使用。
③IE8/IE9的polyfill
如有，有PC项目需要兼容IE9，那我们可以专门针对这些游览器再引入一段ployfill脚本或者一个JS文件即可。
<!--[if IE]><script src="/wordpress//08/js-base64-atob-btoa-encode-decode/base64-polyfill.js"></script><![endif]-->
3.node中自带的base64编码与解码的方法
node中自带的base64的编码与解码分为三种：普通字符串、十六进制、图片。
①普通字符串
//编码new Buffer(String).toString('base64');//解码new Buffer(base64Str, 'base64').toString();
②十六进制Hex
//编码new Buffer(String, 'base64').toString('hex');//解码new Buffer(base64Str, 'hex').toString('utf8');
③图片
const fs = require('fs');//编码function base64_encode(file) {let bitmap = fs.readFileSync(file);return new Buffer(bitmap).toString('base64');}//解码function base64_decode(base64str, file) {var bitmap = new Buffer(base64str, 'base64');fs.writeFileSync(file, bitmap);}
二、base64编码的实际运用
图片base64编码
前端在实现页面时，对于一些简单图片，通常会选择将图片内容直接内嵌在页面中，比吗不必要的外部资源加载，增大页面加载时间，但是图片数据是二进制数据，该怎么嵌入呢？绝大多数现代游览器都支持一种名为Data URL的特性，允许使用base64对图片或其他文件的二进制数据进行编码，将其作为文本字符串嵌入网页中。
例如：我们可以将本地一张图片进行base64编码后（推荐一个在线图片转换工具：/ ），其编码结果如下：
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJQAAACRCAYAAAAl8ZFnAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJ0SURBVHhe7dYxalRRFIBhl+AKXEzqNNZuwzKNnVZTBRtJkyUELCysBRtxHdM9El5k4MkLpMhwYQb8rd5XfN053c+599U0TQtUBEVKUKQERUpQpARFSlCkBEVKUKQERUpQpARFSlCkBEVKUKQERUpQpARFSlCkBEVKUKQERUpQpARFSlCkBEVKUKQERUpQpARFSlCkBEVKUKQERUpQpARFSlCkBEVKUKQERWrzQd3//rXMtzdP7n/+GM5wvk0HNV/vluXN6xf+XL0fznKezQa1XqbjmJ49fL0b7nDaZoMaXadnjx8/DHc4bbNBrdGMYlqt/6nRDqcJ6sjh8mKZ9vvhDqcJ6ojn7t8ISlApQQkqJShBpQQlqJSgBJUSlKBSghJUSlCCSglKUClBCSolKEGlBCWolKAElRKUoFKCElRKUIJKCUpQKUEJKiUoQaUEJaiUoASVEpSgUoISVEpQgkoJSlApQQkqJShBpQQlqJSgBJUSlKBSghJUSlCCSglKUClBCSolKEGlBCWolKAElRKUoFKCElRKUIJKCUpQKUEJKiUoQaUEJaiUoASVEpSgUoISVEpQgkoJSlApQQkqJShBpQQlqJSgBJUSlKBSghJUSlCCSglKUClBCSolKEGlBCWolKAElRKUoFKCElRqu0HtPgnqP9hsUA/fvw2Dmm9vhvOcZ7NBrQ7v3r6I6XB5sUz7/XCW82w6qNX85fPTMzdf78QU2HxQtARFSlCkBEVKUKQERUpQpARFSlCkBEVKUKQERUpQpARFSlCkBEVKUKQERUpQpARFSlCkBEVKUKQERUpQpARFSlCkBEVKUKQERUpQhKblL8jJczAt5hHJAAAAAElFTkSuQmCC
读者可将此Data URL复制到游览器地址栏试一下，发现可以解析出此图片。
用此方式可以将图片直接内嵌到网页中：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJQAAACRCA..."/>
参考博客：
①js实现基于base64的编码与解码 /weixin_42420703/article/details/81384901
②用js进行base64编码、解码 /p/14437764eff3
③js实现base64转换 /lxz123/p/12883751.html
④js中base64编码解码----兼容IE游览器 /qq_34039868/article/details/103919535?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_title~default-0.essearch_pc_relevant&spm=1001.2101.3001.4242
⑤js实现base64编码的相互转换 /libra0920/p/6690274.html
