Js displays base64 encoded binary stream webpage Images

Data URI scheme.
Data URI scheme is defined in RFC2397 to embed small Data into a webpage without loading it from an external file. For example, the string above is actually a small image. copy and paste these characters into the address bar of Firefox and go to it to see it, a 2*2 white GIF image.
In the preceding Data URI, data indicates the protocol name for obtaining Data. image/gif indicates the data type name, And base64 indicates the Data encoding method, the comma is followed by the base64 encoded data of the image/gif file.
Currently, Data URI scheme supports the following types:
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: To put it simply, it translates some 8-bit data into standard ASCII characters. There are many free base64 encoding and decoding tools on the Internet, and base64_encode () can be used in PHP () encode, such as echo base64_encode (file_get_contents ('images/log.gif "'));
Currently, IE8, Firfox, Chrome, and opera browsers support such small file embedding.
Example of an image:
An image on the webpage can be displayed as follows:
Copy codeThe Code is as follows:


It can also be displayed as follows:
Copy codeThe Code is as follows:


We directly write the content of the image file in the HTML file, which saves an HTTP request. The downside is that the browser does not cache such images.