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 Keycode对照表
Oct 24 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
JavaScript中伪协议 javascript:使用探讨
Jul 18 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
Feb 18 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
javascript实现超好看的3D烟花特效
Jan 01 Javascript
vue3使用vue-count-to组件的实现
Dec 25 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内置过滤器FILTER使用实例
2014/06/25 PHP
php文件上传简单实现方法
2015/01/24 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
显示js对象所有属性和方法的函数
2009/10/16 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
JS中数据结构之栈
2019/01/01 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
python的变量与赋值详细分析
2017/11/08 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
python 实现aes256加密
2020/11/27 Python
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
医学院学生求职简历的自我评价
2013/10/24 职场文书
党的群众路线教育实践活动对照检查材料思想汇报
2014/09/19 职场文书
报到证办理个人委托书
2014/10/06 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
社区端午节活动总结
2015/02/11 职场文书
辩护词范文大全
2015/05/21 职场文书
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python