全国服务热线:4008-888-888

技术知识

Data URI scheme详解和应用案例及照片base64编号完成

1、 Data URI scheme 简介

Data URI scheme是在RFC2397中界定的,目地是将1些小的数据信息,立即嵌入到网页页面中,从而无需再由外部文档加载。例如上面那串标识符,实际上是1张小照片,将这些标识符拷贝黏贴到火狐的详细地址栏中并转到,就可以看到它了,1张1X36的白灰png照片。
在上面的Data URI中,data表明获得数据信息的协约名字,image/png 是数据信息种类名字,base64 是数据信息的编号方式,逗号后边便是这个image/png文档base64编号后的数据信息。
也许你早已留意到,在有的网页页面上,照片的 src 或 css 情况照片的 url 其实不是大家普遍的线上照片连接,而是1大串的标识符,例如像这样:

拷贝编码
编码以下:
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简易地说,它把1些 8-bit 数据信息汉语翻译成规范 ASCII 标识符,在PHP中能够用涵数base64_encode() 开展编号。

现阶段,IE8、Firfox、Chrome、Opera访问器都适用这类小文档嵌入。针对 IE7 及以前版本号,可根据应用MHTML 处理 data URI scheme 的适配难题。


举例表明

网页页面中1张照片能够这样显示信息:

拷贝编码
编码以下:
<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 文档中,这样做的益处是,节约了1个HTTP 恳求使得载入速率得以提高,弊端则将会致使访问器不容易缓存文件这类图象。

2、照片 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=""/>';
}
}



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服