Data URI scheme detailed explanation and usage examples and image base64 encoding implementation method

Data URI scheme detailed explanation and usage examples and image base64 encoding implementation method_html5 tutorial skills

WBOY

Release： 2016-05-16 15:47:56

Original

2414 people have browsed it

1. Introduction to Data URI scheme

Data URI scheme is defined in RFC2397. The purpose is to embed some small data directly into web pages, so that there is no need to load it from external files. For example, the string of characters above is actually a small picture. Copy and paste these characters into Firefox's address bar and go to it, and you will see it, a 1X36 white and gray png picture.
In the above Data URI, data represents the protocol name for obtaining data, image/png is the data type name, base64 is the encoding method of the data, and what follows the comma is the base64-encoded data of the image/png file.
Perhaps you have noticed that on some web pages, the src or css background image url of the image is not our common online image link, but a large string of characters, such as this:

Copy code

The code is as follows:

data:image/gif;base64,R0lGODlhkQAtAKIAAAAAAP///1a 5zfn9//// wAAAAAAAAAAAACH5BAEAAAQALAAAAACRAC0AQAP/SLrc/jDKSau9uIrsxN5cAxJeSI5MmV6q4r1w3JKRDC/2W1Mz3/GoVO8UE2GGK MEVQoKP04XKJqJBj /DpUVGXgb3vAA/GWIz2EFekxIq8WLcnxNr8sddnd7bUn7v2V /e4BjhIaDg4WJinCBhWdvi5B/j5WIgolvelxCIU5bSRygV1kQOVoySyY0WkqfnKESr7GotDtStzi4OLNSSKgzvxZIpKC6rKKrysNWxstHzs UjZWPmYbUlpOLbZds1YeU3mjj5OWObF1565Pg7nqQm uzz5PT2m6I3ykXPyzf8 fQd8XfMRItopqiQ0oBslUKEpgp6upJKRMVSEpccHOgi/9eDUVZqdRqGMSJGYR2JQDNWrJWtkR8hpnyZ0Ei0KTJ3meT1ZMqPnC6BlpzZ8VPFHEZt1Cgi7CIRgTGhPkVKVeFIJ jUdgqojj52ye/H6iQ0hTh6iPWglzTFXj5u2b rSxcUDTw6ftXceiBPkhtCcs2XNgutGTc1aTePOuQ3nd9pZCPjMbILzN2/YS265mZEQWfLkvJAjdx5LurTp0xpGoJSlNHXV1kthro4Jk8WpnheRA gN4wuCWhbxaC81I03bvfcSNf1SS pnVfVAIJme4vDhtnRqnT5WqO3jS7z6Ys7a4lKn26g3FVwnZqVd460QzsnT6dLdH77 IURwqi796/P/ZnYcea/R1d9197wnoy08JwobfbMXsR5NUT yTkoC/0yZeeScONUgoTPag2HDIjJtdSgLO5NGB8x8WHxXj9bZhMSS lGJsKqoEowoh9qhDQTdmpV6N2PGEHI4YXugfagEdxJtFr1FFwV1d2SENZZKYw SWZIBFB15y/QWml1/OM6VdoGVywV7tvFWll2g14s2bZ IZJJ5wTsJlYnOggpiY2jMiJyTt8vmVJN36iadafaXqWZaHWFMYHm435cQ1c9TBmaJlWHrJnaIYWGklf1iAWiGCZFZbWZImV9Y2mc4rWqKmwUsonYLVWQ5iqr1IGqK 5hjpNr2fWmWmWXA3 2jrEFzJL5QAIAOw==

What is this? This is the Data URI scheme that Script House will introduce today.

Currently, the types supported by Data URI scheme are:

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 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 simply put, it translates some 8-bit data into standard ASCII characters, which can be used in PHP Function base64_encode() performs encoding.

Currently, IE8, Firefox, Chrome, and Opera browsers all support this small file embedding. For IE7 and earlier versions, the compatibility issue with data URI scheme can be solved by using MHTML.

As an example

A picture on a web page can be displayed like this:

Copy code

The code is as follows:

can also be used Displayed like this:

Copy the code

The code is as follows:

我们把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求使得加

二、图片 base64 编码的实现方法示例

2.1 JS 🎜 >function readFile(){

var file = this.files[0];
if(!/image/w /.test(file.type)){
alert("请确保文件为图像类型");

return false;

} var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e){ result.innerHTML = '

img_area.innerHTML = '

图片img标签展示：< ;/div>

}

}

2.2 利用 HTML5 的 FileReader 实现图片 base64 编码

HTML5 Javascript 版本核心代码：
var file = this.files[0];
if(!/image/w /.test(file.type)){
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){

result.innerHTML = '

'; img_area.innerHTML = '

图片img标签展示：

}