登录 用户中心() [退出] 后台管理 注册
 

热门搜索:
您的位置: 首页 首页 >> 很冷的技术 >> 很冷的技术 >> 主题: html 内嵌图片 Data URI scheme RFC2397    [最新]
标题
html 内嵌图片 Data URI scheme RFC2397
clq
浏览(384) - 2017-07-16 11:28:28 发表 编辑

关键字:

[2020-03-09 13:49:29 最后更新]
好吧,这个技术其实不算冷,不过暂时不想开新版本,所以暂且放在这里吧.

html 内嵌图片 Data URI scheme RFC2397

在html时直接内嵌图片的格式类似于

<img src="data:image/png;base64,iVBORw0KGgoAAA
ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU
5ErkJggg==" alt="Red dot" />


其实除了 base64 还可以是其他格式;用途除了内嵌图片还可以用来减少 http 的请求次数.
这种技术的正式名称为 Data URI scheme 定义于 RFC2397



clq
2017-07-16 11:30:59 发表 编辑

Data URI scheme is a URI scheme(统一资源定位符的模式)

data 表示数据名称,image/png 是数据类型名称; base64 是数据编码方法,后面是base64编码后的数据。

Data URI scheme支持的类型有:
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

参考Wiki:
http://en.wikipedia.org/wiki/Data:_URL


clq
2017-07-16 11:47:21 发表 编辑

上述 wiki 链接中有一个
https://en.wikipedia.org/wiki/Binary-to-text_encoding
的跳转很值得一看.

--------------------------------------------------
在 CSS 中使用

body { background-image: url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC”);}
Data URI scheme支持的类型有:
data:,文本数据
data:text/plain,文本数据
data:text/html,html代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

--------------------------------------------------
Data URI scheme 的语法
data:[<mime type>][;charset=<charset>][;<encoding>],<encoded data>
1. data :协议名称;
2. [<mime type>] :可选项,数据类型(image/png、text/plain等)
3. [;charset=<charset>] :可选项,源文本的字符集编码方式
4. [;<encoding>] :数据编码方式(默认US-ASCII,BASE64两种)
5. ,<encoded data> :编码后的数据



clq
2017-07-16 11:51:45 发表 编辑

https://tools.ietf.org/html/rfc2397


                                                                       
[Docs] [txt|pdf] [draft-masinter-ur...] [Diff1] [Diff2] [Errata]       
                                                                       
                                                       PROPOSED STANDARD
                                                            Errata Exist

Network Working Group                                      L. Masinter
Request for Comments: 2397                           Xerox Corporation
Category: Standards Track                                  August 1998


                         The "data" URL scheme

Status of this Memo

   This document specifies an Internet standards track protocol for the
   Internet community, and requests discussion and suggestions for
   improvements.  Please refer to the current edition of the "Internet
   Official Protocol Standards" (STD 1) for the standardization state
   and status of this protocol.  Distribution of this memo is unlimited.

Copyright Notice

   Copyright (C) The Internet Society (1998).  All Rights Reserved.

1. Abstract

   A new URL scheme, "data", is defined. It allows inclusion of small
   data items as "immediate" data, as if it had been included
   externally.

2. Description

   Some applications that use URLs also have a need to embed (small)
   media type data directly inline. This document defines a new URL
   scheme that would work like 'immediate addressing'. The URLs are of
   the form:

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

   The <mediatype> is an Internet media type specification (with
   optional parameters.) The appearance of ";base64" means that the data
   is encoded as base64. Without ";base64", the data (as a sequence of
   octets) is represented using ASCII encoding for octets inside the
   range of safe URL characters and using the standard %xx hex encoding
   of URLs for octets outside that range.  If <mediatype> is omitted, it
   defaults to text/plain;charset=US-ASCII.  As a shorthand,
   "text/plain" can be omitted but the charset parameter supplied.

   The "data:" URL scheme is only useful for short values. Note that
   some applications that use URLs may impose a length limit; for
   example, URLs embedded within <A> anchors in HTML have a length limit
   determined by the SGML declaration for HTML [RFC1866]. The LITLEN
   (1024) limits the number of characters which can appear in a single



