这是一个基于plotly与flask搭建的综合图像处理系统。

一、 研究背景

随着计算机视觉广泛的应用，越来越多的研究人员开始投入到图像处理的研究工作中。在众多工具中，OpenCV因其独特的性质受到大多数研究者的追捧：

  1. 开源，能在Windows、Linux、嵌入式系统等平台上编译执行。
  2. 接口丰富，支持C、JAVA、Python等主流编程语言。
  3. 函数全面，满足图像处理的基本需求。

然而，研究者，在利用OpenCV进行各种图像处理的验证性实验时，往往需要自行编写代码实现。这种方式，代码极易不规范且重复率高，交互式体验差，增加了工作人员的工作量，影响研究的推进。
在这种背景下，我们小组提出设计一个具有拓展性的综合性图像处理系统，以协助研究人员完成图像处理相关的开发工作。

二、 技术现状

计算机应用发展至今，已有许多成熟的图像处理软件

2.1 Adobe

Adobe旗下有许多为人熟知的图像处理软件。

  1. Photoshop
    从功能上看，该软件可分为图像编辑、图像合成、校色调色及功能色效制作部分等。 图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等；也可进行复制、去除斑点、修补、修饰图像的残损等。 图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像，这是美术设计的必经之路；该软件提供的绘图工具让外来图像与创意很好地融合。 校色调色可方便快捷地对图像的颜色进行明暗、色偏的调整和校正，也可在不同颜色进行切换以满足图像在不同领域如网页设计、印刷、多媒体等方面应用。 特效制作在该软件中主要由滤镜、通道及工具综合应用完成。包括图像的特效创意和特效字的制作，如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由该软件特效完成。
  2. Premiere Pro
    Premiere Pro是视频编辑爱好者和专业人士必不可少的视频编辑工具。它可以提升工作者的创作能力和创作自由度，它是易学、高效、精确的视频剪辑软件。Premiere提供了采集、剪辑、调色、美化音频、字幕添加、输出、DVD刻录的一整套流程，并和其他Adobe软件高效集成，使工作者足以完成在编辑、制作、工作流上遇到的所有挑战，满足创建高质量作品的要求。
  3. Illustrator
    Illustrator是一款专业图形设计工具，提供丰富的像素描绘功能以及顺畅灵活的矢量图编辑功能，能够快速创建设计工作流程。借助Expression Design，可以为屏幕/网页或打印产品创建复杂的设计和图形元素。提供了一些相当典型的矢量图形工具，诸如三维原型（primitives）、多边形（polygons）和样条曲线（splines），一些常见的操作从这里都能被发现。

2.2 开源图像处理软件

在开源社区中也有许多功能强大的图像处理软件。

  1. GIMP
    GIMP 功能十分强大，扩展性强，是编辑和处理照片的绝佳选择。它具有许多用于转换、更改和重新排列图像的选项。GIMP 有许多第三方插件，还可通过 Python 扩展，您可以在线找到脚本，也可以编写自己的脚本。这种脚本编写潜力为GIMP高级用户带来了全新的控制级别。
  2. Krita
    Krita 是一款自由、免费、开源的专业绘画软件。它由懂得画画的程序员们开发，目标是打造一款人人都用得起的数字绘画工具。适用于：概念美术设计、材质与电影布景、插画和漫画等。Krita 允许艺术家用自己的手和平板电脑或使用鼠标和键盘来创作自己喜欢的艺术作品
  3. Inkscape
    Inkscape是开源的 矢量图像 编辑软件，与Illustrator、Freehand、CorelDraw、Xara X 等软件很相似，它使用 W3C 标准的 SVG 文件格式，支持包括形状、路径、文本、标记、克隆、alpha 混合、变换、渐变、图案、组合等 SVG特性。它也支持创作共用的元数据、节点编辑、 图层 、复杂的路径运算、位图描摹(根据点阵16进制色差复制绘制矢量图的算法)、文本绕路径、流动文本、直接编辑 XML 等。它可以导入JPEG 、PNG 、TIFF 等格式，并输出为 PNG 和多种位图格式。除了支持Windows外，Inkscape 还支持 Linux 与 macOS 平台 。

三、 研究内容

3.1  图像处理技术

