瀏覽器中的原生base64方法

1100001001發表於2022-07-12
瀏覽器

在web開發中，經常涉及到對文字、檔案等進行base64編碼處理，在之前的開發中，使用js-base64來進行處理，但其實瀏覽器已經原生包含了處理方法。效能更好，相容性也更高。

atob() - ASCII to Binary

base64編碼的ASCII字串轉為二進位制字串
語法：

// 瀏覽器上下文中
var encodeData = window.btoa(someString)
// js Worker 執行緒
var encodeData = self.btoa(someString)

示例：

window.btoa('someString')
// 返回 c29tZVN0cmluZw==

btoa() - Binary to ASCII

二進位制資料字串轉為base64編碼的ASCII字串
語法：

// 瀏覽器上下文中
var decodeData = window.atob(someString)
// js Worker 執行緒
var decodeData = self.atob(someString)

示例：

window.atob('c29tZVN0cmluZw==')
// 返回 someString

中文內容的處理

如果直接編碼中文，會出現報錯

window.btoa('一些字串')

報錯：
因為很明顯中文超出了Latin1的語言集範圍

Latin1是ISO-8859-1的別名，有些環境下寫作Latin-1。ISO-8859-1編碼是單位元組編碼，向下相容ASCII，其編碼範圍是0x00-0xFF，0x00-0x7F之間完全和ASCII一致，0x80-0x9F之間是控制字元，0xA0-0xFF之間是文字元號。

image

中文內容的二次編碼

btoa(encodeURIComponent('一些字串'))
// 返回 JUU0JUI4JTgwJUU0JUJBJTlCJUU1JUFEJTk3JUU3JUFDJUE2JUU0JUI4JUIy
decodeURIComponent(atob('JUU0JUI4JTgwJUU0JUJBJTlCJUU1JUFEJTk3JUU3JUFDJUE2JUU0JUI4JUIy'))
// 返回 一些字串

中文內容的三次編碼

二次編碼的問題是字母全部為大寫，且轉換後字串長度比較長，這個問題通過使用escape三次編碼可以解決，長度更短更美觀

btoa(unescape(encodeURIComponent('一些字串')))
// 返回 5LiA5Lqb5a2X56ym5Liy
decodeURIComponent(escape(atob('5LiA5Lqb5a2X56ym5Liy')))
// 返回 一些字串

相容性

image

檔案的base64編碼

藉助FileReader物件和readAsDataURL方法，我們可以把任意檔案轉為Base64 Data-URI。假設我們的檔案物件是file，則轉換的JavaScript程式碼如下：

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

相關文章