日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
一文讀懂Base64

本文轉(zhuǎn)載自微信公眾號(hào)「全棧修仙之路」，作者阿寶哥。轉(zhuǎn)載本文請(qǐng)聯(lián)系全棧修仙之路公眾號(hào)。

一、為什么要使用 base64

我們知道一個(gè)字節(jié)可表示的范圍是 0 ～ 255(十六進(jìn)制：0x00 ～ 0xFF)， 其中 ASCII 值的范圍為 0 ～ 127(十六進(jìn)制：0x00 ～ 0x7F);而超過 ASCII 范圍的 128～255(十六進(jìn)制：0x80 ～ 0xFF)之間的值是不可見字符。

ASCII(American Standard Code for Information Interchange，美國(guó)信息交換標(biāo)準(zhǔn)代碼)是基于拉丁字母的一套電腦編碼系統(tǒng)。它主要用于顯示現(xiàn)代英語，而其擴(kuò)展版本延伸美國(guó)標(biāo)準(zhǔn)信息交換碼則可以部分支持其他西歐語言，并等同于國(guó)際標(biāo)準(zhǔn) ISO/IEC 646。

在 ASCII 碼中 0 - 31和 127 是控制字符，共 33 個(gè)。以下是其中一部分控制字符：

其余 95 個(gè)，即 32 - 126 是可打印字符，包括數(shù)字、大小寫字母、常用符號(hào)等。

當(dāng)不可見字符在網(wǎng)絡(luò)上傳輸時(shí)，比如說從 A 計(jì)算機(jī)傳到 B 計(jì)算機(jī)，往往要經(jīng)過多個(gè)路由設(shè)備，由于不同的設(shè)備對(duì)字符的處理方式有一些不同，這樣那些不可見字符就有可能被處理錯(cuò)誤，這是不利于傳輸?shù)摹?/p>

為了解決這個(gè)問題，我們可以先對(duì)數(shù)據(jù)進(jìn)行編碼，比如 base64 編碼，變成可見字符，也就是 ASCII 碼可表示的可見字符，從而確保數(shù)據(jù)可靠傳輸。Base64 的內(nèi)容是有 0 ～ 9，a ～ z，A ～ Z，+，/ 組成，正好 64 個(gè)字符，這些字符是在 ASCII 可表示的范圍內(nèi)，屬于 95 個(gè)可見字符的一部分。

二、什么是 base64

Base64 是一種基于 64 個(gè)可打印字符來表示二進(jìn)制數(shù)據(jù)的表示方法。由于 2? = 64 ，所以每 6 個(gè)比特為一個(gè)單元，對(duì)應(yīng)某個(gè)可打印字符。3 個(gè)字節(jié)有 24 個(gè)比特，對(duì)應(yīng)于 4 個(gè) base64 單元，即 3 個(gè)字節(jié)可由 4 個(gè)可打印字符來表示。相應(yīng)的轉(zhuǎn)換過程如下圖所示：

Base64 常用于在處理文本數(shù)據(jù)的場(chǎng)合，表示、傳輸、存儲(chǔ)一些二進(jìn)制數(shù)據(jù)，包括 MIME 的電子郵件及 XML 的一些復(fù)雜數(shù)據(jù)。在 MIME 格式的電子郵件中，base64 可以用來將二進(jìn)制的字節(jié)序列數(shù)據(jù)編碼成 ASCII 字符序列構(gòu)成的文本。使用時(shí)，在傳輸編碼方式中指定 base64。使用的字符包括大小寫拉丁字母各 26 個(gè)、數(shù)字 10 個(gè)、加號(hào) + 和斜杠 /，共 64 個(gè)字符，等號(hào) = 用來作為后綴用途。Base64 相應(yīng)的索引表如下：

了解完上述的知識(shí)，我們以編碼 Man 字符串為例，來直觀的感受一下編碼過程。Man 由 M、a 和 n 3 個(gè)字符組成，它們對(duì)應(yīng)的 ASCII 碼為 77、97 和 110。

接著我們以每 6 個(gè)比特為一個(gè)單元，進(jìn)行 base64 編碼操作，具體如下圖所示：

由圖可知，Man (3字節(jié))編碼的結(jié)果為 TWFu(4字節(jié))，很明顯經(jīng)過 base64 編碼后體積會(huì)增加 1/3。Man 這個(gè)字符串的長(zhǎng)度剛好是 3，我們可以用 4 個(gè) base64 單元來表示。但如果待編碼的字符串長(zhǎng)度不是 3 的整數(shù)倍時(shí)，應(yīng)該如何處理呢?

