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

这是什么呢？这就是今天要介绍的 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=”https://www.jb51.net/images/logo.png”/>

也可以这样显示：

复制代码

代码如下:

<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==”/>

我们把图像文件的内容直接写在了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="'+this.result+'" alt=""/>';
img_area.innerhtml = '<div class="sitetip">图片img标签展示：</div><img src="'+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="'+this.result+'" alt=""/>';
img_area.innerhtml = '<div class="sitetip">图片img标签展示：</div><img src="'+this.result+'" alt=""/>';
}
}