js 显示base64编码的二进制流网页图片


Posted in Javascript onApril 04, 2014

Data URI scheme。
Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到它了,一张2*2的白色gif图片。
在上面的Data URI中,data表示取得数据的协定名称,image/gif是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/gif文件base64编码后的数据。
目前,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 字符,网上有很多免费的base64 编码和解码的工具,在PHP中可以用函数base64_encode() 进行编码,如echo base64_encode(file_get_contents(‘images/log.gif”'));
目前,IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。
举个图片的例子:
网页中一张图片可以这样显示:

<img src=“http://www.jwzzsw.com/images/log.gif”/>

也可以这样显示:
<img src=“data:image/gif;base64,R0lGODlhAgACAIAAAP///wAAACwAAAAAAgACAAACAoRRADs=”/>

我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求。坏处呢,就是浏览器不会缓存这种图像。
Javascript 相关文章推荐
5个javascript的数字格式化函数分享
Dec 07 Javascript
javascript实现文本域写入字符时限定字数
Feb 12 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
JavaScript中的事件委托及好处
Jul 12 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 #Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 #Javascript
javascript移出节点removeChild()使用介绍
Apr 03 #Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 #Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 #Javascript
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 #Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 #Javascript
You might like
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
php类声明和php类使用方法示例分享
2014/03/29 PHP
php字符串操作常见问题小结
2016/10/11 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
开业庆典邀请函
2014/01/08 职场文书
大学生个人求职信
2014/06/02 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
建筑横幅标语
2014/10/09 职场文书
《搭石》教学反思
2016/02/18 职场文书