js displays base64 encoded binary stream web page images_javascript skills

Data URI scheme.
Data URI scheme is defined in RFC2397. The purpose is to embed some small data directly into web pages, so that there is no need to load it from external files. For example, the string of characters above is actually a small picture. Copy and paste these characters into Firefox's address bar and go to it, and you will see it, a 2*2 white gif picture.
In the above Data URI, data represents the protocol name for obtaining data, image/gif is the data type name, base64 is the encoding method of the data, and what follows the comma is the base64-encoded data of the image/gif file.
Currently, 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
base64 simply put, it translates some 8-bit data into For standard ASCII characters, there are many free base64 encoding and decoding tools on the Internet. In PHP, you can use the function base64_encode() to encode, such as echo base64_encode(file_get_contents('images/log.gif”'));
Currently, IE8, Firefox, Chrome, and Opera browsers all support this kind of small file embedding.
Take an example of a picture:
A picture in a web page can be displayed like this:

Copy code The code is as follows:

can also be displayed like this:

Copy the code The code is as follows:

We wrote the content of the image file directly in the HTML file, The advantage of this is that it saves an HTTP request. The disadvantage is that the browser will not cache this image.