Detailed explanation and use examples of data URI scheme and implementation method of Base64 encoding of pictures

Time:2022-5-4

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:

Copy code

The code is as follows:

data:image/gif;base64,R0lGODlhkQAtAKIAAAAAAP///1a+5zfn9////wAAAAAAAAAAACH5BAEAAAQALAAAAACRAC0AQAP/SLrc/jDKSau9uIrsxN5cAxJeSI5MmV6q4r1w3JKRDC/2W1Mz3/GoVO8UE2GGK+MEVQoKP04XKJqJBj+/DpUVGXgb3vAA/GWIz2EFekxIq8WLcnxNr8sddnd7bUn7v2V/e4BjhIaDg4WJinCBhWdvi5B/j5WIgolvelxCIU5bSRygV1kQOVoySyY0WkqfnKESr7GotDtStzi4OLNSSKgzvxZIpKC6rKKrysNWxstHzs+UjZWPmYbUlpOLbZds1YeU3mjj5OWObF1565Pg7nqQmuzz5PT2m6I3ykXPyzf8+fQd8XfMRItopqiQ0oBslUKEpgp6upJKRMVSEpccHOgi/9eDUVZqdRqGMSJGYR2JQDNWrJWtkR8hpnyZ0Ei0KTJ3meT1ZMqPnC6BlpzZ8VPFHEZt1Cgi7CIRgTGhPkVKVeFIJjUdgqojj52ye/H6iQ0hTh6iPWglzTFXj5u2b+rSxcUDTw6ftXceiBPkhtCcs2XNgutGTc1aTePOuQ3nd9pZCPjMbILzN2/YS265mZEQWfLkvJAjdx5LurTp0xpGoJSlNHXV1kthro4Jk8WpnheRAgN4wuCWhbxaC81I03bvfcSNf1SS+pnVfVAIJme4vDhtnRqnT5WqO3jS7z6Ys7a4lKn26g3FVwnZqVd460QzsnT6dLdH77+IURwqi796/P/ZnYcea/R1d9197wnoy08JwobfbMXsR5NUTyTkoC/0yZeeScONUgoTPag2HDIjJtdSgLO5NGB8x8WHxXj9bZhMSS++lGJsKqoEowoh9qhDQTdmpV6N2PGEHI4YXugfagEdxJtFr1FFwV1d2SENZZKYw+SWZIBFB15y/QWml1/OM6VdoGVywV7tvFWll2g14s2bZIZJJ5wTsJlYnOggpiY2jMiJyTt8vmVJN36iadafaXqWZaHWFMYHm435cQ1c9TBmaJlWHrJnaIYWGklf1iAWiGCZFZbWZImV9Y2mc4rWqKmwUsonYLVWQ5iqr1IGqK+5hjpNr2fWmWmWXA32jrEFzJL5QAIAOw==

What is this? This is the data URI scheme that developeppaer will introduce today.

Currently, data URI scheme supports the following types:

Copy code

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 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:

Copy code

The code is as follows:

<img src=”https://www.jb51.net/images/logo.png”/>

It can also be displayed as follows:

Copy code

The code is as follows:

<img src=“data:image/gif;base64,R0lGODlhkQAtAKIAAAAAAP///1a+5zfn9////wAAAAAAAAAAACH5BAEAAAQALAAAAACRAC0AQAP/SLrc/jDKSau9uIrsxN5cAxJeSI5MmV6q4r1w3JKRDC/2W1Mz3/GoVO8UE2GGK+MEVQoKP04XKJqJBj+/DpUVGXgb3vAA/GWIz2EFekxIq8WLcnxNr8sddnd7bUn7v2V/e4BjhIaDg4WJinCBhWdvi5B/j5WIgolvelxCIU5bSRygV1kQOVoySyY0WkqfnKESr7GotDtStzi4OLNSSKgzvxZIpKC6rKKrysNWxstHzs+UjZWPmYbUlpOLbZds1YeU3mjj5OWObF1565Pg7nqQmuzz5PT2m6I3ykXPyzf8+fQd8XfMRItopqiQ0oBslUKEpgp6upJKRMVSEpccHOgi/9eDUVZqdRqGMSJGYR2JQDNWrJWtkR8hpnyZ0Ei0KTJ3meT1ZMqPnC6BlpzZ8VPFHEZt1Cgi7CIRgTGhPkVKVeFIJjUdgqojj52ye/H6iQ0hTh6iPWglzTFXj5u2b+rSxcUDTw6ftXceiBPkhtCcs2XNgutGTc1aTePOuQ3nd9pZCPjMbILzN2/YS265mZEQWfLkvJAjdx5LurTp0xpGoJSlNHXV1kthro4Jk8WpnheRAgN4wuCWhbxaC81I03bvfcSNf1SS+pnVfVAIJme4vDhtnRqnT5WqO3jS7z6Ys7a4lKn26g3FVwnZqVd460QzsnT6dLdH77+IURwqi796/P/ZnYcea/R1d9197wnoy08JwobfbMXsR5NUTyTkoC/0yZeeScONUgoTPag2HDIjJtdSgLO5NGB8x8WHxXj9bZhMSS++lGJsKqoEowoh9qhDQTdmpV6N2PGEHI4YXugfagEdxJtFr1FFwV1d2SENZZKYw+SWZIBFB15y/QWml1/OM6VdoGVywV7tvFWll2g14s2bZIZJJ5wTsJlYnOggpiY2jMiJyTt8vmVJN36iadafaXqWZaHWFMYHm435cQ1c9TBmaJlWHrJnaIYWGklf1iAWiGCZFZbWZImV9Y2mc4rWqKmwUsonYLVWQ5iqr1IGqK+5hjpNr2fWmWmWXA32jrEFzJL5QAIAOw==”/>

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

Copy 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 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:

Copy 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 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 = “” / >’;
}
}