研究广泛应用于图像处理中的技术

  1. 图像变换:  实现图像的灰度变换、傅立叶变换、DCT变换、霍夫变换。
  2. 空间滤波:  实现平滑空间滤波器、锐化空间滤波器、基于规则的模糊集合的对比度增强。
  3. 彩色图像处理:  实现假彩色与伪彩色。
  4. 图像恢复与复原:  实现基于退化模型的图像恢复，以及基于CT的图像复原。
  5. 图像分割:  实现基于边缘检测、阈值处理、区域生长、形态学分水岭的图像分割技术。

3.2  GUI制作技术

  1. 预期GUI布局 Tranquilpeak

  2. 控件设计要点 Tranquilpeak

四、 研究目标

  1. 支持多种图像格式；
  2. 实现图像变换、图像对比度增强、图像平滑、图像锐化、假彩色与伪彩色、图像恢复、图像分割等具体功能；
  3. 系统具有扩充性，便于后续添加独立的模块

五、 设计方案

5.1  结构分层

考虑到系统的可移植性和可扩展性，总体系统采用B/S架构，将用户交互在浏览器上实现，而数据处理以及系统响应在服务器上运行。 系统以三层结构实现：
第一层，应用层。主要是Web界面的设计，用户输入输出的检查，以及交互指令的响应。
第二层，公用层。用于图片数据、操作数据的存储以及管理，调配应用层与处理层的接口，是整个系统的核心。
第三层，处理层。各类图像处理函数。 Tranquilpeak

5.2  技术分析

  1.  Web界面设计
    系统应具有可与用户进行交互的可视化界面，支持图片的下载、上传，各种图像操作，辅助分析，以及图像显示等功能。
    Plotly是一个免费的可视化库。plotly.js是基于JavaScript的图形绘制库，而dash则是基于flask和plotly.js的web开发框架，支持使用python语言进行web开发。系统主要采用了两个组件库，dash.dcc和dash.html。使用plotly提供的方式进行编程，可以使用python代码生成与html+javaScript同样效果的网页，也支持使用CSS进行网页布局。

  2.  Web界面与服务器的交互
    B/S架构下，应及时将Web界面的交互信息传输到服务器端，并做出相应的响应，且支持多个用户会话同时进行。
    Dash利用flask生成服务，通过@app.前缀定义web界面响应函数，将交互信息传输到服务器端。在发送给用户的html中添加uid，以此来识别用户身份，完成对应响应。

  3.  数据的存储管理
    可对输入图像、输入参数、处理结果进行存储，同时具备一定的回溯功能。
    数据的存储分为两部分。

    （a）是服务器端的文件管理系统。用户上传的图片存储在服务器端的文件管理系统中，并基于该次会话的uid命名，并创建另一个图片文件，用于保存图像处理的最新结果。利用flask，用户可以将最新结果下载下来。
    （b）是html中的用户数据。包括uid、会话进行的历史操作、图片更新时间，都以base64的编码方式存储在用户端的html文件中。服务器可以通过读取用户端html文件来解析对应内容，实现相关操作。

  4.  系统可扩展性
    在系统的开发过程中，三层的实现互不干扰，通过少量的代码修改，即可添加系统支持的图像处理函数。

六、结果展示

设备：PC一台
环境：部署在docker容器中的ubuntu镜像
配置：python、flask、plotly.dash、Edge浏览器

6.1  测试过程及结果

（1）系统启动测试
Tranquilpeak 启动正常，在浏览器中访问交互界面，并能够显示默认图片。
（2）数据交互测试
上传图片，主界面图片切换，且自动生成新的直方图。 Tranquilpeak 进行单个图像操作后，完成对应响应。 Tranquilpeak 点击下载，网页成功跳转到下载界面。 连续使用多个图像处理操作，并进行撤回和前进操作，符合预期效果。(限于篇幅，不具体展示)
（3）图像处理函数功能测试
依次检测预置的图像处理函数，输出结果符合预期。(限于篇幅，不具体展示)
（4）辅助分析功能测试
直方图变换 Tranquilpeak DFT变换 Tranquilpeak DCT变换 Tranquilpeak

我们组在此课程项目中完成了整套系统的开发，涉及前端和后端的开发，由用户交互到系统响应，由数据存储管理到数据处理，实现了交互良好、支持多种图片格式和图像操作、具有辅助分析功能、有一定扩展性的综合图像处理系统。

项目代码： https://github.com/Yangliangzhe/Comprehensive-Image-Processing-System