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 解碼

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

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

　　針對 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 有效