1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
---
title: data URIs
slug: Web/HTTP/data_URIs
tags:
- Base64
- Guide
- URI
translation_of: Web/HTTP/Basics_of_HTTP/Data_URIs
---
<p><code>data</code> URIs, 由 <a class="external" href="http://tools.ietf.org/html/rfc2397" title="http://tools.ietf.org/html/rfc2397">RFC 2397</a> 文件定義, 允許作者在文件中嵌入檔案.</p>
<h2 id="Syntax" name="Syntax">表達式</h2>
<p>data URI 的表達式如下：</p>
<pre class="eval notranslate">data:[<mediatype>][;base64],<data>
</pre>
<p><code>mediatype</code> 為一 MIME type 字串，例如 JPEG 圖檔為「<code>image/jpeg</code>」，為非必要參數，若省略的話，默認值為「<code>text/plain;charset=US-ASCII</code>」。</p>
<p>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 <code>base64</code> to embed base64-encoded binary data.</p>
<h3 id="範例">範例</h3>
<dl>
<dt>data:,Hello%2C%20World!</dt>
<dd>一個簡單的 text/plain data</dd>
<dt>data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D</dt>
<dd>同前者，但經過 base64 編碼。</dd>
<dt>data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E</dt>
<dd>一 HTML 檔，內容為<code><h1>Hello, World</h1></code></dd>
</dl>
<h2 id="Encoding_data_into_base64_format" name="Encoding_data_into_base64_format">以 base64 格式編碼資料</h2>
<p>在 Linux 和 Mac OS X 中，可以在終端機輸入下面的程式碼來進行編碼：</p>
<pre class="eval notranslate">uuencode -m <code>infile</code> <code>remotename</code>
</pre>
<p>The <code>infile</code> parameter is the name of the file you wish to encode into base64 format, and <code>remotename</code> is the remote name for the file, which isn't actually used in <code>data</code> URLs.</p>
<p>輸出結果如下所示：</p>
<pre class="eval notranslate">begin-base64 664 test
YSBzbGlnaHRseSBsb25nZXIgdGVzdCBmb3IgdGV2ZXIK
====
</pre>
<p>The <code>data</code> URI will use the encoded data after the initial header line.</p>
<h3 id="JavaScript">JavaScript</h3>
<p>請先閱讀文章《 <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding">Base64 encoding and decoding</a>. 》。</p>
<h2 id="Converting_an_nsIFile_to_a_data_URI" name="Converting_an_nsIFile_to_a_data_URI">轉換 nsIFile 至data URI</h2>
<p>This function returns a base 64-encoded data URI from the passed <a href="/en/XPCOM_Interface_Reference/nsIFile" title="en/nsIFile">nsIFile</a>.</p>
<pre class="brush: js notranslate">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;
}
</pre>
<h2 id="安全">安全</h2>
<div class="note">
<p><strong>Note:</strong> Prior to {{Gecko("6.0")}}, <code>data</code> URIs inherited the security context of the page currently in the browser window if the user enters a <code>data</code> URI into the location bar. Now <code>data</code> URIs get a new, empty, security context.</p>
</div>
<h2 id="Common_problems" name="Common_problems">常見的問題</h2>
<p>以下列舉幾個再使用 <code>data</code> URIs 時常遇到的問題.</p>
<dl>
<dt>表達式</dt>
<dd><code>data</code> URIs 的格式十分簡單, 但是我們容易忘記在 "data" 區塊前面使用逗號, 或是不正確的將資料轉換為 base64 的格式.</dd>
<dt>在HTML 的格式</dt>
<dd>A <code>data</code> 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 <code>data</code> should be formatable with whitespace (linefeed, tab, or spaces), but there are practical issues that arise <a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=73026#c12">when using base64 encoding</a>.</dd>
<dt>長度限制</dt>
<dd>Although Mozilla supports <code>data</code> URIs of essentially unlimited length, browsers are not required to support any particular maximum length of data. For example, the Opera 11 browser limits <code>data</code> URIs to around 65000 characters.</dd>
<dt>缺乏錯誤處理</dt>
<dd>Invalid parameters in media, or typos when specifying "base64", are ignored, but no error is provided.</dd>
<dt>未支援 query 字串, etc.</dt>
<dd>
<p>The data portion of a data URI is opaque, so an attempt to use a query string (page-specific parameters, with the syntax <code><em><url></em>?parameter-data</code>) with a data URI will just include the query string in the data the URI represents. For example:</p>
<pre class="eval notranslate">data:text/html,lots of text...<p><a name%3D"bottom">bottom</a>?arg=val
</pre>
<p>This represents an HTML resource whose contents are:</p>
<pre class="eval notranslate">lots of text...<p><a name="bottom">bottom</a>?arg=val
</pre>
<p>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'.</p>
</dd>
</dl>
<h2 id="Support_in_other_browsers" name="Support_in_other_browsers">瀏覽器的支援</h2>
<p>The <code>data</code> 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 <code>data</code> URIs for images in CSS, <link>, and <img>.</p>
<h2 id="參見">參見</h2>
<ul>
<li><a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
<li>{{domxref("WindowBase64.atob","atob()")}}</li>
<li>{{domxref("WindowBase64.btoa","btoa()")}}</li>
<li><a href="/en-US/docs/Web/CSS/uri" title="/en-US/docs/Web/CSS/uri">CSS <code>url()</code></a></li>
<li><a href="/en-US/docs/URI" title="/en-US/docs/URI">URI</a></li>
</ul>
<h2 id="Resources" name="Resources">資源</h2>
<ul>
<li><a class="external" href="http://tools.ietf.org/html/rfc2397" title="http://tools.ietf.org/html/rfc2397">RFC 2397</a> -- The "data" URL scheme"</li>
</ul>
|
