Data URI scheme

Comments: This article mainly introduces the detailed description of Data URI scheme and the implementation of base64 encoding using instances and images. For more information, see

1. Introduction to 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 1x36 white-gray png image.
In the preceding Data URI, data indicates the protocol name for obtaining Data. image/png indicates the data type name, And base64 indicates the Data encoding method, the comma is followed by the base64 encoded data of the image/png file.
You may have noticed that on some web pages, the URLs of the image's src or css background images are not common online image links, but a large string of characters, such:

The Code is as follows: data: image/gif; base64, export /// 1a + 5zfn9 //// loads/SLrc/logs/2W1Mz3/GoVO8UE2GGK + records +/DpUVGXgb3vAA/logs/uploads/downloads + uploads + downloads/downloads + authorization/Signature + signature + IURwqi796/P/ZnYcea/r1d9197wnoy081_obfbmxsr5nutytkoc/Signature ++ signature + SWZIBFB15y/QWml1/Signature + Signature =

What is this? This is the Data URI scheme to be introduced by the students.

Currently, Data URI scheme supports the following types:

The Code is as follows:
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: It translates some 8-bit data into standard ASCII characters. in PHP, base64_encode () can be used for encoding.
Currently, IE8, Firfox, Chrome, and opera browsers support such small file embedding. For IE7 and earlier versions, MHTML can be used to solve the compatibility problem of data URI scheme.

Example

An image on the webpage can be displayed as follows:

The Code is as follows:
It can also be displayed as follows:

The Code is as follows:

We directly write the content of the image file in the HTML file. The advantage of this is that it saves an HTTP request to improve the loading speed. The disadvantage is that the browser may not cache the image.

II. Implementation of base64 encoding for images

2.1 JavaScript code for base64 encoding of images

The Code is as follows:
Function readFile (){
Var file = this. files [0];
If (! /Image \/\ w +/. test (file. type )){
Alert ("Please make sure the file is of the image type ");
Return false;
}
Var reader = new FileReader ();
Reader. readAsDataURL (file );
Reader. onload = function (e ){
Result. innerHTML = ' ';
Img_area.innerHTML = '<div class = "sitetip"> image img Label display: </div> ';
}
}

2.2 Use HTML5 FileReader to implement base64 encoding of images

HTML5 Javascript core code:

The Code is as follows:
Function readFile (){
Var file = this. files [0];
If (! /Image \/\ w +/. test (file. type )){
Alert ("Please make sure the file is of the image type ");
Return false;
}
Var reader = new FileReader ();
Reader. readAsDataURL (file );
Reader. onload = function (e ){
Result. innerHTML = ' ';
Img_area.innerHTML = '<div class = "sitetip"> image img Label display: </div> ';
}
}