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创建数组之联合数组的使用方法示例
Dec 26 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 Javascript
React.js组件实现拖拽排序组件功能过程解析
Apr 27 Javascript
Element Input输入框的使用方法
Jul 26 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
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
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
python有证书的加密解密实现方法
2014/11/19 Python
Python制作词云的方法
2018/01/03 Python
Python 十六进制整数与ASCii编码字符串相互转换方法
2018/07/09 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
Python continue语句实例用法
2020/02/06 Python
Python实现ATM系统
2020/02/17 Python
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
商场端午节活动方案
2014/01/29 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
六一活动主持词
2015/06/30 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android