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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
Javascript执行效率全面总结
Nov 04 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
Aug 17 Javascript
AngularJs 国际化(I18n/L10n)详解
Sep 01 Javascript
Vue中使用vux的配置详解
May 05 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 Javascript
javascript流程控制语句集合
Sep 18 Javascript
vue element-ui实现动态面包屑导航
Dec 23 Javascript
javaScript实现一个队列的方法
Jul 14 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 setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
vue组件学习教程
2017/09/09 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
法律专业学生的自我评价
2014/02/07 职场文书
运动会跳远加油稿
2014/02/20 职场文书
家庭教育的心得体会
2014/09/01 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
小学生思想品德评语
2014/12/31 职场文书
人民币使用说明书
2019/04/17 职场文书
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS