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
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 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
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
php读取数据库信息的几种方法
2008/05/24 PHP
php download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
php微信公众号开发模式详解
2016/11/28 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
js常见遍历操作小结
2019/06/06 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
python的keyword模块用法实例分析
2015/06/30 Python
python+Django+apache的配置方法详解
2016/06/01 Python
django中forms组件的使用与注意
2019/07/08 Python
基于Python正确读取资源文件
2020/09/14 Python
python空元组在all中返回结果详解
2020/12/15 Python
python中操作文件的模块的方法总结
2021/02/04 Python
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
4s店总经理岗位职责
2013/12/31 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
演讲比赛策划方案
2014/06/11 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
2014年物流工作总结
2014/11/25 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫
Oracle用户管理及赋权
2022/04/24 Oracle