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 非图片动态loading效果实现代码
Apr 09 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
JavaScript Math.round() 方法
Dec 18 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 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中多维数组按指定value排序的实现代码
2014/08/19 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
详解webpack babel的配置
2018/01/09 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
python实现自动更换ip的方法
2015/05/05 Python
Python Matplotlib库入门指南
2015/05/18 Python
Python实现的概率分布运算操作示例
2017/08/14 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
Python格式化输出%s和%d
2018/05/07 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
企业文化标语口号
2014/06/09 职场文书
环保宣传标语
2014/06/12 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
Python进程间的通信之语法学习
2022/04/11 Python