From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/zh-tw/web/http/data_uris/index.html | 128 ++++++++++++++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 files/zh-tw/web/http/data_uris/index.html (limited to 'files/zh-tw/web/http/data_uris') diff --git a/files/zh-tw/web/http/data_uris/index.html b/files/zh-tw/web/http/data_uris/index.html new file mode 100644 index 0000000000..a8332c7cf3 --- /dev/null +++ b/files/zh-tw/web/http/data_uris/index.html @@ -0,0 +1,128 @@ +--- +title: data URIs +slug: Web/HTTP/data_URIs +tags: + - Base64 + - Guide + - URI +translation_of: Web/HTTP/Basics_of_HTTP/Data_URIs +--- +

data URIs, 由 RFC 2397 文件定義, 允許作者在文件中嵌入檔案.

+ +

表達式

+ +

data URI 的表達式如下：

+ +
data:[<mediatype>][;base64],<data>
+
+ +

mediatype 為一 MIME type 字串，例如 JPEG 圖檔為「image/jpeg」，為非必要參數，若省略的話，默認值為「text/plain;charset=US-ASCII」。

+ +

If the data is textual, you can simply embed the text (using the appropriate entities or escapes based on the enclosing document's type). Otherwise, you can specify base64 to embed base64-encoded binary data.

+ +

範例

+ +
+
data:,Hello%2C%20World!
+
一個簡單的 text/plain data
+
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D
+
同前者，但經過 base64 編碼。
+
data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E
+
一 HTML 檔，內容為<h1>Hello, World</h1>
+
+ +

以 base64 格式編碼資料

+ +

在 Linux 和 Mac OS X 中，可以在終端機輸入下面的程式碼來進行編碼：

+ +
uuencode -m infile remotename
+
+ +

The infile parameter is the name of the file you wish to encode into base64 format, and remotename is the remote name for the file, which isn't actually used in data URLs.

+ +

輸出結果如下所示：

+ +
begin-base64 664 test
+YSBzbGlnaHRseSBsb25nZXIgdGVzdCBmb3IgdGV2ZXIK
+====
+
+ +

The data URI will use the encoded data after the initial header line.

+ +

JavaScript

+ +

請先閱讀文章《 Base64 encoding and decoding. 》。

+ +

轉換 nsIFile 至data URI

+ +

This function returns a base 64-encoded data URI from the passed nsIFile.

+ +
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;
+}
+
+ +

安全

+ +
+

Note: Prior to {{Gecko("6.0")}}, data URIs inherited the security context of the page currently in the browser window if the user enters a data URI into the location bar. Now data URIs get a new, empty, security context.

+
+ +

常見的問題

+ +

以下列舉幾個再使用 data URIs 時常遇到的問題.

+ +
+
表達式
+
data URIs 的格式十分簡單, 但是我們容易忘記在 "data" 區塊前面使用逗號, 或是不正確的將資料轉換為 base64 的格式.
+
在HTML 的格式
+
A data URI provides a file within a file, which can potentially be very wide relative to the width of the enclosing document. As a URL, the data should be formatable with whitespace (linefeed, tab, or spaces), but there are practical issues that arise when using base64 encoding.
+
長度限制
+
Although Mozilla supports data URIs of essentially unlimited length, browsers are not required to support any particular maximum length of data. For example, the Opera 11 browser limits data URIs to around 65000 characters.
+
缺乏錯誤處理
+
Invalid parameters in media, or typos when specifying "base64", are ignored, but no error is provided.
+
未支援 query 字串, etc.
+
+

The data portion of a data URI is opaque, so an attempt to use a query string (page-specific parameters, with the syntax <url>?parameter-data) with a data URI will just include the query string in the data the URI represents. For example:

+ + 
data:text/html,lots of text...<p><a name%3D"bottom">bottom</a>?arg=val
+
+ +

This represents an HTML resource whose contents are:

+ + 
lots of text...<p><a name="bottom">bottom</a>?arg=val
+
+ +

Note: as of Firefox 6, fragments (anchors) are processed consistent with other URI schemes, thus a bare "#" in the content needs to be escaped as '%23'.

+
+
+ +

瀏覽器的支援

+ +

The data scheme is supported by Opera 7.20 and above, as well as Safari and Konqueror. Internet Explorer 7 and below, however, do not currently support it. Internet Explorer 8 and above only supports data URIs for images in CSS, <link>, and <img>.

+ +

參見

+ + + +

資源

+ + -- cgit v1.2.3-54-g00ecf