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 请求。坏处呢,就是浏览器不会缓存这种图像。

js 显示 base64编码 的二进制流 图片的更多相关文章

  1. php Base64编码文件二进制流主要使用

    <?php header( "Content-type: image/jpeg"); //$filename='1.jpg'; //$content=file_get_con ...

  2. JS实现——Base64编码解码,带16进制显示

    在网上找了个JS实现的Base64编码转换,所以就想自己研究下,界面如下: 将代码以BASE64方式加密.解密 请输入要进行编码或解码的字符: 编码结果以ASCII码16进制显示 解码结果以ASCII ...

  3. js的Base64编码与解码

    js的Base64编码与解码 pc和手机app项目中,经常需要将手机自带的表情图片转换特定的编码格式与后台进行交互. Base64其实是一种简单的置换加密方式,但是BASE64的用处往往并不是为了防止 ...

  4. C# base64编码的文本与图片互转

    /// <summary> /// base64编码的文本转为图片 /// </summary> /// <param name="txtFilePath&qu ...

  5. base64编码的字符串与图片相互转换

    #region 图片转为base64编码的字符串---ImgToBase64String /// <summary> /// 图片转为base64编码的字符串 /// </summa ...

  6. 接收二进制流(ArrayBuffer) ,并且显示二进制流图片

    1.调用接口,返回二进制流数据 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { && xhr ...

  7. ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践

    写在前面 :从提出需求到完美的解决问题,实现过程是曲折的. 需求:在前(web client)后(Restful Service)端完全解耦的模式框架下,webclient需要请求 Service 返 ...

  8. [转] js在浏览器端对二进制流进行AES加密和解密

    开始解密 简单了解一下所用的的AES加密算法,我们用的是AES的CFB加密方式,服务端会提供给我一个key和iv的二进制字节串.密文也是二进制字节串. 我用的加密/解密插件: crypto-js 一般 ...

  9. js实现base64编码与解码(原生js)

    一直以来很多人使用到 JavaScript 进行 base64 编码解码时都是使用的 Base64.js,但事实上,浏览器很早就原生支持 base64 的编码与解码了 以前的方式 编码: <ja ...

随机推荐

  1. odoo 开发 context 上下文的用法

    context   这是一个上下文,运用很灵活  得到整个context   self.context_get() self.env['res.users'].context_get() 得到cont ...

  2. 微信小程序,全局变量方法的使用

    方法一:app.js 内设置全局变量(如屏宽,屏高的设置) 1.app.js文件,定义全局变量 /定义全局变量 globalData:{ userInfo:null, sysInfo:null, wi ...

  3. Canvas 同心圆旋转示例解析

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 正则基础之——NFA引擎匹配原理

    记录一下一篇很好的博文:https://blog.csdn.net/lxcnn/article/details/4304651

  5. c/c++ int long float double 表示范围

    引自https://blog.csdn.net/xuexiacm/article/details/8122267

  6. Python学习--两种方法爬取网页图片(requests/urllib)

    实际上,简单的图片爬虫就三个步骤: 获取网页代码 使用正则表达式,寻找图片链接 下载图片链接资源到电脑 下面以博客园为例子,不同的网站可能需要更改正则表达式形式. requests版本: import ...

  7. 《JavaScript语言精粹》读书笔记

    第三章:对象 //1.定义一个方法 method Function .prototype.method=function(name, func){ this.prototype[name]=func; ...

  8. httpclient文件下载

    http://blog.csdn.net/nupt123456789/article/details/42721003

  9. 《c++primer》疑惑记录

    第4章 96页,数组维数为变量 第8章 246. IO对象不可复制.赋值原因是类设计时复制构造函数.赋值函数是私有的,为什么这么设计呢? 251. tie举例 第15章 484 派生类可以恢复,但不可 ...

  10. 实现 如 goole closure 类似功能模块加载函数

    看过goole  closure 的同学都知道  其中定义一个类名函数时候只要  inlude("")   想加载某个模块只要require("")就可以利用: ...