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 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
JS控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
jQuery toggle()设置CSS样式
Nov 05 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
详解vuejs几种不同组件(页面)间传值的方式
Jun 01 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
bootstrap下拉框动态赋值方法
Aug 10 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 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各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
python基于phantomjs实现导入图片
2016/05/13 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
利用django创建一个简易的博客网站的示例
2020/09/29 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
银行优秀员工事迹
2014/02/06 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
快餐公司创业计划书
2014/04/29 职场文书
学校志愿者活动总结
2014/06/27 职场文书
行政专员岗位职责范本
2014/08/26 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
个人查摆剖析材料
2014/10/04 职场文书
杨善洲电影观后感
2015/06/04 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL