楚雄彝族自治州网站建设_网站建设公司_前后端分离_seo优化

多功能美颜 Web 应用

第一部分引言

一、编写目的

编写本说明书的目的是为了准确阐述项目概要设计结构，本概要设计说明的作者是【巧倩美颜】项目组，本概要设计说明的确认者是【项目经理】负责人，本概要设计说明的读者是项目所有直接干系人。

二、项目背景

现代人们的生活越来越多姿多彩，很多时候都想保留住美好的瞬间然后分享到朋友圈，然而现在大家对照片的审美越来越高，生活照美颜一下发出去效果会更好，所以，美图软件横行在自拍党人群中。以前大家只能用 Photoshop 进行修图美化，但是 Photoshop 难度比较大，不容易上手，随后诞生了类似美图秀秀的修图软件，虽然功能强大，但是广告众多，并且不支持自己 diy 贴图或者制作海报，同时功能仅限于美颜照片。

对于办公人士或者学生群体，有时需要对文件进行修图，而市场上还没有一款可以同时兼顾这些个功能的软件。

针对以上现象，我们巧倩美颜项目组准备开发一款面向学生群体和年轻办公人士的美图 APP，帮助他们更好的分享精彩人生。

三、定义

Blurred：图片模糊化处理。图象的模糊一直是图像处理领域一个比较重要的东西，它的用处不仅仅是我们平时 PS 的滤镜，也常常被用来做图片数据的降噪，图片的有损压缩，和图片特征相似匹配的优化工作。

