Home >Backend Development >PHP Tutorial >Data URI scheme_PHP tutorial

Data URI scheme_PHP tutorial

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal: 2016-07-13 10:28:17973browse

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

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 8349fd5bdf1fef5e10ed6e1f7b40bb6e------ ---------------

Usage=>

HTML:

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

CSS:

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

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>

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

Note: You can use the function base64_encode() to encode in PHP, base64_encode(file_get_contents('demo.png'));

Copy the following data into the browser and see what it is.

data:text/plain;base64,d3d3LmNoZW53ZWkud3M=

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

Reference Wiki: http://en.wikipedia.org/wiki/Data:_URL

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Regarding the two paging styles of digital paging and text paging in php, mysql, and html for your reference_PHP tutorialNext article：Regarding the two paging styles of digital paging and text paging in php, mysql, and html for your reference_PHP tutorial

See more

Data URI scheme_PHP tutorial

Related articles