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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
Jan 15 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
js 用于检测类数组对象的函数方法
May 02 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
JavaScript实现通讯录功能
Dec 27 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扩展函数
2006/10/09 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
PHP实现获取FLV文件的时间
2015/02/10 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
解决laravel session失效的问题
2019/10/14 PHP
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
Python实现简单http服务器
2018/04/12 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
Django实现分页显示效果
2019/10/31 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
销售部主管岗位职责
2013/12/18 职场文书
总裁办公室主任职责
2014/01/02 职场文书
通信工程专业求职信
2014/06/04 职场文书
材料物理专业求职信
2014/09/01 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python