在线解析Base64编码图像

上一篇介绍中,我们将二进制文件(BLOB)保存为Base64编码的文本,这些文本可以内嵌在XML的标签中,因此二进制信息它可以随着XML文件被拷贝、下载而不用担心信息会缺失。这项技术也在email邮件中被广泛使用。 

浏览器对Base64的支持  
图像是最经常被使用的一种二进制文件。而现代的浏览器的进步日新月异,IE7,FireFox和其他浏览器为包括Base64在内各种编码的图像信息提供了很好的支持。因此图形信息可以以下面的形式呈现在页面中、 
Java代码  
  1. /  
  2. wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4ML  
  3. wWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="  
  4. alt="Base64 encoded image" width="150" height="150"/>  

这种做法有利有弊,好处是浏览器可以在一个连接中得到完成的页面内容,不好的地方时图像的大小会增加1/3。因此,这种内嵌的方法适合对小的图形元素比如图标、圆角等等进行处理,从而减少浏览器打开的连接数,但对大的照片、图片(量少而大)等等则不应该使用Base64编码以免影响下载速度。 

为了得到刚才的Base64编码,我们将上一篇的Java修改成Struts Action,并借用了JIMI进行图形的读取和格式转换,Base64编码器则改为更普遍的Apache Commons组件,代码如下: 
Java代码  
  1. public class Base64ImageAction extends ActionSupport {  
  2.   
  3.     private final static String galleryName = "gallery";  
  4.     private static String parent = null;  
  5.          private String encodeString = null;  
  6.   
  7.     public String getEncodeString() {  
  8.         return encodeString;  
  9.     }  
  10.   
  11.     public void setEncodeString(String encodeString) {  
  12.         this.encodeString = encodeString;  
  13.     }  
  14.   
  15.   
  16.     private String getImageFullPath() {  
  17.         parent = new File(this.getClass().getClassLoader().getResource(  
  18.                     File.separator).getPath()).getParent()+File.separator+"flag.jpg";  
  19.     }  
  20.   
  21.     public String execute() {  
  22.         ByteArrayOutputStream output = new ByteArrayOutputStream();  
  23.         try {  
  24.             JimiReader reader = Jimi.createJimiReader(this.getImageFullPath());  
  25.             Image image = reader.getImage();  
  26.             Jimi.putImage("image/png", image, output);  
  27.             output.flush();  
  28.             output.close();  
  29.             this.encodeString = Base64.encodeBase64String(output.toByteArray());  
  30.         } catch (IOException e) {  
  31.             e.printStackTrace();  
  32.         } catch (JimiException e) {  
  33.             e.printStackTrace();  
  34.         }  
  35.       
  36.         return SUCCESS;  
  37.     }  
  38. }  

对应的View端是个十分简单的Freemarker模板: 
Html代码  
  1. <html>  
  2. <head>  
  3. <title>Hello,Worldtitle>  
  4. head>  
  5. <body>  
  6. <img src="data:image/png;base64,${encodeString}" />  
  7. body>  
  8. html>  


处理古代浏览器  
世界总是不是那么完美,尽管大部分现代浏览器对Base64的处理都十分完善,但是我们不能不考虑到一些“古老”的浏览器,而现在还是普遍使用的“古老”的浏览器,就当属IE6,在IE6里试图浏览上面的图片可能会得到一个红叉叉。我们不得不为IE6做一些特殊处理,利用下面的javascript,我们把Base64字串传回服务器端,重新解析成图片 
Javascript代码  
  1. // a regular expression to test for Base64 data  
  2. var BASE64_DATA = /^data:.*;base64/i;  
  3. // path to the PHP module that will decode the encoded data  
  4. var base64Path = "/my/path/base64.php";  
  5. function fixBase64(img) {  
  6.   // check the image source  
  7.   if (BASE64_DATA.test(img.src)) {  
  8.     // pass the data to the PHP routine  
  9.     img.src = base64Path + "?" + img.src.slice(5);  
  10.   }  
  11. };  
  12. // fix images on page load  
  13. onload = function() {  
  14.   for (var i = 0; i < document.images.length; i++) {  
  15.     fixBase64(document.images[i]);  
  16.   }  
  17. };  

服务器端的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格式你可以参考官方文档。 

很棒的,notmasteryet也为我们提供了一个DEFLAT解压器。 

最后,我们把这些组合起来: 
Html代码  
  1. >  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <title>Demo JavaScript PNG Viewertitle>  
  6.  head>  
  7. <body onload="show(gravatar);">  
  8. <script src="../Source/Base64.js" type="text/javascript">script>  
  9. <script src="../Source/Deflate.js" type="text/javascript">script>  
  10. <script src="../Source/PNG.js" type="text/javascript">script>  
  11.   
  12. <script type="text/javascript">  
  13. var gravatar = 'iVBORw0KGgoAAAANSUhEUgAAA.......数据从略......55CYII=';  
  14. String.prototype.padRight = function(c, n){  
  15.     var txt = '';  
  16.     for(var i=0;i<n-this.length;i++) txt += c;  
  17.     return txt + this;  
  18. };  
  19. function show(data){  
  20.     var png = new PNG(data);  
  21.     var img = document.getElementById('image'), limg = document.getElementById('largeimage');  
  22.     document.getElementById('nativeimage').src = 'data:image/png;base64,' + data;  
  23.     img.innerHTML = '';  
  24.     limg.innerHTML = '';  
  25.     img.style.width = png.width + 'px';  
  26.     img.style.height = png.height + 'px';  
  27.     limg.style.width = (png.width * 3) + 'px';  
  28.     limg.style.width = (png.height * 3) + 'px';  
  29.     var line;  
  30.     while(line = png.readLine())  
  31.     {  
  32.         for (var x = 0; x < line.length; x++){  
  33.             var px = document.createElement('div'), px2 = document.createElement('div');  
  34.             px.className = px2.className = 'pixel';  
  35.             px.style.backgroundColor = px2.style.backgroundColor = '#' + line[x].toString(16).padRight('0', 6);  
  36.             img.appendChild(px);  
  37.             limg.appendChild(px2);  
  38.         }  
  39.     }  
  40. }  
  41. script>  
  42. <div id="image">div>  
  43. <div id="largeimage">div>  
  44. <img id="nativeimage" />  
  45. body>  
  46. html>   
还可以更完美  
回顾上一篇的例子,我们用了ihard.net提供了Base64编码,它提供一个GZIP编码参数,你可以发现如此编码之后的文本大小和原来的图形大小相差无几。利用上一节提供了javascript是不是可以解决Base64编码后文件大小增加的问题?留着思考吧。

你可能感兴趣的:(技术,base64,编码)