如果要編碼的字節(jié)數(shù)不能被 3 整除，最后會(huì)多出 1 個(gè)或 2 個(gè)字節(jié)，那么可以使用下面的方法進(jìn)行處理：先使用 0 字節(jié)值在末尾補(bǔ)足，使其能夠被 3 整除，然后再進(jìn)行 base64 的編碼。

以編碼字符 A 為例，其所占的字節(jié)數(shù)為 1，不能被 3 整除，需要補(bǔ) 2 個(gè)字節(jié)，具體如下圖所示：

由上圖可知，字符 A 經(jīng)過 base64 編碼后的結(jié)果是 QQ==，該結(jié)果后面的兩個(gè) = 代表補(bǔ)足的字節(jié)數(shù)。而最后個(gè) 1 個(gè) base64 字節(jié)塊有 4 位是 0 值。

接著我們來看另一個(gè)示例，假設(shè)需編碼的字符串為 BC，其所占字節(jié)數(shù)為 2，不能被 3 整除，需要補(bǔ) 1 個(gè)字節(jié)，具體如下圖所示：

由上圖可知，字符串 BC 經(jīng)過 base64 編碼后的結(jié)果是 QkM=，該結(jié)果后面的 1 個(gè) = 代表補(bǔ)足的字節(jié)數(shù)。而最后個(gè) 1 個(gè) base64 字節(jié)塊有 2 位是 0 值。

三、base64 編碼的應(yīng)用

3.1 顯示 base64 編碼的圖片

在編寫 HTML 網(wǎng)頁時(shí)，對(duì)于一些簡(jiǎn)單圖片，通常會(huì)選擇將圖片內(nèi)容直接內(nèi)嵌在網(wǎng)頁中，從而減少不必要的網(wǎng)絡(luò)請(qǐng)求，但是圖片數(shù)據(jù)是二進(jìn)制數(shù)據(jù)，該怎么嵌入呢?絕大多數(shù)現(xiàn)代瀏覽器都支持一種名為 Data URLs 的特性，允許使用 base64 對(duì)圖片或其他文件的二進(jìn)制數(shù)據(jù)進(jìn)行編碼，將其作為文本字符串嵌入網(wǎng)頁中。

Data URLs 由四個(gè)部分組成：前綴(data:)、指示數(shù)據(jù)類型的 MIME 類型、如果非文本則為可選的 base64 標(biāo)記、數(shù)據(jù)本身：

 
 
 
 
    
  
  
  
  
  1. data:[][;base64],
    2.

mediatype 是個(gè) MIME 類型的字符串，例如 "image/jpeg" 表示 JPEG 圖像文件。如果被省略，則默認(rèn)值為 text/plain;charset=US-ASCII。如果數(shù)據(jù)是文本類型，你可以直接將文本嵌入(根據(jù)文檔類型，使用合適的實(shí)體字符或轉(zhuǎn)義字符)。如果是二進(jìn)制數(shù)據(jù)，你可以將數(shù)據(jù)進(jìn)行 base64 編碼之后再進(jìn)行嵌入。比如嵌入一張圖片：

 
 
 
 
    
  
  
  
  
    2.

MIME(Multipurpose Internet Mail Extensions)多用途互聯(lián)網(wǎng)郵件擴(kuò)展類型，是設(shè)定某種擴(kuò)展名的文件用一種應(yīng)用程序來打開的方式類型，當(dāng)該擴(kuò)展名文件被訪問的時(shí)候，瀏覽器會(huì)自動(dòng)使用指定應(yīng)用程序來打開。多用于指定一些客戶端自定義的文件名，以及一些媒體文件打開方式。

常見的 MIME 類型有：超文本標(biāo)記語言文本 .html text/html、PNG圖像 .png image/png、普通文本 .txt text/plain 等。

但需要注意的是：如果圖片較大，圖片的色彩層次比較豐富，則不適合使用這種方式，因?yàn)樵搱D片經(jīng)過 base64 編碼后的字符串非常大，會(huì)明顯增大 HTML 頁面的大小，從而影響加載速度。 除此之外，利用 HTML FileReader API，我們也可以方便的實(shí)現(xiàn)圖片本地預(yù)覽功能，具體代碼如下：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
    3. 
  
  
  
  
  3. 
  
  
  
  
  4. 在完成本地圖片預(yù)覽之后，
    5.

