基于SpringBoot框架和Flask的图片差异检测与展示系统

1. 项目目标

2. 功能需求

（1）图片上传功能

（2）差异检测算法

（3）后端服务

（4）前端展示

（5）阿里云服务器存储

（6）数据库记录

（7）检测提示

（8）检测时间优化

3. 项目展示

4. 数据库设计

5. 前端设计

6. Flask后端设计

7. SpringBoot后端设计

（1）阿里云工具类

（2）HTTP客户端工具类

（3）Controller

（4）Service

（5）Mapper

1. 项目目标

设计并实现一个基于Web的图片差异检测与展示系统。
用户可通过系统上传两张仅有几处差别的图片（template和sample），系统自动识别差异并在sample图片上用圆圈标注。
利用阿里云服务器存储用户上传的图片和检测结果，实现数据的安全可靠传输与存储。

2. 功能需求

（1）图片上传功能

用户可以同时上传template和sample两张图片。

（2）差异检测算法

在Python文件中实现差异检测算法，能够准确识别图片间的不同之处。

（3）后端服务

使用Flask搭建Python后端，与SpringBoot框架相结合，处理前端请求并调用差异检测算法。

（4）前端展示

采用Vue框架搭建前端页面，实现用户友好的交互界面。

（5）阿里云服务器存储

将用户上传的图片和Python生成的检测结果保存到阿里云服务器，并返回URL给前端展示。

（6）数据库记录

数据库需记录以下信息：id、用户id、sample和template图片的URL、result图片的URL以及图片上传时间。

（7）检测提示

用户上传图片并按下检测按钮后，系统显示正在检测提示，提高用户体验。

（8）检测时间优化

确保差异检测算法具有较高的执行效率，检测时间不宜过久，以满足用户需求。

3. 项目展示

sample：

template：

前端页面：

检测动画：

结果：

如上图所示，左侧展示的是检测结果（result），而右侧展示的是模板图片（template）。在检测结果中，sample图片与template图片之间的不同之处已经被红色圆圈精确标注出来，从而清晰地指出了两者之间的差异。这意味着系统已经成功识别并圈出了sample图片相对于template图片的不同区域。

4. 数据库设计

5. 前端设计

    // 点击上传图片事件
    submit() {
      if (this.$refs.upload1.uploadFiles.length === 1 && this.$refs.upload2.uploadFiles.length === 1) {
        this.uploadBatchImage(this.fileList1, this.fileList2);
        this.uploaded = true;
      } else {
        Message({
          message: '上传失败！请保证模板和样例同时上传',
          type: 'error',
        });
      }
    },
    
    // 上传文件
    uploadBatchImage(fileList1, fileList2) {
      const loading = this.$loading({
        lock: true,
        text: '图片上传中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      const formData = new FormData();
      // 遍历文件列表，将每个文件添加到formData中
      fileList1.forEach((file) => {
        formData.append(`files`, file.raw, file.name); // `files`是后端期望的字段名
      });
      fileList2.forEach((file) => {
        formData.append(`files`, file.raw, file.name); // `files`是后端期望的字段名
      });

      formData.append('userId', this.userId);

      request
          .post('/checker/upload', formData,
              {
                headers: {
                  'Content-Type': 'multipart/form-data',
                }
              })
          .then(response => {
            loading.close();

            this.checkerVo.id = response.data.data.id;
            this.checkerVo.sampleUrl = response.data.data.sampleUrl;
            this.checkerVo.templateUrl = response.data.data.templateUrl;
            this.checkerVo.userId = response.data.data.userId;
            console.log(this.checkerVo);
            Message({
              message: '上传成功！',
              type: 'success',
            });
          }).catch(error => {
        Message({
          message: '上传失败！',
          type: 'error',
        });
        throw error;
      });
    },
    
    // 点击差异检测事件
    quickCheck() {
      if (this.$refs.upload1.uploadFiles.length === 1 && this.$refs.upload2.uploadFiles.length === 1 && this.uploaded) {
        this.check(2);
      } else {
        Message({
          message: '检测失败！请保证模板和样例同时上传',
          type: 'error',
        });
      }
    },

    // 差异检测
    check(status) {
      const loading = this.$loading({
        lock: true,
        text: '检测中，请稍等几分钟',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      request
          //向/checker/check/{status}发送消息
          .post("/checker/check/" + status, this.checkerVo)  
          .then((res) => {
            console.log(res.data.data);
            this.resultUrl = res.data.data.resultUrl;
            this.templateUrl = res.data.data.templateUrl;
            this.resultVisible = true;
            this.hasResult = true;
            loading.close();
          })
    },

6. Flask后端设计

由于算法可能涉及商业应用，出于保密考虑，不会公开算法的具体内部实现细节。在此情况下，将算法视为一个黑盒，仅对外展示如何通过Flask框架的接口来调用这个算法。这意味着只提供接口的使用方法，而不涉及算法本身的工作原理和代码实现。

如下代码，DiffQuickCheckUtil为算法实现类，已经封装成工具类，不演示内部算法。

from datetime import datetime

import cv2
from flask import Flask, request, jsonify

from utils.AliOssUtil import OSSClient
from utils.DiffQuickUtil import DiffQuickCheckUtil
from utils.DiffUtil import DiffCheckUtil
from utils.DownloadUtil import ImageDownloader

app = Flask(__name__)

@app.route('/diffQuickCheck', methods=['POST'])
def diffQuickCheck():
    # 从请求中获取参数
    data = request.get_json()
    id = data.get('id')
    user_id = data.get('user_id')
    sample_url = data.get('sample_url')
    template_url = data.get('template_url')

    downloader = ImageDownloader()
    template_image, sample_image = downloader.get_images(template_url), downloader.get_images(sample_url)

    diffQuickCheckUtil.calculate(template=template_image, sample=sample_image)

    oss_client = OSSClient(
        accessKeyId=''      # 填写你的阿里云OssId
        accessKeySecret=''  # 填写你的阿里云Oss密钥
        endpoint=''         # 填写你的地区
        bucketName=''       # 填写你的bucket名字
    )

    # 由于并发性低，使用当前时间戳作为文件名，可确保图片文件名唯一
    objectName = f'output/user_{user_id}/{datetime.now().strftime("%Y%m%d%H%M%S")}.jpg'
    localFile = './static/output/quickresult.jpg'

    try:
        # 尝试上传文件到oss
        oss_client.upload_file(objectName, localFile)
        fileLink = oss_client.generate_file_link(objectName)
        print(fileLink)

        # 如果上传成功，返回成功信息
        return jsonify({
            "code": 200,
            "msg": "success",
            "data": {
                "id": id,
                "result_url": fileLink
            }
        })

    except Exception as e:
        # 如果发生异常，打印异常信息并返回错误信息
        print(f"An error occurred: {e}")
        return jsonify({
            "code": 500,
            "msg": "Failed to upload the file to OSS.",
            "data": {
                "userId": id,
                "error": str(e)
            }
        })


if __name__ == '__main__':
    diffQuickCheckUtil = DiffQuickCheckUtil(saveName="./static/output/quickresult.jpg")
    app.run(host='0.0.0.0', port=12345)