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


Posted in HTML / CSS onMay 08, 2014

一、 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://3water.com/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=""/>';
}
}
HTML / CSS 相关文章推荐
纯CSS3打造属于自己的“小黄人”
Mar 14 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 HTML / CSS
使用HTML5的File实现base64和图片的互转
Aug 01 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 HTML / CSS
Html5调用企业微信的实现
Apr 16 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 #HTML / CSS
html5实现canvas阴影效果示例
May 07 #HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 #HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 #HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 #HTML / CSS
html5 datalist标签使用示例(自动完成组件)
May 04 #HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
May 03 #HTML / CSS
You might like
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
解析php中memcache的应用
2013/06/18 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
JavaScript 私有成员分析
2009/01/13 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
Django返回json数据用法示例
2016/09/18 Python
Python中functools模块函数解析
2017/03/12 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
车间副主任岗位职责
2013/12/24 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
文员岗位职责范本
2015/04/16 职场文书
毕业论文致谢信
2015/05/14 职场文书
网络妈妈观后感
2015/06/08 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
零基础学java之循环语句的使用
2022/04/10 Java/Android
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang