js实现base64编码与解码(原生js)

一直以来很多人使用到 JavaScript 进行 base64 编码解码时都是使用的 Base64.js，但事实上，浏览器很早就原生支持 base64 的编码与解码了

以前的方式

　　编码：

<javascript src="/base64.js"></javascript>
<javascript>
     Base64.encode('xiaomabuhei');
     // 返回：'eGlhb21hYnVoZWk='
</javascript>

　　解码：

<javascript src="/base64.js"></javascript>
<javascript>
    Base64.decode('eGlhb21hYnVoZWk=');
    // 返回：'xiaomabuhei'
</javascript>

 

而浏览器的原生支持的编码与解码

　　编码：

// 浏览器中
var decodedData = window.atob(encodedData);

// 或者（浏览器或js Worker线程中）：
var decodedData = self.atob(encodedData);

// 例如：
window.atob('eGlhb21hYnVoZWk=');
// 返回：'xiaomabuhei'

　　解码：

// 浏览器中：
var encodedData = window.btoa(stringToEncode);

// 或者（浏览器或js Worker线程中）：
var encodedData = self.btoa(stringToEncode);

//例如：
window.btoa('xiaomabuhei');
// 返回：'eGlhb21hYnVoZWk='

　　遇到中文编码需要先做一次 URI 组件编码或对解码后的内容进行 URI 解码（可以用，因为encodeURIComponent会将中文编码，就不会超出btoa的范围了，但并不是最推荐的方式）

window.btoa(window.encodeURIComponent('小马不黑'))
// 返回  "JUU1JUIwJThGJUU5JUE5JUFDJUU0JUI4JThEJUU5JUJCJTkx"

window.decodeURI(atob('JUU1JUIwJThGJUU5JUE5JUFDJUU0JUI4JThEJUU5JUJCJTkx'))
// 返回  "小马不黑"

　　对于中文等字符编码超出了 0xff  的内容来说，合理的方式应该是使用  TextEncoder 和  TextDecoder 在 UTF-8 和字符串的单字节表示之间进行转换：

此处感谢评论区朋友指出问题

// MDN base64转换用例 https://developer.mozilla.org/zh-CN/docs/Glossary/Base64#unicode_%E9%97%AE%E9%A2%98

function base64ToBytes(base64) {
  const binString = atob(base64);
  return Uint8Array.from(binString, (m) => m.codePointAt(0));
}

function bytesToBase64(bytes) {
  const binString = Array.from(bytes, (byte) =>
    String.fromCodePoint(byte),
  ).join("");
  return btoa(binString);
}

// 用法
bytesToBase64(new TextEncoder().encode("a Ā 𐀀 文 🦄")); // "YSDEgCDwkICAIOaWhyDwn6aE"
new TextDecoder().decode(base64ToBytes("YSDEgCDwkICAIOaWhyDwn6aE")); // "a Ā 𐀀 文 🦄"

 

　　针对 IE8 IE9 的兼容使用 polyfill

<!--[if IE]>
<script src="./base64-polyfill.js"></script>
<![endif]-->

　　polyfill 请转移至 base-polyfill 

 

借助  FileReader  对象和  readAsDataURL  方法，我们可以把任意的文件转换为Base64 Data-URI。假设我们的文件对象是file，则转换的JavaScript代码如下：

var reader = new FileReader();
reader.onload = function(e) {
  // e.target.result就是该文件的完整Base64 Data-URI
};
reader.readAsDataURL(file);

　　

读取的有以下方法可用：（IE请使用 ActiveXObject 对象操作文件）

reader.abort()                         // 取消文件读取操作
reader.readAsArrayBuffer()      // 返回一个 ArrayBuffer 的数据对象
reader.readAsBinaryString()     // 返回原始二进制数据内容 （实验性的api）
reader.readAsDataURL()          // 返回 base64 内容
reader.readAsText()                // 返回文本内容
// 上述方法皆对于 file 或 blob 有效