上一篇介绍中,我们将二进制文件(BLOB)保存为Base64编码的文本,这些文本可以内嵌在XML的标签中,因此二进制信息它可以随着XML文件被拷贝、下载而不用担心信息会缺失。这项技术也在email邮件中被广泛使用。
浏览器对Base64的支持
图像是最经常被使用的一种二进制文件。而现代的浏览器的进步日新月异,IE7,FireFox和其他浏览器为包括Base64在内各种编码的图像信息提供了很好的支持。因此图形信息可以以下面的形式呈现在页面中、
Java代码
1
2
3
4
|
<img src= "data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////
wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4ML
wWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="
alt= "Base64 encoded image" width= "150" height= "150" />
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<body>
<img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////
wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4ML
wWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="
alt="Base64 encoded image" width="150" height="150"/>
</body>
</html>
这种data: URI的格式能把Base64(或其他数据)可以内嵌在image标签的属性当中(或者CSS中)。我们可以看到在大部分浏览器中的显示效果:
这种做法有利有弊,好处是浏览器可以在一个连接中得到完成的页面内容,不好的地方时图像的大小会增加1/3。因此,这种内嵌的方法适合对小的图形元素比如图标、圆角等等进行处理,从而减少浏览器打开的连接数,但对大的照片、图片(量少而大)等等则不应该使用Base64编码以免影响下载速度。
为了得到刚才的Base64编码,我们将上一篇的Java修改成Struts Action,并借用了JIMI进行图形的读取和格式转换,Base64编码器则改为更普遍的Apache Commons组件,代码如下:
Java代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
public class Base64ImageAction extends ActionSupport {
private final static String galleryName = "gallery" ;
private static String parent = null ;
private String encodeString = null ;
public String getEncodeString() {
return encodeString;
}
public void setEncodeString(String encodeString) {
this .encodeString = encodeString;
}
private String getImageFullPath() {
parent = new File( this .getClass().getClassLoader().getResource(
File.separator).getPath()).getParent()+File.separator+ "flag.jpg" ;
}
public String execute() {
ByteArrayOutputStream output = new ByteArrayOutputStream();
try {
JimiReader reader = Jimi.createJimiReader( this .getImageFullPath());
Image image = reader.getImage();
Jimi.putImage( "image/png" , image, output);
output.flush();
output.close();
this .encodeString = Base64.encodeBase64String(output.toByteArray());
} catch (IOException e) {
e.printStackTrace();
} catch (JimiException e) {
e.printStackTrace();
}
return SUCCESS;
}
}
|
对应的View端是个十分简单的Freemarker模板:
Html代码
1
2
3
4
5
6
7
8
|
<html>
<head>
<title>Hello,World</title>
</head>
<body>
<img src= "data:image/png;base64,${encodeString}" />
</body>
</html>
|
处理古代浏览器
世界总是不是那么完美,尽管大部分现代浏览器对Base64的处理都十分完善,但是我们不能不考虑到一些“古老”的浏览器,而现在还是普遍使用的“古老”的浏览器,就当属IE6,在IE6里试图浏览上面的图片可能会得到一个红叉叉。我们不得不为IE6做一些特殊处理,利用下面的JavaScript,我们把Base64字串传回服务器端,重新解析成图片
Javascript代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
var BASE64_DATA = /^data:.*;base64/i;
var base64Path = "/my/path/base64.php" ;
function fixBase64(img) {
if (BASE64_DATA.test(img.src)) {
img.src = base64Path + "?" + img.src.slice(5);
}
};
onload = function () {
for ( var i = 0; i < document.images.length; i++) {
fixBase64(document.images[i]);
}
};
|
服务器端的Struts可以参考上面的例子做反向操作,具体从略。
更完美的方法
将Base64传回服务器解码是不错的IE6补丁,但是违背了我们的初衷,对IE6来说,浏览器连接数并未有任何减少。更直接的想法,是否能用Javascript直接在浏览器中,对Base64文本进行解码呢?我们构思的场景如下:服务器端先将图片转换成PNG格式以方便客户端进行处理,Base64编码之后,利用JSON将文本传递给浏览器客户端进行处理。
我们选择PNG图形格式是因为PNG已经俨然成为新的Web图形标准,它格式非常简单,可以很方便的用javascript进行处理而不需要借助浏览器的支持。我们知道javascript直接不能处理二进制数据,但是现在这不是个问题,服务器端已经准备好了Base64编码的文本数据,现在我们只需要一个javascript的Base64解析器,你可以在这里找到一个notmasteryet的Base64解析器。
现在PNG图形格式采用了DEFLATE作为唯一的压缩算法,该算法也广泛应用在ZIP,GZIP等压缩格式中。PNG图像格式文件(或者称为数据流)由一个8字节的PNG文件署名(PNG file signature)域和按照特定结构组织的3个以上的数据块(chunk)组成。
PNG定义了两种类型的数据块,一种是称为关键数据块(critical chunk),这是标准的数据块,另一种叫做辅助数据块(ancillary chunks),这是可选的数据块。关键数据块定义了4个标准数据块,其中图像数据块IDAT(image data chunk):它存储实际的数据, PNG总的数据流采用DEFLAT进行压缩。此外还擦用三角过滤“delta filters”来过滤每一行的像素的未压缩数据。DEFLAT和delta压缩在其他数据和文本处理中也被广泛应用。PNG格式你可以参考<a href="http://www.libpng.org/pub/png/spec/1.1/PNG-Contents.html">官方文档</a>。
很棒的,notmasteryet也为我们提供了一个DEFLAT解压器。
最后,我们把这些组合起来:
Html代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<head>
<title>Demo JavaScript PNG Viewer</title>
</head>
<body onload= "show(gravatar);" >
<script src= "../Source/Base64.js" type= "text/javascript" ></script>
<script src= "../Source/Deflate.js" type= "text/javascript" ></script>
<script src= "../Source/PNG.js" type= "text/javascript" ></script>
<script type= "text/javascript" >
var gravatar = 'iVBORw0KGgoAAAANSUhEUgAAA.......数据从略......55CYII=' ;
String.prototype.padRight = function (c, n){
var txt = '' ;
for ( var i=0;i<n- this .length;i++) txt += c;
return txt + this ;
};
function show(data){
var png = new PNG(data);
var img = document.getElementById( 'image' ), limg = document.getElementById( 'largeimage' );
document.getElementById( 'nativeimage' ).src = 'data:image/png;base64,' + data;
img.innerHTML = '' ;
limg.innerHTML = '' ;
img.style.width = png.width + 'px' ;
img.style.height = png.height + 'px' ;
limg.style.width = (png.width * 3) + 'px' ;
limg.style.width = (png.height * 3) + 'px' ;
var line;
while (line = png.readLine())
{
for ( var x = 0; x < line.length; x++){
var px = document.createElement( 'div' ), px2 = document.createElement( 'div' );
px.className = px2.className = 'pixel' ;
px.style.backgroundColor = px2.style.backgroundColor = '#' + line[x].toString(16).padRight( '0' , 6);
img.appendChild(px);
limg.appendChild(px2);
}
}
}
</script>
<div id= "image" ></div>
<div id= "largeimage" ></div>
<img id= "nativeimage" />
</body>
</html>
|
以上所述是小编给大家介绍的JS在浏览器中解析Base64编码图像,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
原文链接:http://blog.csdn.net/elf8848/article/details/39927385
相关推荐
主要介绍了JS在浏览器中解析Base64编码图像的相关资料,需要的朋友可以参考下
在Base64中的可打印字符包括字母A-Z、a-z、数字0-9,这样共有62个字符,此外的两个可打印符号在不同的系统中而不同,一般为+和/。 转换原理 Base64的直接数据源是二进制序列(Binary Sequence)。当然,你也可以将图片...
由于遇到做一个支付平台的接口参数要做base64 于是就写了一个用javascript编写的方法,对方支付平台是java的 ,于就将中文做了一个unicode转为assi码处理。
labview 图片缩放 base64编码base64解码
基于Linux操作系统下 图像与BASE64编码互转,图像BASE64数据编码的加/解密
需要一个二进制与BASE64相互转换的函数,从网上找...示例中提供二进制与16进制字符串转换函数ConvertHexStrToBin与ConvertBinToHexStr,二进制与BASE64编码转换函数Base64Encode与Base64Decode,在VC6下编译通过可用。
图片流转存Base64编码然后转图片 Spring 框下的
提供一种Base64编码,并输出UTF-8格式的BASE64编码方式。本程序在微信小程序开发工具中已经测试通过。 Base64代码: [javascript] view plain copy print? (function(){ var BASE64_MAPPING = [ 'A','B','C','D',...
可以实现将文件转换为Base64编码。可以实现将文件转换为Base64编码。
Base64编码与图片互转
易语言 base64编码转图片 如何 提高转换速度.zip
易语言汇编base64编码源码,汇编base64编码,Base64Encode,Base64Decode
Hex十六进制/Base64编码转换器,可对字符串文本进行十六进制及Base64编码与反编码
我在网上找了半天的java、js的base64编码解码结果没有,只好自己写了,js一个文件,java一个文件,调用里面是使用方法
【程序老媛出品,必属精品,亲测校正,...资源名:vb 图片转base64编码 程序源码 资源类型:程序源代码 源码说明: 基于vb编写的实现图片转base64编码程序源码 非常适合借鉴学习 适合人群:新手及有一定经验的开发人员
易语言新BASE64编码转换模块源码例程程序使用字节集数据内部字节的左移位与,实现BASE64编码的快速转换。本易语言模块源码是易语言论坛用户近在眼前编写的。资源作者:。易语言学习网。资源下载:。
易语言新BASE64编码转换模块源码,新BASE64编码转换模块,新BASE64编码1
C++写的图片编码和解码,Demo简单易懂,代码可以复用。很好的解决问题
BASE64Encoder和BASE64Decoder这两个方法是sun公司的内部方法,并没有在java,api中公开过,所以使用这些方法是不安全的,将来随时可能会从中去除,所以相应的应该使用替代的对象及方法,建议使用apache公司的API。
Delphi进行Base64编码后,如果使用javascript解码,会出现如下问题: 1. 汉字乱码 2. 空格变成 + 号 本资源演示Delphi代码,实现javascript能正确进行Base64解码,不出现上述2个问题。 解决思路:进行Base64前先...