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 字符编码规则
May 04 Javascript
克隆javascript对象的三个方法小结
Jan 12 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
js实现交通灯效果
Jan 13 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 Javascript
JavaScript:ES2019 的新特性(译)
Aug 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分页思路以及在ZF中的使用
2012/05/30 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
php实现zip文件解压操作
2015/11/03 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
jQuery+HTML5加入购物车代码分享
2020/10/29 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
用Python实现KNN分类算法
2017/12/22 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
python遍历小写英文字母的方法
2019/01/02 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
Pycharm调试程序技巧小结
2020/08/08 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
python实现xml转json文件的示例代码
2020/12/30 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
南京软件公司的.net程序员笔试题
2014/08/31 面试题
银行求职推荐信范文
2013/11/30 职场文书
5s推行计划书
2014/05/06 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
会计学专业自荐信
2014/06/25 职场文书
党员群众路线对照检查材料
2014/08/31 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android
Django框架中模型的用法
2022/06/10 Python