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 写类方式之三
Jul 05 Javascript
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 Javascript
JS字符串截取函数实例
Dec 27 Javascript
如何将php数组或者对象传递给javascript
Mar 20 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 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与SQL注入攻击[三]
2007/04/17 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
python学生信息管理系统实现代码
2019/12/17 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
python 制作简单的音乐播放器
2020/11/25 Python
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
Notino法国:购买香水和化妆品
2019/04/15 全球购物
2013的个人自我评价
2013/12/26 职场文书
刘胡兰的英雄事迹材料
2014/02/11 职场文书
2014年公司工作总结
2014/11/22 职场文书
初一军训感言
2015/08/01 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS