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 利用Cookie记录用户登录信息
Dec 08 Javascript
jQuery中绑定事件的命名空间详解
Apr 05 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
layui关闭层级、简单监听的实例
Sep 06 Javascript
JS前端基于canvas给图片添加水印
Nov 11 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 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
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
Python 爬虫模拟登陆知乎
2016/09/23 Python
Jupyter中直接显示Matplotlib的图形方法
2018/05/24 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
django中间键重定向实例方法
2019/11/10 Python
Python pandas库中的isnull()详解
2019/12/26 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
机电一体化专业应届生求职信
2013/11/27 职场文书
幼儿园实习生辞职信
2014/01/20 职场文书
会计工作决心书
2014/03/11 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
功夫熊猫观后感
2015/06/10 职场文书
python tkinter模块的简单使用
2021/04/07 Python
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python