在完成本地圖片預(yù)覽之后，可以直接把圖片對(duì)應(yīng)的 Data URLs 數(shù)據(jù)提交到服務(wù)器。針對(duì)這種情形，服務(wù)端需要做一些相關(guān)處理，才能正常保存上傳的圖片，這里以 Express 為例，具體處理代碼如下：

 
 
 
 
    
  
  
  
  
  1. const app = require('express')();
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. app.post('/upload', function(req, res){
    4. 
  
  
  
  
  4.   let imgData = req.body.imgData; // 獲取POST請(qǐng)求中的base64圖片數(shù)據(jù)
    5. 
  
  
  
  
  5.   let base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
    6. 
  
  
  
  
  6.   let dataBuffer = Buffer.from(base64Data, 'base64');
    7. 
  
  
  
  
  7.   fs.writeFile("image.png", dataBuffer, function(err) {
    8. 
  
  
  
  
  8.     if(err){
    9. 
  
  
  
  
  9.        res.send(err);
    10. 
  
  
  
  
  10.     }else{
    11. 
  
  
  
  
  11.        res.send("圖片上傳成功！");
    12. 
  
  
  
  
  12.     }
    13. 
  
  
  
  
  13.     });
    14. 
  
  
  
  
  14. });
    15.

3.2 瀏覽器端圖片壓縮

在一些場(chǎng)合中，我們希望在上傳本地圖片時(shí)，先對(duì)圖片進(jìn)行一定的壓縮，然后再提交到服務(wù)器，從而減少傳輸?shù)臄?shù)據(jù)量。在前端要實(shí)現(xiàn)圖片壓縮，我們可以利用 Canvas 對(duì)象提供的 toDataURL() 方法，該方法接收 type 和 encoderOptions 兩個(gè)可選參數(shù)。

其中 type 表示圖片格式，默認(rèn)為 image/png。而 encoderOptions 用于表示圖片的質(zhì)量，在指定圖片格式為 image/jpeg 或 image/webp 的情況下，可以從 0 到 1 的區(qū)間內(nèi)選擇圖片的質(zhì)量。如果超出取值范圍，將會(huì)使用默認(rèn)值 0.92，其他參數(shù)會(huì)被忽略。

下面我們來看一下具體如何實(shí)現(xiàn)圖片壓縮：

 
 
 
 
    
  
  
  
  
  1. // compress.js
    2. 
  
  
  
  
  2. const MAX_WIDTH = 800; // 圖片最大寬度
    3. 
  
  
  
  
  3. 
  
  
  
  
  4. function compress(base64, quality, mimeType) {
    5. 
  
  
  
  
  5.   let canvas = document.createElement("canvas");
    6. 
  
  
  
  
  6.   let img = document.createElement("img");
    7. 
  
  
  
  
  7.   img.crossOrigin = "anonymous";
    8. 
  
  
  
  
  8.   return new Promise((resolve, reject) => {
    9. 
  
  
  
  
  9.     img.src = base64;
    10. 
  
  
  
  
  10.     img.onload = () => {
    11. 
  
  
  
  
  11.       let targetWidth, targetHeight;
    12. 
  
  
  
  
  12.       if (img.width > MAX_WIDTH) {
    13. 
  
  
  
  
  13.         targetWidth = MAX_WIDTH;
    14. 
  
  
  
  
  14.         targetHeight = (img.height * MAX_WIDTH) / img.width;
    15. 
  
  
  
  
  15.       } else {
    16. 
  
  
  
  
  16.         targetWidth = img.width;
    17. 
  
  
  
  
  17.         targetHeight = img.height;
    18. 
  
  
  
  
  18.       }
    19. 
  
  
  
  
  19.       canvas.width = targetWidth;
    20. 
  
  
  
  
  20.       canvas.height = targetHeight;
    21. 
  
  
  
  
  21.       let ctx = canvas.getContext("2d");
    22. 
  
  
  
  
  22.       ctx.clearRect(0, 0, targetWidth, targetHeight);
    23. 
  
  
  
  
  23.       ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    24. 
  
  
  
  
  24.       let imageData = canvas.toDataURL(mimeType, quality / 100);
    25. 
  
  
  
  
  25.       resolve(imageData);
    26. 
  
  
  
  
  26.     };
    27. 
  
  
  
  
  27.   });
    28. 
  
  
  
  
  28. }
    29.

對(duì)于返回的 Data URL 格式的圖片數(shù)據(jù)，為了進(jìn)一步減少傳輸?shù)臄?shù)據(jù)量，我們可以把它轉(zhuǎn)換為 Blob 對(duì)象：

 
 
 
 
    
  
  
  
  
  1. function dataUrlToBlob(base64, mimeType) {
    2. 
  
  
  
  
  2.   let bytes = window.atob(base64.split(",")[1]);
    3. 
  
  
  
  
  3.   let ab = new ArrayBuffer(bytes.length);
    4. 
  
  
  
  
  4.   let ia = new Uint8Array(ab);
    5. 
  
  
  
  
  5.   for (let i = 0; i < bytes.length; i++) {
    6. 
  
  
  
  
  6.     ia[i] = bytes.charCodeAt(i);
    7. 
  
  
  
  
  7.   }
    8. 
  
  
  
  
  8.   return new Blob([ab], { type: mimeType });
    9. 
  
  
  
  
  9. }
    10.

