Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to achieve Data URI scheme and real picture base64 coding, the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

A brief introduction to Data URI scheme

Data URI scheme is defined in RFC2397 to embed small data directly into a web page so that it no longer has to be loaded from an external file. 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 can see it, a white and gray png picture of 1X36.

In the above Data URI, data represents the name of the agreement to get the data, image/png is the name of the data type, base64 is the encoding method of the data, and the comma is followed by the base64 encoded data of the image/png file.

You may have noticed that on some web pages, the url of a picture's src or css background picture is not our common online picture link, but a long string of characters, such as this:

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/H6iQ0hTh7iPWglzTFXj5u2b+rSxcUDTw6ftXceiBPkhtCcs2XNgutGTc1aTePOuQ3nd9pZCPjMbILzN2/YS265mZEQWfLkvJAjdx5LurTp0xpGoJSlNHXV1kthro4Jk8WpnheRAgN4wuCWhbxaC81I03bvfcSNf1SS+pnVfVAIJme4vDhtnRqnT5WqO3jS7z6Ys7a4lKn26g3FVwnZqVd460QzsnT6dLdH77+IURwqi796/P/ZnYcea/R1d9197wnoy08JwobfbMXsR5NUTyTkoC/0yZeeScONUgoTPag2HDIjJtdSgLO5NGB8x8WHxXj9bZhMSS++lGJsKqoEowoh9qhDQTdmpV6N2PGEHI4YXugfagEdxJtFr1FFwV1d2SENZZKYw+SWZIBFB15y/QWml1/OM6VdoGVywV7tvFWll2g14s2bZIZJJ5wTsJlYnOggpiY2jMiJyTt8vmVJN36iadafaXqWZaHWFMYHm435cQ1c9TBmaJlWHrJnaIYWGklf1iAWiGCZFZbWZImV9Y2mc4rWqKmwUsonYLVWQ5iqr1IGqK+5hjpNr2fWmWmWXA32jrEFzJL5QAIAOw==

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

Currently, the types supported by Data URI scheme are:

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 picture data data:image/x-icon;base64,base64 encoded icon picture data

Simply put, base64 translates some 8-bit data into standard ASCII characters, which can be encoded with the function base64_encode () in PHP.

Currently, IE8, Firfox, Chrome, and Opera browsers all support this kind of small file embedding. For IE7 and previous versions, data URI scheme compatibility issues can be resolved by using MHTML.

Give examples to illustrate

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

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 in the HTML file, which has the advantage of saving a HTTP request and speeding up the loading speed, while the downside may cause the browser not to cache the image.

2. An example of the implementation method of picture base64 coding.

2.1 implementation of picture base64 coding code with JS

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 an image type"); return false;} var reader = new FileReader (); reader.readAsDataURL (file) Reader.onload = function (e) {result [XSS _ clean] ='

'; img_ area [XSS _ clean] =' Image img tag shows:

';}}

2.2 implementation of picture base64 coding using FileReader of HTML5

HTML5 Javascript version 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 an image type"); return false;} var reader = new FileReader (); reader.readAsDataURL (file) Reader.onload = function (e) {result [XSS _ clean] ='

'; img_ area [XSS _ clean] =' Image img tag shows:

On how to achieve Data URI scheme and real picture base64 coding to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.