Data URI scheme_PHP tutorial-PHP Tutorial-php.cn

Data URI scheme_PHP tutorial

WBOY

Release： 2016-07-13 10:28:17

Original

944 people have browsed it

-------------------------------------------------- -------------------------------------------------- -

Data URI scheme is a URI scheme (uniform resource locator pattern).

The well-known site reference resource files are in a format similar to http://www.chenwei.ws/demo.png, but the data URI scheme provides a method to embed external resources into web pages.

It is in the form of a file or document. This technology allows ordinary elements such as images to be fetched and style sheets to be placed in a single http request, replacing many http requests. (Equivalent to becoming a part of the web page)

---------------------------------@author chenwei ------ ---------------

Usage=>

HTML:

<span><</span><span>img </span><span>src</span><span>="data:image/png;base64,iVBORw0Rw0KGgoAA......"</span><span>></span>

Copy after login

CSS:

<span>div </span>{<span>background</span>:<span> red url('data:image/png</span>;<span>base64,iVBORw0Rw0KGgoAA......') no-repeat scroll left top;</span>}

Copy after login

JavaScript: (not supported by IE8)

<script><span>
window.open(</span>'data:text/html;charset=utf-8,' +<span> encodeURIComponent(
　　　　</span>'<!doctype html>' +
　　　　'html lang='en'<span> +
　　　　</span>'<head><title>Embedded Window</title></head>'<span> +
　　　　</span>'<body><h2>42</h2></body>'<span> +
　　　　</span>'</html>'
<span>　　);
</span></script>

Copy after login

data represents the data name, image/png is the data type name; base64 is the data encoding method, followed by base64-encoded data.

The types supported by

Data URI scheme are:
data:, text data
data:text/plain, text data
data:text/html,HTML code
data:text/html;base64,base64 encoded HTML code
data:text/css,CSS Code
data: text/css; base64, base64 encoded CSS code
data: text/javascript, Javascript code
data :text/javascript;base64, base64-encoded Javascript code
data:image/gif; base64, base64-encoded gif image data
data:image/png; base64,base64 encoded png image data
data:image/jpeg;base64,base64 encoded jpeg image data
data:image/x-icon;base64, Base64 encoded icon image data