在前面的介绍中，我们将二进制文件(BLOB)保存为Base64编码的文本，它可以嵌入到XML标签中，因此二进制信息可以与XML文件一起复制和下载，而不用担心信息丢失。这项技术也广泛应用于电子邮件。

Base64的浏览器支持

图像是最常用的二进制文件之一。然而，现代浏览器的进步日新月异。IE7、FireFox等浏览器对包括Base64在内的各种编码图像信息提供了很好的支持。因此，图形信息可以以下述形式呈现在页面上。

Java代码

img src=' http : data : image/gif；base64，r0lgodlhdwakecaaazm/////waaacwaaadawaaaciispeqhsrz5modrlln 48 cxf 8 m2 iqymmkqvlrtw 4ml wWACH h09wdgltaxplzbiebvbgvhzbtbwfydfnhdmvyiqaow=' alt=' Base64 '编码图像' width='150' height='150'/数据： URI的格式可以在图像中嵌入Base64(或其他数据)我们可以在大多数浏览器中看到显示效果：

这种方法有优点也有缺点。优点是浏览器一次连接就能得到完成的页面内容，图像不好的时候尺寸会增加1/3。因此，这种嵌入方法适合处理图标、圆角等小图形元素。从而减少浏览器打开的连接数。但是，Base64编码不应用于大型照片、图片等。以免影响下载速度。

为了得到刚才的Base64编码，我们把上一篇文章的Java改成了Struts Action，借用了JIMI来读取和转换图形格式。Base64编码器被更改为更常见的Apache Commons组件，代码如下：

Java代码

公共类Base64ImageAction扩展了ActionSupport { private final static String gallery name=' gallery '；私有静态字符串父级=空；私有字符串编码减少=空；public String getencoderstoring(){ return encoderstoring；} public void setencoderstoring(String encoderstoring){ this . encoderstoring=encoderstoring；}私有String getImageFullPath(){ parent=new File(this . getclass()。getClassLoader()。获取资源。getPath())。GetParent(). file . separator ' flag . jpg '；} public String execute(){ BytearrayOutputstream output=new BytearrayOutputstream()；尝试{ JiMiReader reader=Jimi . createJiMiReader(this . GetImageFullPath())；image image=reader . getimage()；Jimi.putImage('Image/png '，image，output)；output . flush()；output . close()；this . encoderstring=base64 . encodebabase 64 string(output . tobytearray())；} catch(IOException e){ e . printstacktrace()；} catch(JimieException e){ e . printStackTrace()；}返回SUCCESS}}对应的View端是一个非常简单的Freemarker模板：

Html代码

html head titleHello，World/title/head body img src=' http : data : image/png；Base64，$ { encoderstring } '//body/html处理古代浏览器

世界总是不完美的。虽然大多数现代浏览器都完美地处理了Base64，但我们还是不能不考虑一些现在仍然广泛使用的“老”浏览器，即IE6。如果你尝试在IE6中浏览上面的图片，你可能会得到一个红十字。我们要对IE6做一些特殊处理。使用下面的JavaScript，我们将Base64字符串发送回服务器，并再次将其解析为图片

Javascript代码

//测试Base64数据var BASE64_DATA=/^data:的正则表达式*;base64/I；//将解码编码数据var base64 path='/my/path/base64 . PHP '的PHP模块的路径；函数fixBase64(img) { //检查图像源if(BASE64 _ DATA . test(img . src)){//将数据传递给PHP例程img.src=base64Path '？'img . src . slice(5)；} };//修复页面加载时的图像onload=function(){ for(var I=0；I document . images . length；I){ Fixbase 64(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等压缩格式中也广泛使用。一个巴布亚新几内亚图像格式文件(或数据流)由一个8字节的巴布亚新几内亚文件签名字段和三个以上根据特定结构组织的数据块组成。

PNG定义了两种类型的数据块，一种称为关键块，是标准数据块，另一种称为辅助块，是可选数据块。关键数据块定义了四个标准数据块，其中图像数据块IDAT(图像数据块)存储实际数据，PNG的总数据流由平减指数压缩。此外，三角形过滤器“增量过滤器”用于过滤每行中像素的未压缩数据。平减指数和德尔塔压缩也广泛用于其他数据和文本处理。png格式可参考a href=' http://www.libPNG.org/pub/png/spec/1.1/png-contents.html'官方文件/a。

太好了，notmasteryet还为我们提供了一个平减指数解压器。

最后，我们结合这些：

Html代码

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML L1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head title demo JavaScript PNG Viewer/title/head body on load=' show(gravatar)；'脚本src='http:/Source/Base 64 . js ' type=' text/JavaScript '/script script src=' http :/Source/deflate . js ' type=' text/JavaScript '/script script src=' http :/source/png . js ' type=' text/JAVAScript '/script script type=' text/JAVAScript ' var gravatar=' ivborw 0 ggoaaanshueugaaa '.省略数据.55 cyl ii='；string . prototype . pad right=function(c，n){ var txt=' '；for(var I=0；这个长度；I)txt=c；返回txt这个；};函数show(数据){ var png=new PNG(数据)；var img=document . getelementbyid(' image ')，limg=document . getelementbyid(' large image ')；document . getelementbyid(' native image ')。src=' data : image/png；base64，'数据；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线；while(line=png . readline()){ for(var x=0；x线.长度；x){ var px=document . create element(' div ')，px2=document . create element(' div ')；px . CLaSS name=px2 . CLaSS name=' pixel '；px . style . background COlOr=px2 . style . background COlOr=' # ' line[x]。toString(16)。padRight('0 '，6)；img . appendchild(px)；limg . appendchild(px2)；} } }/script div id=' image '/div div id=' large image '/div img id=' nativeimage '/body/html。如上所述，边肖推出的JS在浏览器中分析Base64编码的图像，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！