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 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
详解JavaScript中数组的reduce方法
Dec 02 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
React 组件渲染和更新的实现代码示例
Feb 21 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
JavaScript实现简单的计算器
Jan 16 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 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中的Session对象如何使用
2015/09/25 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
浅谈Vue的基本应用
2016/12/27 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
分享6个隐藏的python功能
2017/12/07 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
Python argparse模块应用实例解析
2019/11/15 Python
Python post请求实现代码实例
2020/02/28 Python
python列表的逆序遍历实现
2020/04/20 Python
Python编写单元测试代码实例
2020/09/10 Python
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
班主任新年寄语
2014/04/04 职场文书
《荷花》教学反思
2014/04/16 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
夫妻吵架保证书
2015/05/08 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
python tkinter实现定时关机
2021/04/21 Python
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB