Js displays base64 encoded binary stream webpage Images

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.