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访问CSS属性的几种方式介绍
Jul 21 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
vue项目总结之文件夹结构配置详解
Dec 13 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 Javascript
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
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实现简单ajax Loading加载功能示例
2016/12/28 PHP
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
微信小程序收藏功能的实现代码
2018/06/12 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
python使用Image处理图片常用技巧分析
2015/06/01 Python
使用Python的Flask框架构建大型Web应用程序的结构示例
2016/06/04 Python
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
python实现串口自动触发工作的示例
2019/07/02 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
文员个人求职自荐信
2013/09/21 职场文书
听课评语大全
2014/04/30 职场文书
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
原告离婚代理词
2015/05/23 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书