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下申明对象的几种方法小结
Oct 02 Javascript
js 对象是否存在判断
Jul 15 Javascript
js事件(Event)知识整理
Oct 11 Javascript
JS实现一个列表中包含上移下移删除等功能
Sep 24 Javascript
JavaScript声明变量名的语法规则
Jul 10 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
JavaScript提升机制Hoisting详解
Oct 23 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实现LOL数据远程获取
2014/06/10 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
php命令行模式代码实例详解
2021/02/26 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
js时间戳转为日期格式的方法
2015/12/28 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
在Python下尝试多线程编程
2015/04/28 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
迎接领导欢迎词
2014/01/11 职场文书
服务员自我评价
2014/01/25 职场文书
毕业论文评语大全
2014/04/29 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
优秀教师推荐材料
2014/12/16 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