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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
js跨域问题之跨域iframe自适应大小实现代码
Jul 17 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
npm全局模块卸载及默认安装目录修改方法
May 15 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 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+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
php的ddos攻击解决方法
2015/01/08 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
python常用排序算法的实现代码
2019/11/08 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
单位作风建设剖析材料
2014/10/11 职场文书
大学生实训报告总结
2014/11/05 职场文书
顶岗实习协议书
2015/01/29 职场文书
党支部意见范文
2015/06/02 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
python实现简单的名片管理系统
2021/04/26 Python
python中pycryto实现数据加密
2022/04/29 Python
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL