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实现顶部社会化分享按钮示例
May 06 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
css3实现六边形边框的实例代码
May 24 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
CSS3实现的水平标题菜单
Apr 14 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和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
python进程与线程小结实例分析
2018/11/11 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
jquery插件之easing 动态菜单
2010/08/21 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
python安装以及IDE的配置教程
2015/04/29 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
详解python内置模块urllib
2020/09/09 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
游戏商店:Eneba
2020/04/25 全球购物
党建示范点实施方案
2014/03/12 职场文书
经营管理策划方案
2014/05/22 职场文书
学校社会实践活动总结
2014/07/03 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
Python数组变形的几种实现方法
2022/05/30 Python