一文读懂SpringBoot+JS搭建目标检测应用

2023-10-31 10:30:02

前端上传图片，点击检测，后端算法推理，前端展示原图及检测结果图，没有数据库，只需SpringBoot+JS+深度学习库DJL。

关键词：

前端：图像上传和结果展示

前端采用HTML、JS、jQuery，实现图片上传和结果展示。

HTML结构：

<input type="file" id="image-input" />
<button id="detect-btn">检测</button>
<div id="original-image"></div>
<div id="detected-image"></div>

JS代码：

$("#image-input").change(function() {
  // 读取图片文件
  var file = this.files[0];
  // 上传图片到后端
  $.ajax({
    url: "/upload",
    data: new FormData(),
    success: function(data) {
      // 后端返回检测结果
      // 展示原图
      $("#original-image").html(`<img src="${data.originalImage}" />`);
      // 展示检测结果图
      $("#detected-image").html(`<img src="${data.detectedImage}" />`);
    }
  });
});

后端：算法推理

后端使用SpringBoot和DJL实现算法推理。

SpringBoot控制器：

@PostMapping("/upload")
public Object upload(@RequestParam("image") MultipartFile image) {
  // DJL算法推理
  BufferedImage detectedImage = ...;
  return new HashMap<String, String>() {{
    put("originalImage", image.getResource().getURL().toString());
    put("detectedImage", ...);
  }};
}