基于web html5js图片压缩上传技术研究.docVIP

基于web html5js图片压缩上传技术研究 　　摘 要：能够在上传到服务器之前进行图片压缩处理，也就是在客户端进行图片的处理需求一直都在，对于原生APP来说，具有原生API，图片处理很简单，而对于B/S应用来说，没有原生AIP的支持，处理图片就变得有些棘手。就当前的技术发展来说，可以通过对算法的实现来解决图片的压缩，客户端的解析能力并没有想象中那么强大，算法的运行环境需要强的解析环境，同时，实现算法也会增加很大的代码量。 　　关键词：web2.0；javascript；图片压 　　1相关理论与技术介绍 　　1.1 Web技术 　　技术标准方面，2004年W3C期望发展是XHTML2.0，2009年W3C放弃了改进XHTML2.0的标准发展。当前W3C和WHATWG都在进行html5规范的修订和发展。其中W3C致力于对html5的展示层面，包括很多新的元素的制定，WHATWG致力在开发的角度进行改进。移动Web应用使用Web技术来构建，用网页语言（如HTML、JavaScript、Java等编程语言）进行撰写，并通过网页浏览器在互联网或企业内部网上执行。 　　1.2 HTML5关键技术 　　HTML5有两大特点：首先，强化了Web网页的表现性能。其次，追加了本地数据库等Web应用的功能。图片在线处理功能的实现正是通过HTML5强化网页表，追加的canvas标签实现的，在开发图片在线处理功能时，项目首先是通过HTML5技术实现的。HTML5图片在线处理包括四大功能，剪裁、缩放、旋转、水印。这些可以通过canvas标签调用HTML5内置API分别实现。 　　1.3 XMLHTTPrequest 2.0 　　XMLHttpRequest（XHR）是一个API对象，其中的方法可以用来在浏览器和服务器端传输数据。这个对象是浏览器的js环境提供的。从XHR获取数据的目的是为了持续修改一个加载过的页面，XHR是Ajax设计的底层概念。XHR使用的协议不同于HTTP，不仅可以使用XML格式的数据，也支持JSON，HTML或者纯文本。 　　2 Web前端图片压缩处理技术研究 　　2.1 前端操作的性能指标 　　正如项目前期无框架可言一样，移动Web前端开发前期除了建立尽量完善的移动开发规范来避兔不必要的性能问题外，同样无法过度追求性能优化。多数的前端性能优化方案来自于权衡的结果。因此，前端性能优化的工作往往放在应用开发到一定阶段后开展，以及项目正式上线后定期进行维护。在对移动图片社交Web应用进行前端性能优化之前，需要进行应用整体的性能测试，并根据性能测试分析结果制定优化方案加以应用。前端性能指标主要包括加载时间指标，资源情况指标和网络连接指标。 　　2.2 基本原理 　　图像数据之所以能被压缩，就是因为数据中存在着冗余。图像数据的冗余主要表现为：图像中相邻像素间的相关性引起的空间冗余；图像序列中不同帧之间存在相关性引起的时间冗余；不同彩色平面或频谱带的相关性引起的频谱冗余。数据压缩的目的就是通过去除这些数据冗余来减少表示数据所需的比特数。由于图像数据量的庞大，在存储、传输、处理时非常困难，因此图像数据的压缩就显得非常重要。 　　大体思路如下： 　　（1）利用FileReader，读取blob?ο螅?或者是file对象，将图片转化为data uri的形式。（2）使用canvas，在页面上新建一个画布，利用canvas提供的API，将图片画入这个画布当中。（3）利用canvas.toDataURL（），进行图片的压缩，得到图片的data uri的值。（4）上传文件。 　　2.3 文件上传方式 　　文件上传有2种方式： 　　（1）将图片转化为base64：可以通过xhr ajax或者xhr2 FormData进行提交。 　　（2）将图片数据转为Blob对象，使用FormData上传文件：Blob对象是无法注入到FormData对象当中的，当拿到了图片的data uri数据后，将其转化为Blob数据类型。 　　3 图片压缩功能实现过程 　　3.1 图片预处理 　　在进行图片压缩前，还是对图片大小做了判断的，如果图片大小大于200KB时，是直接进行图片上传，不进行图片的压缩，如果图片的大小是大于200KB，则是先进行图片的压缩再上传。 　　3.2 图片转换为canvas 　　基于HTML5 的图片方法的基本思路是利用HTML5 的input[type=file] 组件选择图片，使用FileReader 对象读取选中图片数据，使用Canvas 标签的DrawImage 方法将图片剪裁到指定大小，使用Canvas 的toDataURL 方法按照指定质量将图片数据转换成Base64 编码，最后，通过Aja