亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Base64基本原理及簡單應(yīng)用

zzir / 2878人閱讀

摘要：編碼原理編碼之所以稱為，是因?yàn)槠涫褂脗€字符來對任意數(shù)據(jù)進(jìn)行編碼，同理有編碼。本文學(xué)習(xí)網(wǎng)上資料整理而來，僅供個人學(xué)習(xí)使用，部分內(nèi)容僅代表個人理解及思考。

1.什么是Base64

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

2.Base64編碼原理

Base64編碼之所以稱為Base64，是因?yàn)槠涫褂?4個字符來對任意數(shù)據(jù)進(jìn)行編碼，同理有Base32、Base16編碼。標(biāo)準(zhǔn)Base64編碼使用的64個字符為：

有點(diǎn)特殊的是最后兩個字符，因?qū)ψ詈髢蓚€字符的選擇不同，Base64編碼又有很多變種，比如用于編碼URL的Base64 URL編碼。

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

假設(shè)我們要對 Hello! 進(jìn)行Base64編碼，按照ASCII表，其轉(zhuǎn)換過程如下圖所示：

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

以 Hello!! 為例，其轉(zhuǎn)換過程為：

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

3.Base64編碼應(yīng)用

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

下面說下具體使用方法（以icon圖標(biāo)為例）：

下載或制作所需圖標(biāo)；

使用base64在線編碼工具，將圖標(biāo)編碼成字符串；

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

4.適用場景

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

本文學(xué)習(xí)網(wǎng)上資料整理而來，僅供個人學(xué)習(xí)使用，部分內(nèi)容僅代表個人理解及思考。
主要參考：
http://blog.xiayf.cn/2016/01/...
http://blog.csdn.net/zdy0_200...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/112951.html

相關(guān)文章

  • 理解JWT（JSON Web Token）認(rèn)證及python實(shí)踐

    摘要：認(rèn)證服務(wù)器，即服務(wù)提供商專門用來處理認(rèn)證的服務(wù)器。它與認(rèn)證服務(wù)器，可以是同一臺服務(wù)器，也可以是不同的服務(wù)器?？蛻舳耸褂蒙弦徊将@得的授權(quán)，向認(rèn)證服務(wù)器申請令牌。認(rèn)證服務(wù)器對客戶端進(jìn)行認(rèn)證以后，確認(rèn)無誤，同意發(fā)放令牌。 最近想做個小程序，需要用到授權(quán)認(rèn)證流程。以前項(xiàng)目都是用的 OAuth2 認(rèn)證，但是Sanic 使用OAuth2 不太方便，就想試一下 JWT 的認(rèn)證方式。這一篇主要內(nèi)容是 ...

    BigTomato 評論0 收藏0

  • 5分鐘即可掌握的前端高效利器：JavaScript 策略模式

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

    BlackFlagBin 評論0 收藏0

  • 談?wù)刉eb應(yīng)用中的圖片優(yōu)化技巧及反思

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

    zone 評論0 收藏0

  • Docker 深入篇之 Build 原理

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

    BearyChat 評論0 收藏0

  • Docker 深入篇之 Build 原理

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

    scq000 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<