IE团队项目经理Rob
Mauceri今天在博客展示了IE10的全新改进,包括可以处理JavaScript类型数组、让Web应用直接处理原始数据甚至是文件以及HTML5视频和字幕等功能。这让IE不仅仅成为一个简单的浏览器,而是一个可以读取二进制数据和文件的开发者助手。

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

澳门新葡萄京所有网站 1

澳门新葡萄京所有网站 ,过去几年微软IE虽然依然占有极高比例,但在技术人员的心目中它已经尴尬地落后,而IE10正在努力改变这一现状,它更贴近Web技术,并且有望成为Windows
8开发人员入口之一。

浏览器对Base64的支持

微软IE 10第二个平台预览版
北京时间6月30日消息,微软周三发布了针对开发者人群的IE
10浏览器第二个平台预览(platform preview)版。
IE10平台预览版第二版加入了更多HTML5新技术支持,能够让开发者们构建一个美观且富有交互性的Web应用,同时还能保证其性能以及安全性。借助诸如CSS3定点浮动、HTML5拖放、文件阅读API、媒介设备查询监听器以及HTML5表单等新技术,构建一个美观且富有交互性的Web应用会非常轻松。全面提高HTML5应用的性能表现,利用多种技术提高效率延长电池使用时间。支持以HTML5沙盒技术将iframe隔离,增强Web应用的安全性。
IE10将延续IE9让Web应用不再需要浏览器插件的做法,同样也会延续把不同任务分配给不同PC组件的方针,图形归GPU处理,JavaScript编译交给多核CPU完成。
微软IE部门高级主管赖安·加文(Ryan
Gavin)表示:“宣布支持HTML5是一回事,而支持HTML5程度是否良好又是另一回事。”加文称,从技术指标上看,IE
10对HTML5以及CSS3标准的支持良好程度,要高于火狐(Firefox)5.0版和谷歌Chrome
13版。 IE10仅支持Windows 7,不支持XP和Vista。详细开发手册参阅
这里。英文版下载地址:

澳门新葡萄京所有网站 2

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

IE9
带来了许多新的Web技术,例如Canvas图形,CSS(层叠样式表)格式化功能,和SVG(可伸缩矢量图形)等,这为未来的JavaScript语言
及硬件加速特性做好了准备,而Windows
8大量应用Web标准的事实证明,一个有竞争力的浏览器可以驱动一个现代系统,IE10甚至还可以处理二进制数据,例如文件。

这种data:
URI的格式能把Base64可以内嵌在image标签的属性当中。我们可以看到在大部分浏览器中的显示效果:

澳门新葡萄京所有网站 3

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

(文/cnbeta)    

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

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 { this.encodeString = encodeString; } private String getImageFullPath() { parent = new File.getClassLoader().getResource.getPath+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; this.encodeString = Base64.encodeBase64String; } catch  { e.printStackTrace(); } catch  { e.printStackTrace(); } return SUCCESS; } } 

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

  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 { // check the image source if (BASE64_DATA.test { // pass the data to the PHP routine img.src = base64Path + "?" + img.src.slice; } }; // fix images on page load onload = function() { for (var i = 0; i < document.images.length; i++) { fixBase64; } }; 

服务器端的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文件署名域和按照特定结构组织的3个以上的数据块组成。

PNG定义了两种类型的数据块,一种是称为关键数据块,这是标准的数据块,另一种叫做辅助数据块,这是可选的数据块。关键数据块定义了4个标准数据块,其中图像数据块IDAT:它存储实际的数据,
PNG总的数据流采用DEFLAT进行压缩。此外还擦用三角过滤“delta
filters”来过滤每一行的像素的未压缩数据。DEFLAT和delta压缩在其他数据和文本处理中也被广泛应用。PNG格式你可以参考官方文档。

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

最后,我们把这些组合起来:

   Demo JavaScript PNG Viewer       var gravatar = 'iVBORw0KGgoAAAANSUhEUgAAA.......&#25968;&#25454;&#20174;&#30053;......55CYII='; String.prototype.padRight = function{ var txt = ''; for(var i=0;i&lt;n-this.length;i++) txt += c; return txt + this; }; function show{ var png = new PNG; var img = document.getElementById, limg = document.getElementById; document.getElementById.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 =  + 'px'; limg.style.width =  + 'px'; var line; while) { for (var x = 0; x &lt; line.length; x++){ var px = document.createElement, px2 = document.createElement; px.className = px2.className = 'pixel'; px.style.backgroundColor = px2.style.backgroundColor = '#' + line[x].toString; img.appendChild; limg.appendChild; } } }       

以上所述是小编给大家介绍的JS在浏览器中解析Base64编码图像,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!