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函数把URL参数解析成Json对象
Sep 24 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
jQuery validata插件实现方法
Jun 25 jQuery
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
vue-quill-editor实现图片上传功能
Aug 08 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
May 23 Javascript
细说webpack6 Babel的使用详解
Sep 26 Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 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判断变量的函数
2012/04/24 PHP
php curl选项列表(超详细)
2013/07/01 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
npm的lock机制解析
2019/06/20 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
一张图带我们入门Python基础教程
2017/02/05 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
python实现静态web服务器
2019/09/03 Python
python监控nginx端口和进程状态
2019/09/06 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
专业毕业生个性的自我评价
2013/10/03 职场文书
应届毕业生自荐信
2014/05/28 职场文书
心理学专业求职信
2014/06/16 职场文书
激励口号大全
2014/06/17 职场文书
2014年公务员工作总结
2014/11/18 职场文书
Python 批量下载阴阳师网站壁纸
2021/05/19 Python