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 相关文章推荐
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
详细分析单线程JS执行问题
Nov 22 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 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图片加水印原理(超简单的实例代码)
2013/01/18 PHP
php判断linux下程序问题实例
2015/07/09 PHP
PHP类的特性实例分析
2016/09/28 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
Python 条件判断的缩写方法
2008/09/06 Python
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
python监控文件并且发送告警邮件
2018/06/21 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
python实现简单登陆系统
2018/10/18 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
大学毕业登记表自我鉴定
2013/10/09 职场文书
导游的职业规划书范文
2013/12/27 职场文书
社团文化节邀请函
2014/01/10 职场文书
市场营销方案范文
2014/03/11 职场文书
企业宗旨标语
2014/06/10 职场文书
重阳节活动总结
2014/08/27 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
Python实现聚类K-means算法详解
2022/07/15 Python