js 显示base64编码的二进制流网页图片

 更新时间:2014年04月04日 11:11:54   投稿:whsnow  
base64简单地说,它把一些 8-bit 数据翻译成标准 ASCII 字符,我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求

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

PS:这里再为大家提供一款在线图片转base64编码工具与base64编码转换工具供大家参考使用:

图片转换为Base64编码在线工具http://tools.jb51.net/transcoding/img2base64

BASE64编码解码工具:http://tools.jb51.net/transcoding/base64

相关文章

  • js对象合并与数组合并综合应用举例

    js对象合并与数组合并综合应用举例

    这篇文章主要给大家介绍了关于js对象合并与数组合并综合应用举例的相关资料,本文将介绍常见的JS对象合并和数组合并方法,帮助读者更好地理解和运用这些方法,需要的朋友可以参考下
    2023-11-11
  • js实现点赞按钮功能的实例代码

    js实现点赞按钮功能的实例代码

    这篇文章主要介绍了js实现点赞按钮功能,本文通过实例代码给大家介绍的非常详细,对大家的工作或学习具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • IE6、IE7中获取Button元素的值的bug说明

    IE6、IE7中获取Button元素的值的bug说明

    IE6、IE7中获取Button元素的值的bug说明,大家在以后使用dom操作的朋友可以注意下。
    2011-08-08
  • 使用clipboard.js库实现复制剪切功能

    使用clipboard.js库实现复制剪切功能

    这篇文章介绍了clipboard.js实现复制功能的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • 浅析Javascript ES6新增值比较函数Object.is

    浅析Javascript ES6新增值比较函数Object.is

    在Javascript中判断相等是很常见的,常用的判断有“==”,“===”,“!=”,“!==”,今天这篇文章我们来学习ES6中的一个方法Object.is(),有需要的可以参考学习。
    2016-08-08
  • JavaScript实现页面滚动图片加载(仿lazyload效果)

    JavaScript实现页面滚动图片加载(仿lazyload效果)

    网上的很多这样的效果都是用jQuery的方法,可是如果不用jQuery的站长难道就不能用这种方法了么
    2011-07-07
  • JavaScript制作楼层导航效果流程详解

    JavaScript制作楼层导航效果流程详解

    项目中遇到比较多的的文档内容,为了方便查找里面的小内容,一般都会在左侧或者右侧放一个固定楼层的导航栏,今天就来说一下这个固定楼层导航栏的思路以及实现的方法
    2021-10-10
  • js 浏览器事件介绍

    js 浏览器事件介绍

    浏览器事件指载入文档直到该文档被关闭期间的浏览器事件,如浏览器载入文档事件onload、关闭该文档事件onunload、浏览器失去焦点事件onblur、获得焦点事件onfocus 等
    2012-03-03
  • Js控制滑轮左右滑动实例

    Js控制滑轮左右滑动实例

    这篇文章主要介绍了Js控制滑轮左右滑动实例,本文直接给出实现代码,需要的朋友可以参考下
    2015-02-02
  • Javascript解析URL方法详解

    Javascript解析URL方法详解

    本文介绍了完整的URL的结构构成以及解析URL的2种方法,包括正则分析法和split法,非常的简单实用,有需要的小伙伴可以参考下
    2014-12-12

最新评论