在轉(zhuǎn)換完成后，我們就可以壓縮后的圖片對(duì)應(yīng)的 Blob 對(duì)象封裝在 FormData 對(duì)象中，然后再通過 AJAX 提交到服務(wù)器上：

 
 
 
 
    
  
  
  
  
  1. function uploadFile(url, blob) {
    2. 
  
  
  
  
  2.   let formData = new FormData();
    3. 
  
  
  
  
  3.   let request = new XMLHttpRequest();
    4. 
  
  
  
  
  4.   formData.append("image", blob);
    5. 
  
  
  
  
  5.   request.open("POST", url, true);
    6. 
  
  
  
  
  6.   request.send(formData);
    7. 
  
  
  
  
  7. }
    8.

其實(shí) Canvas 對(duì)象除了提供 toDataURL() 方法之外，它還提供了一個(gè) toBlob() 方法，該方法的語法如下：

 
 
 
 
    
  
  
  
  
  1. canvas.toBlob(callback, mimeType, qualityArgument)
    2.

和 toDataURL() 方法相比，toBlob() 方法是異步的，因此多了個(gè) callback 參數(shù)，這個(gè) callback 回調(diào)方法默認(rèn)的第一個(gè)參數(shù)就是轉(zhuǎn)換好的 blob 文件信息。

介紹完上述的內(nèi)容，我們來看一下本地圖片壓縮完整的示例：

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2. 
  
  
  
  
  3.   
    4. 
  
  
  
  
  4.     
    5. 
  
  
  
  
  5.     
    6. 
  
  
  
  
  6.     本地圖片壓縮
    7. 
  
  
  
  
  7.   
    8. 
  
  
  
  
  8.   
    9. 
  
  
  
  
  9.     
    10. 
  
  
  
  
  10.     
    11. 
  
  
  
  
  11.     
    12. 
  
  
  
  
  12.   
    13. 
  
  
  
  
  13.

四、如何進(jìn)行 base64 編碼和解碼

4.1 使用 btoa 與 atob 函數(shù)

在 JavaScript 中，有兩個(gè)函數(shù)被分別用來處理解碼和編碼 base64 字符串：

  • btoa()：從字符串創(chuàng)建一個(gè) base64 編碼的 ASCII 字符串，其中字符串中的每個(gè)字符都被視為一個(gè)二進(jìn)制數(shù)據(jù)字節(jié)。
  • atob()：該函數(shù)能夠解碼通過 base64 編碼的字符串?dāng)?shù)據(jù)。

btoa 使用示例

 
 
 
 
    
  
  
  
  
  1. const name = 'Semlinker';
    2. 
  
  
  
  
  2. const encodedName = btoa(name);
    3. 
  
  
  
  
  3. console.log(encodedName); // U2VtbGlua2Vy
    4.

atob 使用示例

 
 
 
 
    
  
  
  
  
  1. const encodedName = 'U2VtbGlua2Vy';
    2. 
  
  
  
  
  2. const name = atob(encodedName);
    3. 
  
  
  
  
  3. console.log(name); // Semlinker
    4.

介紹完 btoa 和 atob 這兩個(gè)函數(shù)，我們?cè)賮砜匆幌滤鼈兊募嫒菪裕?/p>