OCR：(OpticalCharacterRecognition，光学字符识别），指电子设备（例如扫描仪或数码相机）检查纸上打印的字符，通过检测暗、亮的模式确定其形状，然后用字符识别方法将形状翻译成计算机文字的过程。

用例：(usecase）或译使用案例、用况，UML 术语，是软件工程或系统工程中对系统如何反应外界请求的描述，是一种通过用户的使用场景来获取需求的技术。每个用例提供了一个或多个场景，该场景说明了系统是如何和最终用户或其它系统互动，也就是谁可以用系统做什么，从而获得一个明确的业务目标。编写用例时要避免使用技术术语，而应该用最终用户或者领域专家的语言。用例一般是由软件开发者和最终用户共同创作的。

事件流：UML 术语。在 UML 建模中，因为用例最终是参与者通过使用用例达成他的目的，用例是达成他的目的的手段，然后又把它分成一些具体的事件流，每个事件流实际上就代表一个具体的目标。

部署：软件部署环节是指将软件项目本身，包括配置文件、用户手册、帮助文档等进行收集、打包、安装、配置、发布的过程。

图像锐化：(image sharpening)是补偿图像的轮廓，增强图像的边缘及灰度跳变的部分，使图像变得清晰，分为空间域处理和频域处理两类。

角点检测：角点通常被定义为两条边的交点，或者说，角点的局部邻域应该具有两个不同区域的不同方向的边界。角点检测(CornerDetection)是计算机视觉系统中获取图像特征的一种方法，广泛应用于运动检测、图像匹配、视频跟踪、三维重建和目标识别等，也可称为特征点检测。

mAP：meanAveragePrecision，是精确度的平均，是目标检测中模型性能的衡量标准。

IoU：是一种测量在特定数据集中检测相应物体准确度的一个标准。IoU 是一个简单的测量标准，只要是在输出中得出一个预测范围(boundingboxes)的任务都可以用 IoU 来进行测量。

第二部分项目概述

一款轻量级的 Web 端和手机端修图应用，提升美颜软件的易用性，提高美颜软件的服务质量，拓展美颜软件的市场前景，建设一款受市场欢迎，面向现代群体的优质美颜软件。

系统主要包括用户信息管理模块，图片处理模块，图片传输模块三大部分。

系统主要面向 P 图零基础的群体，能够提供基本的修图操作，并且具有较高的易用性。同时也提供专业修图操作，能够满足专业人士的需求。界面美观，良性需求需要质感设计，提供多种主题，满足用户个性化界面需求。实现 7x24 小时连续不间断的业务访问。

第三部分总体设计

一、技术架构设计

1.前端：

前端采用 VUE 框架进行开发，利用 vue-cli 进行项目结构搭建，采用 vue-router，vuex 和 axios 组建，完成前端路由，状态管理和与后端的交互；UI 部分利用了 element-ui，保持 UI 风格统一。

2.后端：

后端采用 Django 框架，由于前端采用了 VUE 进行前后端分离，所以摒弃了 Django 中的模板，利用 Django 的路由功能，配合后端图像处理算法进行后端服务的提供。采用 Django-cors-headers 插件解决跨域问题，数据库采用 MySQL8，配合 Django 的 mysqlclient 驱动进行数据库的 CURD 操作。

3.部署

利用 Docker，docker-compose 工具，实现快捷部署。在本地搭建好镜像，直接在租用的阿里云上利用 Dockerfile 进行部署。

二、核心控制流程

1 请求路由配置

注：下表给出了系统的路由配置，具体数据规约请见后方交互规约。

2 前后端数据交互规约

2.1 用户系统

2.1.1 登录

请求 URL:/user/login/请求方式：POST 提交数据格式：

{ "user_mail":...., "user_password":.......(md5 加盐加密) }

返回数据格式：

{ "error_code":(0 表示成功 1001 表示邮箱不存在 1002 表示密码错误 1006 表示未知错误（可能由于数据库等）)， "user_data":{ "user_name":".....", "id":"......", "user_mail""......", "user_avatar_url":"......" } }

2.1.2 注册

请求 URL:/user/register/请求方法：POST 提交数据：

{ "user_mail":"......", "user_name":"......", "verify_code":".....", "user_password":"......" }

返回数据：

{ "error_code":""(0 表示成功，1003 表示验证码错误,1006 未知错误（可能是数据库等） 1007 表示验证码过期) }

2.1.3 请求发送验证码

请求 URL：/user/register/请求方法：GET 提交数据：?usermail="....."返回数据：

{ "error_code":(0 表示成功，1004 表示邮箱已注册，1005 表示发送错误) }

2.1.4 修改用户名

请求 URL:/user/change-user-name

请求方法：POST 提交数据：

{ “user_id”:".....", "user_new_name":"......" }

返回数据：

{ "error_code":(0 表示成功，1006 表示失败（未知错误，可能由于数据库）)，“user_new_data”:{ "user_new_name":"......." } }

2.1.5 新建相册

请求 URL：/user/add-album/

请求方法：POST

前端发送数据格式 #前端判断相册不重名

{ 'user_id':xxx, 'album_name':"xxx" #前端验证不可为空 }

后端返回格式

{ ‘error_code':xxx, #0:新建成功'album_info':{ "id":'', "name":'', "date":"2020-07-23", "size":"", "url":"" } }

2.1.6 删除相册

请求 URL：/user/delete-album/

前端发送数据格式

{ 'user_id':xxx, 'album_name':"xxx" #前端验证不可为空 }

后端返回格式

msg={ 'error_code':xxx #(0 表示成功 1006 表示数据库连接错误) }

2.1.7 更换头像

请求 URL:/user/change-avatar/

请求方式：POST 提交数据返回数据：

{ "error_code":(0 没有错误，1006 未知错误)"user_new_data":{ "user_new_avatar_url":"....." } }

2.1.8 获取云相册信息（全部相册信息）

请求方式：GET

提交数据：

{ “user_id":xxx }

返回数据：

{ "error_code":0, "AlbumsNum":2,"AlbumsInfo":[ { "id":'', "name":'', "date":"2020-07-23", "size":"", "url":"" }, ... ] }

请求方式：GET

提交数据：

{ “user_id":xxx }

返回数据： 关注字段名！！（与所有相册信息格式相同）

{ "error_code":0, #0 表示成功 1006 表示数据库错误 "StickersNum":0,"StickersInfo":[ { "id":'', "name":'', "date":"2020-07-23", "size":"", "url":'', }, ... ] }

请求方式：GET

提交数据：

{ “user_id":xxx “album_id”:xxx }

返回数据： 关注字段名！！（与所有相册信息格式相同）

{ "error_code":0, #0 表示成功 1006 表示数据库错误 "ImagesNum":0,"ImagesInfo":[ {"id":'', "name":'', "date":"2020-07-23", "size":"", "url":"" }, ... ]

请求 URL：/user/add-image/

请求方式：POST 提交数据：

{ 'user_id':xxx,'album_id':xxx }

注：提交时加上 FILE

返回数据：

{ "error_code":0, #0 表示成功 1006 表示数据库错误 "imageInfo":{ "id":'', "name":'', "date":"2020-07-23", "size":"", "url":"" } }

2.1.12 上传贴纸

提交数据：

{ 'user_id':xxx, }

注：提交时加上 FILE

返回数据：

{ "error_code":0, #0 表示成功 1006 表示数据库错误 "stickerInfo":{ "id":'', "name":'', "date":"2020-07-23", "size":"", "url":"" } }

2.1.13 更改相册名

请求 Url:/user/change-album-name/

请求方式：POST 提交数据

“album_id”:xxx, "album_name":xxx, #原名 "album_new_name":xxx #新名 }

返回数据

{ "error_code":0,"AlbumInfo":{"id":'', "name":'', "date":"2020-07-23", "size":"", "url":"" } }

2.1.14、删除图片

请求 URL：/user/delete-image/

请求方式：POST 提交数据：

{ image_id:"" }

返回数据：

{ 'error_code':0 #0 成功 1006 数据库出错 'album_cover_url':"xxx"}

2.1.15、删除贴纸

请求 URL：/user/delete-sticker/

请求方式：POST 提交数据：

{ user_id:"",sticker_id:"" }

返回数据：

{ error_code:0 成功 1006 数据库出错 }

请求 URL：/imgProc/ocr-proc/

请求方式：POST 提交数据：

{ 'editedImg':"xxxxx" 注：base64 编码 }

返回数据

""error_code":{0, #0 表示成功 1008 表示图片处理异常 "ocr_result":{ "words_result_num":1, #几行文字 "words_result":[ #每行文字一个{}，合成一个[] { "words":"巧倩美颜" } ] } }

2.2.2 水印

请求 URL：/imgProc/waterMark/

{ 'editedImg':"xxxxx", 注：base64 编码 'text':"xxx" 水印文字 }

返回数据：

{ 'error_code':xxx, #0 表示成功 1008 表示处理异常 'img_proc_result':"xxx" base64 码 }

2.2.3 锐化

请求 URL：/imgProc/changeSharp/

请求方式：POST 提交数据：

{ 'editedImg':"xxxxx", 注：base64 编码 'sharp_degree':xxx 锐化度 0--100 }

返回数据：

{ 'error_code':xxx, #0 表示成功 1008 表示处理异常

2.2.4 对比度调整

请求 URL：/imgProc/changeContrast/

请求方式：POST 提交数据：

{ 'editedImg':"xxxxx", 注：base64 编码 'contrast_degree':xxx 对比度-100--100 }

返回数据：

{ 'error_code':xxx, #0 表示成功 1008 表示处理异常 'img_proc_result':"xxx" base64 码 }

2.2.5 美白

请求 URL：/imgProc/beautify_white/

请求方式：POST 提交数据：

{ 'editedImg':"xxxxx", 注：base64 编码 'white_degree':xxx 美白度 0--100 { 'error_code':xxx, #0 表示成功 1008 表示处理异常 'img_proc_result':"xxx" base64 码 }

2.2.6 磨皮

请求 URL：/imgProc/beautify_buffering/

请求方式：POST 提交数据：

{ 'editedImg':"xxxxx", 注：base64 编码 'buffer_degree':xxx 磨皮程度 0-10 推荐 3（3 已经磨得挺狠了我觉得） }

返回数据：{}

'error_code':xxx, #0 表示成功 1008 表示处理异常

'img_proc_result':"xxx" base64 码

}

2.2.7 智能美化（人脸）

请求 URL：/imgProc/face_makeup/ 请求方式：POST 'editedImg':"xxxxx", 注：base64 编码 }

返回数据：

{ 'error_code':xxx, #0 表示成功 1008 表示处理异常 'img_proc_result':"xxx" base64 码 }

2.2.8 换脸

请求 URL：/imgProc/faceswap/

请求方式：POST 提交数据：

{ 'headImg': "xxxxx", 'faceImg': "xxxxx" }

返回数据：

{ 'error_code':xxx, #0 表示成功 1008 表示处理异常 'img_proc_result':"xxx" base64 码 }

请求方式：POST

提交数据：

{ 'editedImg':"xxxxx" 注：base64 编码 }

返回数据：

{ 'error_code':xxx, #0 表示成功 1008 表示处理异常 'img_proc_result':"xxx" base64 码 }

2.2.10 图片拼接

请求 URL：/imgProc/stitch/

请求方式：POST 提交数据：

{ 'img_num':xxx, 拼接的图片数量'editedImg0':"xxxxx", 注：base64 编码'editedImg1':"xxxxx" }

返回数据：

'img_proc_result':"xxx" base64 码 }

2.2.11 瘦脸

请求 URL：/imgProc/face_thin/

请求方式：POST 提交数据：

{ 'editedImg':"xxxxx", 注：base64 编码 }

返回数据：

{ 'error_code':xxx, #0 表示成功 1008 表示处理异常 'img_proc_result':"xxx" base64 码 }

2.2.12 滤镜

请求 URL：/imgProc/filter/请求方式：POST 提交数据：

{ 'operation':xxx 详见下方表

返回数据：

{ 'error_code':xxx, #0 表示成功 1008 表示处理异常 'img_proc_result':"xxx" base64 码 }

operation 对应表：

0--------> 毛玻璃

1--------> 儿童蜡笔画

2--------> 褪色

3--------> 去雾

4--------> 调和浮雕

5--------> 怀旧

6--------> 素描

7--------> 中国剪纸

8--------> 浮雕

9--------> 碧绿碧绿诡异诡异的滤镜

2.2.13 风格迁移

请求 URL：/imgProc/styleTransform/

请求方式：POST 提交数据：

{ 'editedImg':"xxxxx" 注：base64 编码 }

返回数据：

{ 'error_code':xxx, #0 表示成功 1008 表示处理异常 'img_proc_result':"xxx" base64 码 }

0-----cartoon：卡通画风格 1-----pencil：铅笔风格

2-----color_pencil：彩色铅笔画风格 3-----warm：彩色糖块油画风格

4-----wave：神奈川冲浪里油画风格 5-----lavender：薰衣草油画风格

6-----mononoke：奇异油画风格 7-----scream：呐喊油画风格

8-----gothic：哥特油画风格

第四部分界面设计

一、界面设计

1 主界面

2 登录界面

3 注册界面

4 图片美化界面

5 文件处理界面

6 云相册界面

7 相册内部界面

7 图片信息界面

8 图片预览界面

9 上传图片界面

10 用户中心界面

11 用户素材库界面

12 用户头像上传界面

第五部分单元模块设计

一、登录模块

1.类图设计

2.时序图

3.流程描述

二、注册模块

1.类图设计

2.时序图

3.流程描述

三、修改信息模块

1.类图设计

2.时序图

3.流程描述

四、个人云相册模块

1.类图设计

2.时序图

3.流程描述

五、图像处理模块

1.类图设计

2.时序图

3.流程说明

六、图像拼接模块

1.类图设计

2.时序图

3.流程描述

七、文件处理模块

1.类图设计

2.时序图

3.流程描述

第六部分数据库设计

一、数据库整体结构图

整体结构表格清单

1userInfo 表结构

2cloudphoto 表结构

3imageInfo 表结构

5userStickernfo 表结构

6 外键清单

♻️ 资源

大小：121MB

➡️资源下载：https://download.csdn.net/download/s1t16/87404186

注：更多内容可关注微信公众号【神仙别闹】，如当前文章或代码侵犯了您的权益，请私信作者删除！