當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

data类型的Url格式及Base64编码：把小数据直接嵌入到Url中

發(fā)布時間：2025/7/25 编程问答 18 豆豆

生活随笔收集整理的這篇文章主要介紹了 data类型的Url格式及Base64编码：把小数据直接嵌入到Url中小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

所謂"data"類型的Url格式，是在RFC2397中
提出的，目的對于一些“小”的數(shù)據(jù)，可以在網(wǎng)頁中直接嵌入，而不是從外部文件載入。例如對于img這個Tag，哪怕這個圖片非常非常的小，小到只有一個
點，也是要從另外一個外部的圖片文件例如gif文件中讀入的，如果瀏覽器實現(xiàn)了data類型的Url格式，這個文件就可以直接從頁面文件內(nèi)部讀入了。 data類型的Url格式早在1998年就提出了，時至今日，Firfox、Opera、Safari和Konqueror這些瀏覽器都已經(jīng)支持，但是IE直到7.0版本都還沒有支持! 如：<img src="https://img-blog.csdnimg.cn/2022010622250627331.jpeg"/> 就可以顯示為一張圖片 data格式的Url最直接的好處是，這些Url原本會引起一個新的網(wǎng)絡(luò)訪問，因為那里是一個網(wǎng)頁的地址，現(xiàn)在不會有新的網(wǎng)絡(luò)訪問了，因為現(xiàn)在這里是網(wǎng)頁的內(nèi)容。這樣做，會減少服務(wù)器的負(fù)載，當(dāng)然同時也增加了當(dāng)前網(wǎng)頁的大小。所以對“小”數(shù)據(jù)特別有好處。

data類型Url的形式

既然是Url，當(dāng)然也可以直接在瀏覽器的地址欄中輸入。 data:text/html,<html><body><p><b>Hello, world!</b></p></body></html> 在瀏覽器中輸入以上的Url，會得到一個加粗的"Hello, world!"。也就是說，data:后面的數(shù)據(jù)直接用做網(wǎng)頁的內(nèi)容，而不是網(wǎng)頁的地址。簡單的說，data類型的Url大致有下面幾種形式。 data:,<文本數(shù)據(jù)>data:text/plain,<文本數(shù)據(jù)>data:text/html,?data:text/html;base64,?data:text/css,?data:text/css;base64,?data:text/javascript,?data:text/javascript;base64,?data:image/gif;base64,base64編碼的gif圖片數(shù)據(jù)data:image/png;base64,base64編碼的png圖片數(shù)據(jù)data:image/jpeg;base64,base64編碼的jpeg圖片數(shù)據(jù)data:image/x-icon;base64,base64編碼的icon圖片數(shù)據(jù) 因為Url是一種基于文本的協(xié)議，所以gif/png/jpeg這種二進制屬于需要用base64進行編碼。換句話說，引入base64以后，就可以支持任意形式的數(shù)據(jù)格式。

完整的語法定義

您訪問的內(nèi)容來源于:歐博科技為您提供專業(yè)的網(wǎng)站建設(shè),軟件開發(fā),網(wǎng)絡(luò)營銷SEO,網(wǎng)絡(luò)推廣服務(wù),代理國外主機空間,域名注冊,服務(wù)熱線:(+86)18608275575,電子郵件:master#atnet.cc;歡迎您訪問東方網(wǎng)新網(wǎng)站:www.ops.cc 在RFC中，完整的語法定義如下。 dataurl := "data:" [ mediatype ] [ ";base64" ] "," data

mediatype := [ type "/" subtype ] *( ";" parameter )

data := *urlchar

parameter := attribute "=" value urlchar指的就是一般url中允許的字符，有些字符需要轉(zhuǎn)義，例如"="要轉(zhuǎn)義為"%3D"，不過我測試下來，至少在Firefox里面，不轉(zhuǎn)義也是可以的。 parameter可以對mediatype進行屬性的擴展，常見的是charset，用來定義編碼格式，在多語言情況下需要用到。例如下面的例子。 data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB 這個例子會顯示出"你好，中文！"。如果吧charset部分去掉，就會顯示亂碼，因為我用的是UTF-8編碼。 Firefox有一個data類型Url的測試頁面，列出了各種格式的data類型Url的測試Url，和測試結(jié)果說明。

base64編碼和內(nèi)容的隱秘

把二進制數(shù)據(jù)轉(zhuǎn)換成為Base64不是什么難事,各種編程語言都提供了二進制對Base64的轉(zhuǎn)碼如在C#中://---? 詳細(xì)代碼參考http://www.ops.cc/csharp-base64/ ---
//編碼
byte[] bytes = Encoding.Default.GetBytes("要轉(zhuǎn)換的字符");
string str = Convert.ToBase64String(bytes);
//解碼
byte[] outputb = Convert.FromBase64String(str);
string orgStr = Encoding.Default.GetString(outputb);一. Base64的編碼規(guī)則Base64編碼的思想是是采用64個基本的
ASCII碼字符對數(shù)據(jù)進行重新編碼。它將需要編碼的數(shù)據(jù)拆分成字節(jié)數(shù)組。以3個字節(jié)為一組。按順序排列24
位數(shù)據(jù)，再把這24位數(shù)據(jù)分成4組，即每組6位。再在每組的的最高位前補兩個0湊足一個字節(jié)。這樣就把一個3字節(jié)為一組的數(shù)據(jù)重新編碼成了4個字節(jié)。當(dāng)所
要編碼的數(shù)據(jù)的字節(jié)數(shù)不是3的整倍數(shù)，也就是說在分組時最后一組不夠3個字節(jié)。這時在最后一組填充1到2個0字節(jié)。并在最后編碼完成后在結(jié)尾添加1到2個
“=”。例：將對ABC進行BASE64編碼：1、首先取ABC對應(yīng)的ASCII碼值。A（65）B（66）C（67）；
2、再取二進制值A(chǔ)（01000001）B（01000010）C（01000011）；
?3、然后把這三個字節(jié)的二進制碼接起來（010000010100001001000011）；
4、?再以6位為單位分成4個數(shù)據(jù)塊,并在最高位填充兩個0后形成4個字節(jié)的編碼后的值，（00010000）（00010100）（00001001）（00000011），其中藍(lán)色部分為真實數(shù)據(jù)；
?5、再把這四個字節(jié)數(shù)據(jù)轉(zhuǎn)化成10進制數(shù)得（16）（20）（9）（3）；
?6、最后根據(jù)BASE64給出的64個基本字符表，查出對應(yīng)的ASCII碼字符（Q）（U）（J）（D），這里的值實際就是數(shù)據(jù)在字符表中的索引。注：BASE64字符表：ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/二.解碼規(guī)則解碼過程就是把4個字節(jié)再還原成3個字節(jié)再根據(jù)不同的數(shù)據(jù)形式把字節(jié)數(shù)組重新整理成數(shù)據(jù)。

轉(zhuǎn)載于:https://www.cnblogs.com/newmin/archive/2010/12/20/data-url-base64.html

總結(jié)

以上是生活随笔為你收集整理的data类型的Url格式及Base64编码：把小数据直接嵌入到Url中的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。