Masinter                    Standards Track                     [Page 1]

 
RFC 2397                 The "data" URL scheme               August 1998


   attribute value literal, the ATTSPLEN (2100) limits the sum of all
   lengths of all attribute value specifications which appear in a tag,
   and the TAGLEN (2100) limits the overall length of a tag.

   The "data" URL scheme has no relative URL forms.

3. Syntax

       dataurl    := "data:" [ mediatype ] [ ";base64" ] "," data
       mediatype  := [ type "/" subtype ] *( ";" parameter )
       data       := *urlchar
       parameter  := attribute "=" value

   where "urlchar" is imported from [RFC2396], and "type", "subtype",
   "attribute" and "value" are the corresponding tokens from [RFC2045],
   represented using URL escaped encoding of [RFC2396] as necessary.

   Attribute values in [RFC2045] are allowed to be either represented as
   tokens or as quoted strings. However, within a "data" URL, the
   "quoted-string" representation would be awkward, since the quote mark
   is itself not a valid urlchar. For this reason, parameter values
   should use the URL Escaped encoding instead of quoted string if the
   parameter values contain any "tspecial".

   The ";base64" extension is distinguishable from a content-type
   parameter by the fact that it doesn't have a following "=" sign.

4. Examples

   A data URL might be used for arbitrary types of data. The URL

                          data:,A%20brief%20note

   encodes the text/plain string "A brief note", which might be useful
   in a footnote link.

   The HTML fragment:

   <IMG
   SRC="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw
   AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz
   ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp
   a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl
   ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis
   F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH
   hhx4dbgYKAAA7"
   ALT="Larry">




Masinter                    Standards Track                     [Page 2]

 
RFC 2397                 The "data" URL scheme               August 1998


   could be used for a small inline image in a HTML document.  (The
   embedded image is probably near the limit of utility. For anything
   else larger, data URLs are likely to be inappropriate.)

   A data URL scheme's media type specification can include other
   parameters; for example, one might specify a charset parameter.

      data:text/plain;charset=iso-8859-7,%be%fg%be

   can be used for a short sequence of greek characters.

   Some applications may use the "data" URL scheme in order to provide
   setup parameters for other kinds of networking applications. For
   example, one might create a media type
           application/vnd-xxx-query

   whose content consists of a query string and a database identifier
   for the "xxx" vendor's databases. A URL of the form:

   data:application/vnd-xxx-
   query,select_vcount,fcol_from_fieldtable/local

   could then be used in a local application to launch the "helper" for
   application/vnd-xxx-query and give it the immediate data included.

5. History

   This idea was originally proposed August 1995. Some versions of the
   data URL scheme have been used in the definition of VRML, and a
   version has appeared as part of a proposal for embedded data in HTML.
   Various changes have been made, based on requests, to elide the media
   type, pack the indication of the base64 encoding more tightly, and
   eliminate "quoted printable" as an encoding since it would not easily
   yield valid URLs without additional %xx encoding, which itself is
   sufficient. The "data" URL scheme is in use in VRML, new applications
   of HTML, and various commercial products. It is being used for object
   parameters in Java and ActiveX applications.

6. Security

   Interpretation of the data within a "data" URL has the same security
   considerations as any implementation of the given media type.  An
   application should not interpret the contents of a data URL which is
   marked with a media type that has been disallowed for processing by
   the application's configuration.






Masinter                    Standards Track                     [Page 3]

 
RFC 2397                 The "data" URL scheme               August 1998


   Sites which use firewall proxies to disallow the retrieval of certain
   media types (such as application script languages or types with known
   security problems) will find it difficult to screen against the
   inclusion of such types using the "data" URL scheme.  However, they
   should be aware of the threat and take whatever precautions are
   considered necessary within their domain.

   The effect of using long "data" URLs in applications is currently
   unknown; some software packages may exhibit unreasonable behavior
   when confronted with data that exceeds its allocated buffer size.

