微学网

热门关键词:   as  thinkphp  ecshop  xxx  商务通  www.ymwears.cn
热门: ASP.NET PHP编程 ASP编程 JSP编程 Python

Data URI scheme详解和使用实例及图片base64编码实现

发布时间:2017-05-13 来源:未知 点击:
点评:这篇文章主要介绍了Data URI scheme详解和使用实例及图片base64编码实现方法,需要的朋友可以参考下

一、 Data URI scheme 简介9nsHTML5中文学习网 - HTML5先行者学习网

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

代码如下: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==9nsHTML5中文学习网 - HTML5先行者学习网

9nsHTML5中文学习网 - HTML5先行者学习网
这是什么呢?这就是程序员学习网今天要介绍的 Data URI scheme。9nsHTML5中文学习网 - HTML5先行者学习网

9nsHTML5中文学习网 - HTML5先行者学习网
目前,Data URI scheme支持的类型有:9nsHTML5中文学习网 - HTML5先行者学习网

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

9nsHTML5中文学习网 - HTML5先行者学习网
举例说明9nsHTML5中文学习网 - HTML5先行者学习网
9nsHTML5中文学习网 - HTML5先行者学习网
网页中一张图片可以这样显示:9nsHTML5中文学习网 - HTML5先行者学习网

代码如下:<img src=”http://www./images/logo.png”/>9nsHTML5中文学习网 - HTML5先行者学习网
也可以这样显示:9nsHTML5中文学习网 - HTML5先行者学习网

代码如下:<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==”/>9nsHTML5中文学习网 - HTML5先行者学习网

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

二、图片 base64 编码的实现方法示例9nsHTML5中文学习网 - HTML5先行者学习网

2.1 JS实现图片 base64 编码代码9nsHTML5中文学习网 - HTML5先行者学习网

代码如下:9nsHTML5中文学习网 - HTML5先行者学习网
function readFile(){9nsHTML5中文学习网 - HTML5先行者学习网
var file = this.files[0];9nsHTML5中文学习网 - HTML5先行者学习网
if(!/image///w+/.test(file.type)){9nsHTML5中文学习网 - HTML5先行者学习网
alert("请确保文件为图像类型");9nsHTML5中文学习网 - HTML5先行者学习网
return false;9nsHTML5中文学习网 - HTML5先行者学习网
}9nsHTML5中文学习网 - HTML5先行者学习网
var reader = new FileReader();9nsHTML5中文学习网 - HTML5先行者学习网
reader.readAsDataURL(file);9nsHTML5中文学习网 - HTML5先行者学习网
reader.onload = function(e){9nsHTML5中文学习网 - HTML5先行者学习网
result.innerHTML = '<img src="'+this.result+'" alt=""/>';9nsHTML5中文学习网 - HTML5先行者学习网
img_area.innerHTML = '<div class="sitetip">图片img标签展示:</div><img src="'+this.result+'" alt=""/>';9nsHTML5中文学习网 - HTML5先行者学习网
}9nsHTML5中文学习网 - HTML5先行者学习网
}9nsHTML5中文学习网 - HTML5先行者学习网
9nsHTML5中文学习网 - HTML5先行者学习网

2.2 利用 HTML5 的 FileReader 实现图片 base64 编码9nsHTML5中文学习网 - HTML5先行者学习网

HTML5 Javascript 版本核心代码:9nsHTML5中文学习网 - HTML5先行者学习网


代码如下:9nsHTML5中文学习网 - HTML5先行者学习网
function readFile(){9nsHTML5中文学习网 - HTML5先行者学习网
var file = this.files[0];9nsHTML5中文学习网 - HTML5先行者学习网
if(!/image///w+/.test(file.type)){9nsHTML5中文学习网 - HTML5先行者学习网
alert("请确保文件为图像类型");9nsHTML5中文学习网 - HTML5先行者学习网
return false;9nsHTML5中文学习网 - HTML5先行者学习网
}9nsHTML5中文学习网 - HTML5先行者学习网
var reader = new FileReader();9nsHTML5中文学习网 - HTML5先行者学习网
reader.readAsDataURL(file);9nsHTML5中文学习网 - HTML5先行者学习网
reader.onload = function(e){9nsHTML5中文学习网 - HTML5先行者学习网
result.innerHTML = '<img src="'+this.result+'" alt=""/>';9nsHTML5中文学习网 - HTML5先行者学习网
img_area.innerHTML = '<div class="sitetip">图片img标签展示:</div><img src="'+this.result+'" alt=""/>';9nsHTML5中文学习网 - HTML5先行者学习网
}9nsHTML5中文学习网 - HTML5先行者学习网
}9nsHTML5中文学习网 - HTML5先行者学习网
9nsHTML5中文学习网 - HTML5先行者学习网

9nsHTML5中文学习网 - HTML5先行者学习网

这就是微学网-程序员之家为你提供的"Data URI scheme详解和使用实例及图片base64编码实现"希望对你有所帮助.本文来自网络,转载请注明出处:http://www.weixuecn.cn/article/6768.html
网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 框架 | 服务器 | 微信开发 | APP开发 | 学习教程 |

凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2021 微学网 版权所有,并保留所有权利。 备案号:粤ICP备09051474号-1

菜鸟学习网,提供各类程序编程入门,技巧