這篇文章介紹一款在線的圖片 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 格式的圖片。

您可能還喜歡

本文鏈接：圖片base64編碼利器：一款在線Data URI生成工具

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源