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中的Primitive对象封装介绍
Dec 31 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
微信小程序自定义导航栏
Dec 31 Javascript
详解ES6中的Map与Set集合
Mar 22 Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
php数组键名技巧小结
2015/02/17 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
js二级地域选择的实现方法
2013/06/17 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
Python中isnumeric()方法的使用简介
2015/05/19 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
Python中的pack和unpack的使用
2018/03/12 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
在python中修改.properties文件的操作
2020/04/08 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
opencv 阈值分割的具体使用
2020/07/08 Python
美国顶级水上运动专业店:Marine Products
2018/04/15 全球购物
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
2015年高校辅导员工作总结
2015/04/20 职场文书
2015年保管员工作总结
2015/04/30 职场文书
亮剑观后感300字
2015/06/05 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
sql server 累计求和实现代码
2022/02/28 SQL Server
一级电子管军用接收机测评
2022/04/05 无线电