基于H5的图像处理技术研究

【摘要】本项目基于笔者开发相关系统的经历，通过对企业在线图像处理的需求进行调研分析，利用H5的canvas图像处理技术攻克了项目难点。项目在实测环境中成功地完成了对图像的剪裁、旋转、去污等操作，功能和性能都满足用户的需求。

【关键词】H5 canvas 图像处理

随着接入互联网设备的种类日趋增多，软件产品开发过程中的兼容性愈发重要。如何只对产品进行一次编码，而能使产品运行在Windows、Android、iOS等不同的系统下，成了各类软件企業、项目经理和程序员的追求，在这种趋势下，H5登上了历史的舞台。由于HTML在浏览器中的天然兼容性，它成为了原型制作、快速迭代开发的标准，甚至是移动端APP、PC桌面软件的理想开发手段。使用H5处理各种图像也成为了相关软件中的重要需求。

本项目承接自苏州快信通档案服务有限公司，旨在为公司的档案存储、检索提供自动化的服务。项目的主要任务是处理经过扫描上传的档案影像，并归类检索。由于扫描过程中的不可预测的因素，上传的图像文件可能会出现多余的空白、角度的倾斜或各种污渍，这就需要系统开发一个专门的图像处理功能来对档案影像进行加工。为了更好的嵌入系统，必须将图像处理设计为在线功能，因此H5的canvas技术成为了必然的选择。

1.1 技术选择

在线处理图像有三种技术可供选择：

1）Flash。Flash曾经在web图像处理方面占据了长时间的垄断地位，但存在着严重的兼容性和安全性问题。2016年9月的Chrome 53开始，Chrome浏览器将屏蔽在后台加载的Flash内容，宣布了Flash已被时代所淘汰。

2）SVG。SVG是基于XML的声明式标记语言。它使用于简单几何图形（例如图标）的绘制，不能满足复杂图像的绘制操作。

可见，canvas成为了完成本项目需求的最佳选择。

1.2 项目需求

对项目中处理的档案图像操作分为四种：

1）剪裁：使用鼠标在图像上拖动，划出一个矩形方块，等待用户确认以后根据矩形方块所在的位置进行剪裁，只保留部分图像（图1.1）。

2）旋转：设定角度参数（默认设为顺时针转动），确认之后，将图像按照角度旋转（图1.2）。

3）图章：首先用鼠标选定一个源位置，再在目标位置上点击，系统将源位置上的图像内容覆盖到目标位置上（类似于Photoshop中的图章功能）。

4）保存：将canvas的图片内容编码，上传到服务器。

第二章 算法设计

2.1 图像剪裁算法设计

考虑到用户体验，页面上显示的图像尺寸并非原图尺寸，而是经过一定比例缩放的。用户在页面上拖动鼠标，划出需要剪裁的矩形范围，此范围经过比例计算，才能转换成原图上的剪裁范围。

设缩放比例为r，页面上的剪裁范围左上角坐标为（x， y），范围的长和宽分别为w和h，那么在原图上的剪裁范围应为：左上角（r * x， r * y），宽r * w、高r * h。

2.2 图像旋转算法设计

首先，图像与画布的尺寸是重合的，因此图像在旋转之后会超出画布范围，造成部分不完整，因此画布的大小也必须重新设置。

在已知旋转角度的前提下，容易算出图像旋转后所占矩形的尺寸，以此作为画布的尺寸（图2.2）。设图像的宽和高分别为w、h，旋转角度为θ（顺时针），那么旋转后画布的宽至少应为：

h * sin（θ） + w * cos（θ）

高至少应为：

h * cos（θ） + w * sin（θ）

才能容纳图像。

利用canvas的rotate方法可以旋转作图时的坐标，不过旋转时的原点是对象的左上角而非中心点，所以仅仅作旋转操作会造成图像的位置偏移。本项目中使用如下步骤来保证图像的完整性（图2.2）：

1）将坐标平移，使图像左上角移至正确位置。

2）进行旋转操作。

2.3 图章算法设计

实现“图章”的步骤与Photoshop的操作基本类似。按住Alt键并点击鼠标，表示选择图章源。只点击鼠标表示用图章源覆盖当前位置。在任何时候按Esc键可取消图章操作。

为简单起见，将图章设为矩形，宽和高为固定值w、h。

首先获取鼠标在图像点击的位置（x， y），由此获取图章的左上角应为（x - w / 2， y - h / 2）。再根据2.1节的算法，推知此图章源在原图像上的位置与尺寸：左上角（r * （x - w / 2）， r * （y - h / 2）），宽r * w，高r * h。

将此矩形从原图像截取出来，粘贴覆盖到目标处。目标的中心位置同样由鼠标指定，假设为（x， y），那么目标矩形的位置应为（r * （x - w / 2）， r * （y - h / 2））。

第三章 系统实现

3.1 图像裁剪的实现

首先对画布和绘图环境做初始化：

已知划定的矩形左上角坐标、宽度、高度和图像的缩放比例rate，编写方法cut实现图像的剪裁。

3.2 图像旋转的实现

按照2.2节的算法计算出旋转后的画布尺寸，然后平移、旋转、反向平移坐标，最后将原画画入新坐标。

3.3 图章功能的实现

定义stp数据结构，存储图章的位置和大小：

响应鼠标点击事件，获取图章源的位置。为区分鼠标选取的是图章源还是目标，规定在选取图章源的时候必须按住“Alt”键。

3.4 图像上传的实现

canvas自带方法可将画布内容编码为展示图片的data URI，并可设置图像质量。在js代码中构造表单，将data URI加入表单内容，提交表单即可完成上传。在编码过程中使用Base64编码，其优势在于：

1）减少http请求数，提高页面加载速度。

2）可通过URL直接解码查看图片。

其中toDataURL方法中的第二个参数0.8为经验参数，取值范围在0-1之间。数值越高表示分辨率越高，编码过后的内容大小会大大超出原图，一般取0.8 ～ 0.9之间。

4.總结

该项目在开发过程中使用H5作为图像处理的基础技术，因此能够在不依赖第三方插件（例如flash、silverlight）的情况下独立运行，完美满足用户的需求。为改善用户体验，页面上还使用了大量的快捷键、遮罩层帮助用户快速、精确地完成操作，这些附加性的功能不在本文中累述。

为防止用户误操作，程序中还为用户保留得了每一步操作的状态，以便用户随时回退。完成这一需求有两种途径：

1）在程序中存储每一步操作所产生的图像数据。这种方法实现起来较为简单，但数据存储量巨大，造成了性能上的损失。

2）为每一种操作定义一个“逆操作”，遇到回退时执行逆操作即可。此方法能带来性能上的提高，但实现方法较为繁琐。鉴于项目周期较短，笔者未能将想法付诸实践，期望在版本更新过程中逐步添加。

参考文献：

[1]吴飞燕.基于HTML5 Canvas绘图技术应用[J].电子测试，2018，04（04）：116-118.

[2]张卫国.基于HTML5的2D动画的设计与实现[D].广东省：中山大学，2014.

[3]易鹏.基于HTML5 Canvas的交互式图形工具箱的研究与实现[D].陕西省：西北大学，2017.

[4]王青.基于HTML5_Canvas的3D粒子图形动画的设计[J].中国科技信息，2019，05：79-80.

[5]陈芬.计算机图形图像处理的关键技术研究[J].电脑知识与技术，2018，22：259-260.

作者简介：陆正（1980-），男，江苏苏州人，讲师，苏州工业园区服务外包职业学院信息工程学院教师，研究方向：软件技术、前端工程化。