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. mysql 查询json字段 json_extract (mysql 5.7及以上)

    找第一层: SELECT * FROM tourists WHERE json_data->'$.weixinOpenId' = '299485886686868' 或者 SELECT * FR ...

  2. ios模拟器安装测试包方法

    1. 使用ios-sim ios-sim是一个可以用命令空着ios模拟器的工具.利用这个命令,我们可以启动模拟器.安装app.启动app.查询ios sdk,它可以使我们像自动化测试一样打开xcode ...

  3. PIE SDK与OpenCV结合说明文档

    1.功能简介 OpenCV是基于BSD许可(开源)发行的跨平台计算机视觉库,可以运行在Linux.Windows.Android和Mac OS操作系统上.它轻量级而且高效——由一系列 C 函数和少量 ...

  4. WorldCount 结对项目

    合作者:201631062501,201631062129 代码地址:https://gitee.com/guilinyunya/WorldCount 伙伴博客地址:https://www.cnblo ...

  5. 迁移-Mongodb时间类数据比较的坑

    背景: 拦截件监控时,对于签收的数据需要比较签收时间和实际同步数据的时间来判断  同步时间是在签收前还是签收后.在比较时,用到同步时间syncTime和signTime, signTime从Q9查单获 ...

  6. 服务端模拟http服务请求客户端

    try { InputStream in = req.getInputStream(); int i = -1; ByteArrayOutputStream out = new ByteArrayOu ...

  7. CentOS6.5安装testlink1.9.14

    前提条件:准备一台CentOS6.5虚拟机,配置好IP,关闭iptables和selinux. 这里提供上我的云盘软件,可以去这里下载:http://pan.baidu.com/s/1qXymele ...

  8. Wamp设置虚拟目录

    1. 默认安装 wamp后,工作目录为"..../wamp/www" 也就是PHP文件只有放在此目录下才能打得开,打开Apache的配置文件httpd.conf可以看到: 这么两行 ...

  9. 使用idea开发工具,nginx服务部署Extjs6,SpringBoot项目到服务器

    编译ExtJs文件 1.输入命令 2.开始编译 3.找到编译后的文件 E:\idea_project\BaiSheng_Model\fin-ui\build\production\Admin 4.将文 ...

  10. 架构实战项目心得(六):后台服务nosql数据库mongodb

    一.架构介绍        mongodb有几种部署方式,这里采用的是副本集架构(Replica Set).        为了防止单点故障就需要引副本(Replication),当发生硬件故障或者其 ...