這篇文章介紹一款在線的圖片 base64 編碼利器 — Duri.me。data URI 圖片是 base64 編碼的圖片文件，可以嵌入到 HTML 或者 CSS 文件中，能夠減少 HTTP 請求，提高網頁加載速速。
您可能還喜歡
Duri.me 是一個簡單但非常有用的 Web 應用程序，可以快速的在線生成圖片文件的 data URI。Duri.me 使用非常簡單，把圖片拖放到框內，然后點擊 Generate Base-64 Code 按鈕就會自動生成編碼，Duri.me 幫你生成了圖片、CSS和Base64字符串三種形式的代碼，可以根據自己的需要拷貝生成的內容。
Data URI 簡介
data URIs 是由 RFC 2397 定義，允許將一個小文件進行編碼后嵌入到另外一個文檔里。data URIs 的語法結構如下：
data:[<mediatype>][;base64],<data>
mediatype 是一種MIME類型字符串, 例如 "image/jpeg" 代表 JPEG 圖像文件。如果省略這個參數，則默認值為text/plain;charset=US-ASCII。如果數據是文本類型, 你可以直接將文本嵌入在 data: 后面 （根據文本類型以及編碼，使用合適的 HTML 實體編碼或者百分號編碼）。如果是二進制數據，你可以將數據進行 base64 編碼之后再進行嵌入。
下面是一些示例：
data:,Hello%2C%20World!
簡單的text/plain類型數據
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D
base64編碼過的數據
data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E
一個HTML文檔源代碼 <h1>Hello, World</h1>
Firefox中生成 data URI 的方法
在 Firefox 瀏覽器中，將一個 nsIFile 轉換為 data URI 的方法：
function generateDataURI(file) {
var contentType = Components.classes["@mozilla.org/mime;1"]
.getService(Components.interfaces.nsIMIMEService)
.getTypeFromFile(file);
var inputStream = Components.classes["@mozilla.org/network/file-input-stream;1"]
.createInstance(Components.interfaces.nsIFileInputStream);
inputStream.init(file, 0x01, 0600, 0);
var stream = Components.classes["@mozilla.org/binaryinputstream;1"]
.createInstance(Components.interfaces.nsIBinaryInputStream);
stream.setInputStream(inputStream);
var encoded = btoa(stream.readBytes(stream.available()));
return "data:" + contentType + ";base64," + encoded;
}
常見問題和兼容性
下文介紹一些在使用 data URIs 時遇到的常見問題：
語法：data URIs 的格式很簡單，但很容易會忘記了在 "data:" 協議名后面必須有一個逗號(MIME類型和"base64"都是可省略的)，或者在對數據進行 base64 編碼時發生錯誤。
HTML代碼格式化：一個data URI 是作為了一個文件內的文件，所以在嵌入其他文檔的內部時，這個data URI 所在的行就會非常的長，所以應當用空白符（換行符、制表符、 空格）來對它進行格式化，但如果數據是經過base64編碼過的,就可能會遇到一些問題。
長度限制：雖然 Mozilla 支持無限長度的 data URIs,但是標准中並沒有規定瀏覽器必須支持無限長度的 data URIs。比如 Opera 11 限制 data URIs 的長度最多為 65000 個字符。
不支持查詢字符串：一個 data URI 的數據字段是沒有結束標記的，所以嘗試在一個data URI后面添加查詢字符串會導致,查詢字符串也一並被當作數據字段。例如：
data:text/html,lots of text...<p><a name%3D"bottom">bottom</a>?arg=val
這個data URI代表的HTML源文件內容為：
lots of text...<p><a name="bottom">bottom</a>?arg=val
注意：從Firefox 6開始，data URI 中的錨點標記(#)會像在其他普通網頁 URI 上一樣可被識別,因此,如果想要表示文件內容中的 "#"，必須將它轉義為'%23'。
瀏覽器兼容性：已經支持 data: 協議的瀏覽器有 Opera 7.20 及其以上版本，Safari 和 Konqueror。Internet Explorer 7 及以下版本不支持，Internet Explorer 8 及以上版本只支持在 CSS 文件中使用 data URIs 格式的圖片。
您可能還喜歡