在浏览器中解析Base64编码图像

最新推荐文章于 2025-03-27 15:46:21 发布

最新推荐文章于 2025-03-27 15:46:21 发布 · 293 阅读

文章标签：

本文探讨了Base64编码在网页中的应用，尤其是在处理图像数据时的优势与局限性。介绍了如何通过JavaScript在浏览器端解码Base64格式的PNG图像，并提供了实现示例。

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

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

    Java代码
     
   
<imgsrc="https://img-blog.csdnimg.cn/2022010615101573093.gif"comment" style="color:#008200;border:0px;">/////
wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4ML
wWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="
alt="Base64encodedimage"width="150"height="150"/>

这种data: URI的格式能把Base64（或其他数据）可以内嵌在image标签的属性当中（或者CSS中）。我们可以看到在大部分浏览器中的显示效果：

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

为了得到刚才的Base64编码，我们将上一篇的Java修改成Struts Action，并借用了JIMI进行图形的读取和格式转换，Base64编码器则改为更普遍的Apache Commons组件，代码如下：

    Java代码
     
   
publicclassBase64ImageActionextendsActionSupport{
privatefinalstaticStringgalleryName="gallery";
privatestaticStringparent=null;
privateStringencodeString=null;
publicStringgetEncodeString(){
returnencodeString;
}
publicvoidsetEncodeString(StringencodeString){
this.encodeString=encodeString;
}
privateStringgetImageFullPath(){
parent=newFile(this.getClass().getClassLoader().getResource(
File.separator).getPath()).getParent()+File.separator+"flag.jpg";
}
publicStringexecute(){
ByteArrayOutputStreamoutput=newByteArrayOutputStream();
try{
JimiReaderreader=Jimi.createJimiReader(this.getImageFullPath());
Imageimage=reader.getImage();
Jimi.putImage("image/png",image,output);
output.flush();
output.close();
this.encodeString=Base64.encodeBase64String(output.toByteArray());
}catch(IOExceptione){
e.printStackTrace();
}catch(JimiExceptione){
e.printStackTrace();
}
returnSUCCESS;
}
}

对应的View端是个十分简单的Freemarker模板:

    Html代码
     
   
<html>
<head>
<title>Hello,World</title>
</head>
<body>
<imgsrc="data:image/png;base64,${encodeString}"/>
</body>
</html>

处理古代浏览器
世界总是不是那么完美，尽管大部分现代浏览器对Base64的处理都十分完善，但是我们不能不考虑到一些“古老”的浏览器，而现在还是普遍使用的“古老”的浏览器，就当属IE6，在IE6里试图浏览上面的图片可能会得到一个红叉叉。我们不得不为IE6做一些特殊处理,利用下面的javascript,我们把Base64字串传回服务器端，重新解析成图片

    Javascript代码
     
   
//aregularexpressiontotestforBase64data
varBASE64_DATA=/^data:.*;base64/i;
//pathtothePHPmodulethatwilldecodetheencodeddata
varbase64Path="/my/path/base64.php";
functionfixBase64(img){
//checktheimagesource
if(BASE64_DATA.test(img.src)){
//passthedatatothePHProutine
img.src=base64Path+"?"+img.src.slice(5);
}
};
//fiximagesonpageload
onload=function(){
for(vari=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代码
     
   
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DemoJavaScriptPNGViewer</title>
</head>
<bodyonload="show(gravatar);">
<scriptsrc="../Source/Base64.js"type="text/javascript"></script>
<scriptsrc="../Source/Deflate.js"type="text/javascript"></script>
<scriptsrc="../Source/PNG.js"type="text/javascript"></script>
<scripttype="text/javascript">
vargravatar='iVBORw0KGgoAAAANSUhEUgAAA.......数据从略......55CYII=';
String.prototype.padRight=function(c,n){
vartxt='';
for(vari=0;i<n-this.length;i++)txt+=c;
returntxt+this;
};
functionshow(data){
varpng=newPNG(data);
varimg=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';
varline;
while(line=png.readLine())
{
for(varx=0;x<line.length;x++){
varpx=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>
<divid="image"></div>
<divid="largeimage"></div>
<imgid="nativeimage"/>
</body>
</html>

相关的javascript请到blogs.ejb.cc下载。

还可以更完美
回顾上一篇的例子，我们用了ihard.net提供了Base64编码，它提供一个GZIP编码参数，你可以发现如此编码之后的文本大小和原来的图形大小相差无几。利用上一节提供了javascript是不是可以解决Base64编码后文件大小增加的问题？留着思考吧。