JS如何在浏览器中解析Base64编码图像
这篇文章主要介绍JS如何在浏览器中解析Base64编码图像,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联-专业网站定制、快速模板网站建设、高性价比佳木斯网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式佳木斯网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖佳木斯地区。费用合理售后完善,十多年实体公司更值得信赖。
浏览器对Base64的支持
图像是最经常被使用的一种二进制文件。而现代的浏览器的进步日新月异,IE7,FireFox和其他浏览器为包括Base64在内各种编码的图像信息提供了很好的支持。因此图形信息可以以下面的形式呈现在页面中、
Java代码
这种data: URI的格式能把Base64(或其他数据)可以内嵌在image标签的属性当中(或者CSS中)。我们可以看到在大部分浏览器中的显示效果:
这种做法有利有弊,好处是浏览器可以在一个连接中得到完成的页面内容,不好的地方时图像的大小会增加1/3。因此,这种内嵌的方法适合对小的图形元素比如图标、圆角等等进行处理,从而减少浏览器打开的连接数,但对大的照片、图片(量少而大)等等则不应该使用Base64编码以免影响下载速度。
为了得到刚才的Base64编码,我们将上一篇的Java修改成Struts Action,并借用了JIMI进行图形的读取和格式转换,Base64编码器则改为更普遍的Apache Commons组件,代码如下:
Java代码
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代码
Hello,World
处理古代浏览器
世界总是不是那么完美,尽管大部分现代浏览器对Base64的处理都十分完善,但是我们不能不考虑到一些“古老”的浏览器,而现在还是普遍使用的“古老”的浏览器,就当属IE6,在IE6里试图浏览上面的图片可能会得到一个红叉叉。我们不得不为IE6做一些特殊处理,利用下面的JavaScript,我们把Base64字串传回服务器端,重新解析成图片
Javascript代码
// a regular expression to test for Base64 data var BASE64_DATA = /^data:.*;base64/i; // path to the PHP module that will decode the encoded data var base64Path = "/my/path/base64.php"; function fixBase64(img) { // check the image source if (BASE64_DATA.test(img.src)) { // pass the data to the PHP routine img.src = base64Path + "?" + img.src.slice(5); } }; // fix images on page load 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格式你可以参考官方文档。
很棒的,notmasteryet也为我们提供了一个DEFLAT解压器。
最后,我们把这些组合起来:
Html代码
Demo JavaScript PNG Viewer
以上是“JS如何在浏览器中解析Base64编码图像”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
当前名称:JS如何在浏览器中解析Base64编码图像
标题网址:http://myzitong.com/article/ghodci.html