7. References

   [RFC2396] Berners-Lee, T., Fielding, R., and L. Masinter,
               "Uniform Resource Identifiers (URI): Generic Syntax", RFC
               2396, August 1998.

   [RFC1866]   Berners-Lee, T., and D. Connolly, "Hypertext Markup
               Language - 2.0.", RFC 1866, November 1995.

   [RFC2045]   Freed N., and N. Borenstein., "Multipurpose Internet Mail
               Extensions (MIME) Part One: Format of Internet Message
               Bodies", RFC 2045, November 1996.

Author contact information:

   Larry Masinter
   Xerox Palo Alto Research Center
   3333 Coyote Hill Road
   Palo Alto, CA 94304

   EMail: masinter@parc.xerox.com



















Masinter                    Standards Track                     [Page 4]

 
RFC 2397                 The "data" URL scheme               August 1998


Full Copyright Statement

   Copyright (C) The Internet Society (1998).  All Rights Reserved.

   This document and translations of it may be copied and furnished to
   others, and derivative works that comment on or otherwise explain it
   or assist in its implementation may be prepared, copied, published
   and distributed, in whole or in part, without restriction of any
   kind, provided that the above copyright notice and this paragraph are
   included on all such copies and derivative works.  However, this
   document itself may not be modified in any way, such as by removing
   the copyright notice or references to the Internet Society or other
   Internet organizations, except as needed for the purpose of
   developing Internet standards in which case the procedures for
   copyrights defined in the Internet Standards process must be
   followed, or as required to translate it into languages other than
   English.

   The limited permissions granted above are perpetual and will not be
   revoked by the Internet Society or its successors or assigns.

   This document and the information contained herein is provided on an
   "AS IS" basis and THE INTERNET SOCIETY AND THE INTERNET ENGINEERING
   TASK FORCE DISCLAIMS ALL WARRANTIES, EXPRESS OR IMPLIED, INCLUDING
   BUT NOT LIMITED TO ANY WARRANTY THAT THE USE OF THE INFORMATION
   HEREIN WILL NOT INFRINGE ANY RIGHTS OR ANY IMPLIED WARRANTIES OF
   MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE.
























Masinter                    Standards Track                     [Page 5]


Html markup produced by rfcmarkup 1.122, available from https://tools.ietf.org/tools/rfcmarkup/




guest
2017-09-11 17:48:36 发表 编辑

ip: 5.188.211.16
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)

guest
2017-09-30 15:29:50 发表 编辑

ip: 146.185.223.125
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:53.0) Gecko/20100101 Firefox/53.0

guest
2017-10-02 11:49:35 发表 编辑


guest
2018-09-30 02:20:26 发表 编辑

ip: 46.119.114.237
Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

guest
2018-10-14 07:15:49 发表 编辑

ip: 46.119.114.237
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.75 Safari/537.36

guest
2018-11-05 22:46:34 发表 编辑

ip: 5.188.211.14
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)

guest
2018-11-06 04:36:59 发表 编辑

ip: 5.188.211.10
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)


总数:113 页次:1/12 首页 下一页  >>  尾页  
总数:113 页次:1/12 首页 下一页  >>  尾页  


该采集也在以下书单中



发表评论:
文本/html模式切换 插入图片 文本/html模式切换


附件:



NEWBT官方QQ群1: 276678893
可求档连环画,漫画;询问文本处理大师等软件使用技巧;求档softhub软件下载及使用技巧.
但不可"开车",严禁国家敏感话题,不可求档涉及版权的文档软件.
验证问题说明申请入群原因即可.

Copyright © 2005-2017 clq, All Rights Reserved
CLQ工作室 版权所有