(圖片來源 —— https://caniuse.com/?search=atob)

由上圖可知，除了 IE6-9 和 Opera 10.1 這些版本的瀏覽器之外，主流的瀏覽器都支持 btoa 和 atob 這兩個(gè)函數(shù)。

4.2 使用第三方庫(kù)

對(duì)于不支持 btoa 和 atob 這兩個(gè)函數(shù)的瀏覽器來說，我們可以使用第三方庫(kù)，比如 js-base64 這個(gè)庫(kù)，來實(shí)現(xiàn) base64 的編碼和解碼。

具體的使用示例如下：

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
    3. 
  
  
  
  
  3.   
    4. 
  
  
  
  
  4.     
    5. 
  
  
  
  
  5.     
    6. 
  
  
  
  
  6.     Base64 編碼與解碼示例
    7. 
  
  
  
  
  7.     
    8. 
  
  
  
  
  8.   
    9. 
  
  
  
  
  9.   
    10. 
  
  
  
  
  10.     
    Base64 編碼與解碼示例
    11. 
  
  
  
  
  11.     
    12. 
  
  
  
  
  12.   
    13. 
  
  
  
  
  13.

在前端進(jìn)行二進(jìn)制處理的場(chǎng)景中，你可能會(huì)遇到 Data URL 轉(zhuǎn)換成 Blob/File 對(duì)象的情形，接下來阿寶哥將匯總一下常用的轉(zhuǎn)換函數(shù)。

五、常用轉(zhuǎn)換函數(shù)

5.1 Data URL 轉(zhuǎn) Blob 對(duì)象

 
 
 
 
    
  
  
  
  
  1. function dataUrlToBlob(dataurl, mimeType) {
    2. 
  
  
  
  
  2.   let bytes = window.atob(dataurl.split(",")[1]);
    3. 
  
  
  
  
  3.   let ab = new ArrayBuffer(bytes.length);
    4. 
  
  
  
  
  4.   let ia = new Uint8Array(ab);
    5. 
  
  
  
  
  5.   for (let i = 0; i < bytes.length; i++) {
    6. 
  
  
  
  
  6.     ia[i] = bytes.charCodeAt(i);
    7. 
  
  
  
  
  7.   }
    8. 
  
  
  
  
  8.   return new Blob([ab], { type: mimeType });
    9. 
  
  
  
  
  9. }
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. // 使用示例
    12. 
  
  
  
  
  12. let blob = dataUrlToBlob('data:text/plain;base64,aGVsbG8gd29ybGQ=','hello.txt');
    13. 
  
  
  
  
  13. console.log(blob);
    14.

5.2 Data URL 轉(zhuǎn) File 對(duì)象

 
 
 
 
    
  
  
  
  
  1. function dataUrlToFile(dataurl, filename) {
    2. 
  
  
  
  
  2.   let arr = dataurl.split(","),
    3. 
  
  
  
  
  3.   mime = arr[0].match(/:(.*?);/)[1],
    4. 
  
  
  
  
  4.   bstr = atob(arr[1]),
    5. 
  
  
  
  
  5.   n = bstr.length,
    6. 
  
  
  
  
  6.   u8arr = new Uint8Array(n);
    7. 
  
  
  
  
  7.   while (n--) {
    8. 
  
  
  
  
  8.     u8arr[n] = bstr.charCodeAt(n);
    9. 
  
  
  
  
  9.   }
    10. 
  
  
  
  
  10.   return new File([u8arr], filename, { type: mime });
    11. 
  
  
  
  
  11. }
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. // 使用示例
    14. 
  
  
  
  
  14. let file = dataUrlToFile('data:text/plain;base64,aGVsbG8gd29ybGQ=','hello.txt');
    15. 
  
  
  
  
  15. console.log(file);
    16.

5.3 URL 轉(zhuǎn) File 對(duì)象

 
 
 
 
    
  
  
  
  
  1. function urlToFile(url, filename, mimeType) {
    2. 
  
  
  
  
  2.   return fetch(url).then((res) => {
    3. 
  
  
  
  
  3.     return res.arrayBuffer();
    4. 
  
  
  
  
  4.   }).then((buffer) =>{
    5. 
  
  
  
  
  5.     return new File([buffer], filename, { type: mimeType });
    6. 
  
  
  
  
  6.   });
    7. 
  
  
  
  
  7. }
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. // 使用示例
    10. 
  
  
  
  
  10. urlToFile('data:text/plain;base64,aGVsbG8gd29ybGQ=', 'hello.txt','text/plain')
    11. 
  
  
  
  
  11.   .then(function(file){ console.log(file);});
    12.

六、總結(jié)

Base64 是一種數(shù)據(jù)編碼方式，目的是為了保障數(shù)據(jù)的安全傳輸。但標(biāo)準(zhǔn)的 base64 編碼無需額外的信息，即可以進(jìn)行解碼，是完全可逆的。因此在涉及傳輸私密數(shù)據(jù)時(shí)，并不能直接使用 base64 編碼，而是要使用專門的對(duì)稱或非對(duì)稱加密算法。如果你對(duì)加密感興趣的話，可以閱讀 玩轉(zhuǎn)混合加密 這篇文章。

七、參考資源

維基百科 - Base64

Base64 編碼原理與應(yīng)用

知乎 - 為什么要使用base64編碼，有哪些情景需求?


當(dāng)前題目：一文讀懂Base64
本文地址：http://www.dlmjj.cn/article/dppedpg.html