Base64基本原理及簡單應用

zzir 發布于2019-08-29 14:09 / 2798人閱讀

摘要：編碼原理編碼之所以稱為，是因為其使用個字符來對任意數據進行編碼，同理有編碼。本文學習網上資料整理而來，僅供個人學習使用，部分內容僅代表個人理解及思考。

1.什么是Base64

Base64是一種基于64個可打印字符來表示二進制數據的編碼方式，是從二進制數據到字符的過程。
原則上，計算機中所有內容都是二進制形式存儲的，所以所有內容（包括文本、影音、圖片等）都可以用base64來表示。

2.Base64編碼原理

Base64編碼之所以稱為Base64，是因為其使用64個字符來對任意數據進行編碼，同理有Base32、Base16編碼。標準Base64編碼使用的64個字符為：

有點特殊的是最后兩個字符，因對最后兩個字符的選擇不同，Base64編碼又有很多變種，比如用于編碼URL的Base64 URL編碼。

Base64編碼本質上是一種將二進制數據轉成文本數據的方案。對于非二進制數據，是先將其轉換成二進制形式，然后每連續6比特（2的6次方=64）計算其十進制值，根據該值在上面的索引表中找到對應的字符，最終得到一個文本字符串。

假設我們要對 Hello! 進行Base64編碼，按照ASCII表，其轉換過程如下圖所示：

可知 Hello! 的Base64編碼結果為 SGVsbG8h，每3個原始字符經Base64編碼成4個字符。那么，當原始字符串長度不能被3整除時，怎么辦呢？

以 Hello!! 為例，其轉換過程為：

Hello!! Base64編碼的結果為 SGVsbG8hIQAA。可見，不能被3整除時會采用來來補0的方式來完成編碼。
需要注意的是：標準Base64編碼通常用 = 字符來替換最后的 A，即編碼結果為 SGVsbG8hIQ==。因為 = 字符并不在Base64編碼索引表中，其意義在于結束符號，在Base64解碼時遇到 = 時即可知道一個Base64編碼字符串結束。

3.Base64編碼應用

就前端而言，對于一些簡單的圖片，為了減少外部資源加載，降低頁面加載時間，可以采用base64將圖片編碼成字符串，直接內嵌到頁面中。這種內嵌方式的實現，得益于大部分瀏覽器對Data URI scheme特性的支持，該特性通常會在CSS設置背景圖片時用到，其格式為：
background:url(data:文件類型;編碼方式,編碼后的文件內容);
也可通過img標簽嵌入圖片：

下面說下具體使用方法（以icon圖標為例）：

下載或制作所需圖標；

使用base64在線編碼工具，將圖標編碼成字符串；

將得到的字符串復制到你的前端代碼中使用（例如background:url(字符串)）

4.適用場景

一般適用于比較小、色彩層次單一的圖片（如icon圖標），不要試圖用于色彩豐富的較大圖片，盡管能夠實現展現，但由于編碼后的字符串非常大，會明顯增大HTML/CSS文件的大小，影響加載速度。

本文學習網上資料整理而來，僅供個人學習使用，部分內容僅代表個人理解及思考。
主要參考：
http://blog.xiayf.cn/2016/01/...
http://blog.csdn.net/zdy0_200...

云服務器 GPU云服務器 webrtc介紹及簡單應用人工智能原理及應用數據倉庫與數據挖掘原理及應用人工智能原理及應用第三版答案

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112951.html

理解JWT（JSON Web Token）認證及python實踐

摘要：認證服務器，即服務提供商專門用來處理認證的服務器。它與認證服務器，可以是同一臺服務器，也可以是不同的服務器。客戶端使用上一步獲得的授權，向認證服務器申請令牌。認證服務器對客戶端進行認證以后，確認無誤，同意發放令牌。最近想做個小程序，需要用到授權認證流程。以前項目都是用的 OAuth2 認證，但是Sanic 使用OAuth2 不太方便，就想試一下 JWT 的認證方式。這一篇主要內容是 ...

BigTomato 2019-07-30 14:21 評論0 收藏0
5分鐘即可掌握的前端高效利器：JavaScript 策略模式

摘要：策略模式由兩部分構成一部分是封裝不同策略的策略組，另一部分是。策略模式的典型應用場景是表單校驗中，對于校驗規則的封裝。然而圖像的壓縮及上傳錯誤處理等部分是公用的。遂考慮使用策略模式封裝。淺談 JavaScript 中策略模式的使用：什么是設計模式什么是策略模式策略模式在 JavaScript 中的應用（使用策略模式封裝百度AI識別調用）策略模式在 Vue 組件封裝中的應用（...

BlackFlagBin 2019-08-23 11:48 評論0 收藏0
談談Web應用中的圖片優化技巧及反思

摘要：要注意老舊的瀏覽器不支持的特性，它會繼續正常加載屬性引用的圖像。五安全地使用圖片的優勢這里不再贅述，簡單來說這篇文章，我們將一起探討，web應用中能對圖片進行什么樣的優化，以及反思一些負優化手段一、為什么要對圖片進行優化對于大多數前端工程師來說，圖片就是UI設計師(或者自己)切好的圖，你要做的只是把圖片丟進項目中，然后用以鏈接的方式呈現在頁面上，而且我們也經常把精力放在項目的打包...

zone 2019-08-26 10:43 評論0 收藏0
Docker 深入篇之 Build 原理

摘要：先簡單介紹下，通常情況下我們將其稱之為鏡像，鏡像是由多個層組成的文件，這些層用于在容器內執行代碼命令等。而的時候則會將此信息再次進行編碼。使用 Docker 時，最常用的命令無非是 docker container 和 docker image 相關的子命令，當然最初沒有管理類命令（或者說分組）的時候，最常使用的命令也無非是 docker run docker commit dock...

BearyChat 2019-06-28 16:36 評論0 收藏0
Docker 深入篇之 Build 原理

摘要：先簡單介紹下，通常情況下我們將其稱之為鏡像，鏡像是由多個層組成的文件，這些層用于在容器內執行代碼命令等。而的時候則會將此信息再次進行編碼。使用 Docker 時，最常用的命令無非是 docker container 和 docker image 相關的子命令，當然最初沒有管理類命令（或者說分組）的時候，最常使用的命令也無非是 docker run docker commit dock...

scq000 2019-07-01 16:48 評論0 收藏0