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 相关文章推荐
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 Javascript
Jquery 扩展方法
May 06 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
深入探寻javascript定时器
Jan 02 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
关于JavaScript语句后面的分号问题
Dec 07 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 27 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通过数组实现多条件查询实现方法(字符串分割)
2014/05/06 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
Vue渲染函数详解
2017/09/15 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
详解Python pygame安装过程笔记
2017/06/05 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
Django的models模型的具体使用
2019/07/15 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
有关HTML5页面在iPhoneX适配问题
2017/11/13 HTML / CSS
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
暑假实习求职信范文
2013/09/22 职场文书
费用会计岗位职责
2014/01/01 职场文书
《跨越百年的美丽》教学反思
2014/02/11 职场文书
公司会计主管岗位责任制
2014/03/01 职场文书
统计学教授推荐信
2014/09/18 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
高中开学感言
2015/08/01 职场文书