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

 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=“log.gif”/> 
 
也可以这样显示: 
 代码如下:
<img src=“data:image/gif;base64,R0lGODlhAgACAIAAAP///wAAACwAAAAAAgACAAACAoRRADs=”/> 
 
我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求。坏处呢,就是浏览器不会缓存这种图像。 
 

时间: 2024-08-14 01:05:41

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

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

Data URI scheme. Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入.比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到它了,一张2*2的白色gif图片. 在上面的Data URI中,data表示取得数据的协定名称,image/gif是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/gif文件base64编码后的数据. 目前,Data URI sc

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

Base64编码文件二进制流是使用base64_encode函数对文件二进制信息进行编码. 官方说明 base64_encode - 使用 MIME base64 对数据进行编码 Report a bug 说明 string base64_encode ( string $data ) 使用 base64 对 data 进行编码. 设计此种编码是为了使二进制数据可以通过非纯 8-bit 的传输层传输,例如电子邮件的主体. Base64-encoded 数据要比原始数据多占用 33% 左右的空间.

JS 实现Base64编码与解码实例详解_javascript技巧

Js实现Base64编码与解码 Base64其实是一种简单的置换加密方式,但是BASE64的用处往往并不是为了防止信息泄露,而且为了方便传输,进过BASE64编码后的信息会比原始信息长,大概是4/3倍. Base64是一种基于64个可打印字符来表示二进制数据的表示方法.由于2的6次方等于64,所以每6个比特为一个单元,对应某个可打印字符. Base64常用于在通常处理文本数据的场合,表示.传输.存储一些二进制数据.包括MIME的email,email via MIME, 在XML中存储复杂数据.

Js实现Base64编码与解码_JSP编程

Base64是一种基于64个可打印字符来表示二进制数据的表示方法.由于2的6次方等于64,所以每6个比特为一个单元,对应某个可打印字符. Base64常用于在通常处理文本数据的场合,表示.传输.存储一些二进制数据.包括MIME的email,email via MIME, 在XML中存储复杂数据. 1.加密解密方法使用: //1.加密 var str = '124中文内容'; var base = new Base64(); var result = base.encode(str); //doc

Python获取图片的Base64编码实例代码及把图片转Base64编码

用Python 获取图片的Base64编码,源代码如下:  代码如下 复制代码 #!/usr/bin/env python # -*- coding: utf-8 -*- ''' # base64-pic.py ''' import os, base64 icon = open('ya.png','rb') iconData = icon.read() iconData = base64.b64encode(iconData) LIMIT = 60 liIcon = [] while True:

android Java BASE64编码和解码二:图片的编码和解码

1.准备工作  (1)在项目中集成 Base64 代码,集成方法见第一篇博文:android Java BASE64编码和解码一:基础     (2)添加 ImgHelper 工具类   package com.app21; import java.io.ByteArrayOutputStream; import java.io.FileInputStream; import java.io.IOException; import android.graphics.Bitmap; import

Flex 加载Base64编码的二进制字符串图片_Flex

复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationCompl

优化JS和CSS更快地下载网页图片

文章简介:我关注JS和CSS的重点也是如何能够更快地下载图片.图片是用户可以直观看到的.他们并不会关注JS和CSS.确实,JS和CSS会影响图片内容的展示,尤其是会影响图片的展示方式(比如图片轮播,CSS背景图和媒体查询).但是我认为JS和CSS只是展示图片的方式.在页面加载的过程 我的大部分性能优化工作都集中在JavaScript和CSS上,从早期的Move Scripts to the Bottom和Put Stylesheets at the Top规则.为了强调这些规则的重要性,我甚至说

node.js学习之base64编码解码_node.js

一. Base64编码由来 为什么会有Base64编码呢?因为有些网络传送渠道并不支持所有的字节,例如传统的邮件只支持可见字符的传送,像ASCII码的控制字符就 不能通过邮件传送.这样用途就受到了很大的限制,比如图片二进制流的每个字节不可能全部是可见字符,所以就传送不了.最好的方法就是在不改变传统协议的情 况下,做一种扩展方案来支持二进制文件的传送.把不可打印的字符也能用可打印字符来表示,问题就解决了.Base64编码应运而生,Base64就是一种 基于64个可打印字符来表示二进制数据的表示方法