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 相关文章推荐
各浏览器对click方法的支持差异小结
Jul 31 Javascript
JavaScript基本编码模式小结
May 23 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
Node调试工具JSHint的安装及配置教程
May 27 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
利用Vue实现简易播放器的完整代码
Dec 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版微信公众平台红包API
2015/04/02 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
快速解决element的autofocus失效问题
2020/09/08 Javascript
linux下安装easy_install的方法
2013/02/10 Python
用python实现面向对像的ASP程序实例
2014/11/10 Python
用matplotlib画等高线图详解
2017/12/14 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
路政管理专业推荐信
2013/11/11 职场文书
委托书样本
2014/04/02 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
业务员辞职信范文
2015/03/02 职场文书
地道战观后感
2015/06/04 职场文书
亮剑观后感
2015/06/05 职场文书
如何写好开幕词?
2019/06/24 职场文书
OpenFeign实现远程调用
2022/08/14 Java/Android