科技常识：Data URI scheme详解和使用实例及图片base64编码实现方法

今天小编跟大家讲解下有关Data URI scheme详解和使用实例及图片base64编码实现方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关Data URI scheme详解和使用实例及图片base64编码实现方法 的相关资料，希望小伙伴们看了有所帮助。

一、 Data URI scheme 简介

Data URI scheme是在RFC2397中定义的 目的是将一些小的数据 直接嵌入到网页中 从而不用再从外部文件载入。比如上面那串字符 其实是一张小图片 将这些字符复制黏贴到火狐的地址栏中并转到 就能看到它了 一张1X36的白灰png图片。在上面的Data URI中 data表示取得数据的协定名称 image/png 是数据类型名称 base64 是数据的编码方法 逗号后面就是这个image/png文件base64编码后的数据。或许你已经注意到 在有的网页上 图片的 src 或 css 背景图片的 url 并不是我们常见的在线图片链接 而是一大串的字符 比如像这样：复制代码代码如下: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==

这是什么呢 这就是AIDI今天要介绍的 Data URI scheme。

目前 Data URI scheme支持的类型有：复制代码代码如下:data:,文本数据data:text/plain,文本数据data:text/html,HTML代码data:text/html;base64,base64编码的HTML代码data:text/css,CSS代码data:text/css;base64,base64编码的CSS代码data:text/javascript,Javascript代码data:text/javascript;base64,base64编码的Javascript代码data:image/gif;base64,base64编码的gif图片数据data:image/png;base64,base64编码的png图片数据data:image/jpeg;base64,base64编码的jpeg图片数据data:image/x-icon;base64,base64编码的icon图片数据base64简单地说 它把一些 8-bit 数据翻译成标准 ASCII 字符 在PHP中可以用函数base64_encode() 进行编码。目前 IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。对于 IE7 及之前版本 可通过使用MHTML 解决 data URI scheme 的兼容问题。

举例说明网页中一张图片可以这样显示：复制代码代码如下:<img src=/skin/7ke/image/nopic.gif src=/skin/7ke/image/nopic.gif>

我们把图像文件的内容直接写在了HTML 文件中 这样做的好处是 节省了一个HTTP 请求使得加载速度得以提升 坏处则可能导致浏览器不会缓存这种图像。

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

2.1 JS实现图片 base64 编码代码复制代码代码如下: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 src="https://www.aidi.net.cn//html5/'+this.result+'"alt=""/>'; img_area.innerHTML = '<div class="sitetip">图片img标签展示：</div><img src="https://www.aidi.net.cn//html5/'+this.result+'"alt=""/>'; }}

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

HTML5 Javascript 版本核心代码：

复制代码代码如下: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 src="https://www.aidi.net.cn//html5/'+this.result+'"alt=""/>'; img_area.innerHTML = '<div class="sitetip">图片img标签展示：</div><img src="https://www.aidi.net.cn//html5/'+this.result+'"alt=""/>'; }}

来源：爱蒂网