一直以来很多人使用到 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 有效