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将页面表格导出为Excel的具体实现
Dec 27 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 Javascript
jquery中each方法示例和常用选择器
Jul 08 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
Jquery数字上下滚动动态切换插件
Aug 08 Javascript
json的使用小结
Jun 08 Javascript
Javascript的this用法
Jan 16 Javascript
Bootstrap实现翻页效果
Nov 27 Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
浅谈Vue.js组件(二)
Apr 09 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 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数字游戏 计算24算法
2012/06/10 PHP
php生成略缩图代码
2012/07/16 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
php强制下载文件函数
2016/08/24 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
js 验证密码强弱的小例子
2013/03/21 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
jquery操作select大全
2014/04/25 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
python根据出生日期返回年龄的方法
2015/03/26 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
python pandas 时间日期的处理实现
2019/07/30 Python
Django框架请求生命周期实现原理
2020/11/13 Python
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
扩大国家免疫规划实施方案
2014/03/21 职场文书
收款授权委托书
2014/10/02 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
Django drf请求模块源码解析
2021/06/08 Python