1、 Introduction to data URI scheme
The data URI scheme is defined in rfc2397. The purpose is to embed some small data directly into the web page, so that there is no need to load from external files. For example, the above string of characters is actually a small picture. Copy and paste these characters into the address bar of Firefox and go to it. You can see it, a 1×36 gray PNG picture.
In the above data URI, data represents the contract name of obtaining data, image / PNG is the name of data type, Base64 is the encoding method of data, and the data encoded by Base64 of the image / PNG file is followed by a comma.
You may have noticed that on some web pages, the URL of the SRC or CSS background picture of the picture is not our common online picture link, but a large string of characters, such as:
The code is as follows:
What is this? This is the data URI scheme that developeppaer will introduce today.
Currently, data URI scheme supports the following types:
The code is as follows:
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 picture data
data:image/png; Base64, Base64 encoded PNG picture 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 standard ASCII characters, and the function Base64 can be used in PHP_ Encode().
At present, IE8, firfox, chrome and opera browsers all support this kind of small file embedding. For IE7 and earlier versions, mhtml can be used to solve the compatibility problem of data URI scheme.
Examples
A picture in the web page can be displayed as follows:
The code is as follows:
It can also be displayed as follows:
The code is as follows:
We write the contents of the image file directly into the HTML file. The advantage of this is that it saves an HTTP request and improves the loading speed. The disadvantage may be that the browser will not cache this image.
2、 Example of implementation method of image Base64 coding
2.1 JS implementation picture Base64 coding code
The code is as follows:
var file = this.files[0];
if(!/image\/\w+/.test(file.type)){
Alert (“please make sure the file is of image type”);
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
result.innerHTML = ‘<img src=”‘+this.result+'” alt=””/>’;
img_ area. InnerHTML = ‘< div > picture img tag display: < / div > < img SRC = “‘ + this. Result + ‘” ALT = “” / >’;
}
}
2.2 realize image Base64 coding by using FileReader of HTML5
HTML5 JavaScript version core code:
The code is as follows:
var file = this.files[0];
if(!/image\/\w+/.test(file.type)){
Alert (“please make sure the file is of image type”);
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
result.innerHTML = ‘<img src=”‘+this.result+'” alt=””/>’;
img_ area. InnerHTML = ‘< div > picture img tag display: < / div > < img SRC = “‘ + this. Result + ‘” ALT = “” / >’;
}
}