基于web html5+js的图片压缩上传技术研究

杨平

摘 要：能够在上传到服务器之前进行图片压缩处理，也就是在客户端进行图片的处理需求一直都在，对于原生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 编码，最后，通过Ajax 异步通信，将图片数据发送到服务器端，服务器端接收并保存图片，从而实现图片压缩上传。

3.3 canvas转换为图片数据格式

转换 Canvas 为 Image，假设图像已经在canvas上处理好，那么可以使用以下方法，把canvas转变为图片Image对象。

3.4 利用大对象进行数据传输数据

浏览选定照片后获取上传照片文件的大小，根据其大小开辟一块内存空间用于将来存储图片对象， 然后将上传的照片文件读取到字节数组中，继而转换成二进制流的形式，并赋值给一个会话（Session）对象。

从会话（Session）对象中将二进制流形式的图片赋值给字节变量，然后将该字节变量再赋值给插入语句的参数，最后通过执行插入语句实现媒体资料的存储。

首先，创建一个文件用以独立显示检索的图片，在该文件中编写查询语句将图片检索出来，检索结果存入到数据表中。如果检索结果不为空，则将该图片返回到下一步的结果中。其次， 在浏览页面中编写查询语句实现图片各个信息的检索，对于图片内容应用带参数链接的方式与上一步检索出的结果联系起来，最终实现图片在页面的浏览。

3.5 压缩方法的实现

（1）页面添加文件选择组件

（2）监听文件组件的change 事件并读取图片内容

（3）图片压缩及调用

（4）异步上传：压缩后的图片通过JQuery实现异步上传。

（5）服务器端保存

4结论

基于HTML5 的Canvas 对象对图片进行压缩的方法，适用于手机的移动网站和各类移动应用的开发，对增强用户体验，减轻服务器压力有一定的实际意义。Web技术已经深入人们日常生活的方方面面，其中对HTML5安全性的研究具有重要的现实意义。BLOB 存储格式同C#代码相结合， 将图像资料转换成二进制流存入数据库，调用时再将二进制流还原成原始文件，很好地实现了图像资料的存储和读取， 解决了常规数据格式无法处理的问题，从而保证了相关专业软件的顺利应用。此外，BLOB 存储技术不仅可以应用于图像资料，对于音频、视频等资料也同样适用。以HTML5为代表的移动Web技术尚处于发展的初级阶段，标准本身在向不断完善和改进空间演进，且相比本地应用移动智能终端仍存在执行HTML5效率低、设备调用能力受限、能耗较大等问题，都影响着移动Web应用的体验。

参考文献：

[1]邹绍武，苏贵斌.Android应用开发中图片压缩技术的研究应[J].计算机技术， 2014（1）：17.

[2]马建华，杨波.C/S与B/S结构中BLOB类型数据的应用[J].计算机应用，2015（14）：4-5.