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 相关文章推荐
为调试JavaScript添加输出窗口的代码
Feb 07 Javascript
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 Javascript
JavaScript中的时间处理小结
Feb 24 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
详解vue组件通信的三种方式
Jun 30 Javascript
vue数据初始化initState的实例详解
Apr 11 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 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/03/23 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
比Jquery的document.ready更快的方法
2010/04/28 Javascript
js href的用法
2010/05/13 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
js实现验证码功能
2020/07/24 Javascript
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
python实现的文件同步服务器实例
2015/06/02 Python
python链接Oracle数据库的方法
2015/06/28 Python
Ubuntu下安装PyV8
2016/03/13 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
应届生船舶驾驶求职信
2013/10/19 职场文书
蛋糕店的商业计划书范文
2014/01/27 职场文书
家长写给老师的建议书
2014/03/13 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
三方股东合作协议书
2014/10/28 职场文书
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL