UWP Homewor—— Plan Your Final Project by Group5

前言:经过四位入门级小白的(激烈)讨论,基于当代青少年对修图的喜爱与依赖,第五组决定制作一款简单的图像图形处理app。用一句话解释我们的创意就是对不同类别的图形进行不同的专业性处理。我们的初步构想是这款App能够涵盖

对人像,风景,食物进行不同的处理方式以达到美化的目的,同时还能对图片不分类别的进行基本操作,如裁剪,涂鸦等功能。

(自我感觉的优点:可以对特定类别的图片进行专门的操作,比如人像就是以美颜为主,食物就是以改变色调为主。)


以下开始正文——


一.我们的应用可以实现的基础功能有:

1.图片裁剪

2.图片贴图

3.图片涂鸦

4.添加滤镜

5.图片压缩

应用特色:

对人物 景色 和食物图像分别进行处理;对不同的图片有不同的处理功能。

二.软件结构图:

都知道图形处理有许多的功能,用到的技术、算法都是比较复杂的,如果跟深层次可以到深度学习等,但是我们的技术有限,也是学习uwp,所有我们的应用也是简单的,应用大致框架就如图所示,就是两个大的分支,所有的图像中把人物图像拉出来,可以对此类图片进行磨皮和美白。然后对所有的图片实现滤镜、剪切、贴图、涂鸦、二值化;压缩图片这些功能。

 UWP Homewor—— Plan Your Final Project by Group5

 

三.页面架构即每个页面的具体设计;

我们使用NavigationView来进行页面架构;有Frame 来实现页面的跳转。

每个页面的设计:

 

主页面:

UWP Homewor—— Plan Your Final Project by Group5

这个页面中我们使用了frame/navigationview把整个页面设计出来,左半部分就是navigationview做出来的效果,右边是在一个新的page里用frame导航。在页面一开始就默认了选择人物图像。在新的page中就是右半部分用了按钮把打开文件,保存文件,清楚等功能实现,图片的右边用了menuflayout来对剪切、贴图、涂鸦这些功能进行选择。食物和景色图像的页面也是这样类似的。

 

1.主页面的页面架构要使用NavigationView控件

NavigationView的使用方法参考:

https://docs.microsoft.com/zh-cn/uwp/api/Windows.UI.Xaml.Controls.NavigationView

2.主页面可以使用系统的相机来实现拍照功能

实现拍照功能所需的技术是:Audio video and camera

capture photos and cideo:

参考网址:

https://docs.microsoft.com/en-us/windows/uwp/audio-video-camera/capture-photos-and-video-with-cameracaptureui

 

 

人物图像处理界面:

1. 打开本地图片功能:

我们具有能够导入本地图片的功能,完成这个功能要使用到FileOpenPicker打开图片

使用选取器打开文件的参考网址:

https://docs.microsoft.com/zh-cn/windows/uwp/files/quickstart-using-file-and-folder-pickers

 

2. 裁剪功能:

 UWP Homewor—— Plan Your Final Project by Group5

我们对不同的照片都要实现基础的裁剪功能

图像裁剪技术实现的参考网页:

https://blogs.msdn.microsoft.com/italy/2015/07/21/guest-post-fare-il-crop-delle-immagini-usando-lapp-foto-di-windows-10/

3. 贴图功能:

 

 UWP Homewor—— Plan Your Final Project by Group5

 

首先我们把贴图功能作为我们图像处理器的一项基本功能,其中贴纸是是根据自定义的json文件,自动从网上下载的。

贴图功能实现的参考网址:

https://www.cnblogs.com/xiaozhi_5638/p/5603681.html

4. 涂鸦功能

 UWP Homewor—— Plan Your Final Project by Group5

我们的图片处理器想要实现在照片上的涂鸦功能,我们计划使用InkCanvas 控件

使用控件的参考网址:

https://docs.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.Controls.InkCanvas

5.增加滤镜功能:

 UWP Homewor—— Plan Your Final Project by Group5

增加滤镜也是我们基础功能之一:

实现增加滤镜功能的参考网址:

https://www.cnblogs.com/xiaozhi_5638/p/5603681.html

 

所需技术:

1).磨皮:双边滤波算法

可能用到的网址:https://blog.csdn.net/jia20003/article/details/7740683

2).肤色检测:基于RGB的肤色检测法

可能用到的网址:https://www.cnblogs.com/skyfsm/p/7868877.html

3).食物图片处理:食物图像的色彩增强

可能用到的网址:

https://wenku.baidu.com/view/264cac3ea9114431b90d6c85ec3a87c240288a35.html

 

6.处理完图片的保存功能:

我们对处理完的图片会进行保存,实现保存功能的参考代码:

 UWP Homewor—— Plan Your Final Project by Group5

以上是基本的图像处理功能,下面是我们针对不同的图像实现的个性化的功能:

 UWP Homewor—— Plan Your Final Project by Group5

 

 

我们的每个页面的交互细节:

可能大部分都为frame导航实现,还有按钮的点击触发页面的互交。我们的页面设计是用墨刀app做的,这个软件做的是手机app原型的软件,所以页面的互交还是不太能显示。

 UWP Homewor—— Plan Your Final Project by Group5

有兴趣的也可以扫一扫,看看我们的原型(虽然还不是很完善)

采访视频的地址:

采访视频1:http://v.youku.com/v_show/id_XMzUyODQ0OTA2MA==.html

采访视频2:http://v.youku.com/v_show/id_XMzUyOTMyNDUzNg==.html

采访视频3:http://v.youku.com/v_show/id_XMzUyOTMyOTM0NA==.html

采访中提到的问题以及相应的改进方法:

问题:

1. 图像处理界面的基础功能过少

2. 功能中只有重置图片,一旦操作失误就要重新来过

3. 程序运行在电脑上时,camera功能不实用

4. 每个分类下的功能可以细化

解决:

1. 在基础功能中添加滤镜

2. 增加撤销功能

3. 由于没有Windowsphone用来实现程序,所以还是使用电脑的camera来实现相关功能

4. 对于每一个分类下的功能进行细化并明确表示出来,如人像处理可以由用户自己进行相关要素的调整