调用百度大脑AI开放平台接口实现java+web的图像识别技术

一、后台实现图像识别接口

可参考百度大脑AI开放平台SDK文档\JavaSDK文档\快速入门
下为官方文档的使用例子

public class Sample {
    //设置APPID/AK/SK（我们在使用百度接口的时候要经过授权（登录），获得App ID、Api Key及Secret Key）
    public static final String APP_ID = "你的 App ID";
    public static final String API_KEY = "你的 Api Key";
    public static final String SECRET_KEY = "你的 Secret Key";

    public static void main(String[] args) {
        // 初始化一个AipImageClassify
        AipImageClassify client = new AipImageClassify(APP_ID, API_KEY, SECRET_KEY);

        // 可选：设置网络连接参数
        client.setConnectionTimeoutInMillis(2000);
        client.setSocketTimeoutInMillis(60000);

        // 可选：设置代理服务器地址, http和socket二选一，或者均不设置
        client.setHttpProxy("proxy_host", proxy_port);  // 设置http代理
        client.setSocketProxy("proxy_host", proxy_port);  // 设置socket代理

        // 调用接口（传入的参数path为图片地址）
        String path = "test.jpg";
        JSONObject res = client.objectDetect(path, new HashMap<String, String>());
        System.out.println(res.toString(2));
        
    }
}

1、在pom.xml导入依赖

        <!-- baidu sdk -->
        <dependency>
            <groupId>com.baidu.aip</groupId>
            <artifactId>java-sdk</artifactId>
            <version>4.15.1</version>
        </dependency>

2、在项目下创建一个包api，存放AipImageClient.java

AipImageClient为一个通用接口，用以获取到AipImageClassify的实例

package com.briup.recognition.api;

import com.baidu.aip.imageclassify.AipImageClassify;

public class AipImageClient {
	//设置APPID/AK/SK
    public static final String APP_ID = "22788572";
    public static final String API_KEY = "gDjq3kdOXQXiA1XMM5qoKMNc";
    public static final String SECRET_KEY = "bOCcLzPRcGXe6guqi4yON19ho1qj67B0";

	// 2.本类内部创建对象实例
	private static AipImageClassify instance = null;

	/**
	 * 1.构造方法私有化，外部不能new
	 */
	private AipImageClient() {}
	
	// 3.提供一个公有的静态方法getInstance，通过AipImageClient调用getInstance就可以获取到AipImageClassify的实例，通过这个实例就可以调用所有的接口
	public static AipImageClassify getInstance() {
		if (instance == null) {
			instance =  new AipImageClassify(APP_ID, API_KEY, SECRET_KEY);
		}
		return instance;
	}

3、通过AipImageClient类调用接口

package com.briup.recognition.web.controller;

import java.util.HashMap;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONObject;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import com.baidu.aip.imageclassify.AipImageClassify;
import com.briup.recognition.api.AipImageClient;

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;

//车辆识别接口
@Api(description = "车辆识别接口")
@Validated
@RestController
@RequestMapping("/recognition")
public class CarsRecognitionController {

    @ApiOperation(value = "车辆识别")
    @PostMapping("cars")
    public void plant( @RequestParam("file") MultipartFile file, HttpServletRequest req, HttpServletResponse resp) throws Exception {
        // 获取图像识别客户端
        AipImageClassify client = AipImageClient.getInstance();
//		JSONObject res = client.plantDetect(file.getBytes(), new HashMap<>());
//      JSONObject res = client.advancedGeneral(file.getBytes(), new HashMap<>());
        // 参数为二进制数组
        JSONObject res = client.carDetect(file.getBytes(),new HashMap<>());
        // 手动返回json
        resp.setHeader("Content-Type", "application/json;charset=UTF-8");
        resp.getWriter().write(res.toString());
    }
}

参考百度大脑AI开放平台SDK文档\JavaSDK文档\接口说明，我们可以自行选择所需要的图像识别接口

二、前端页面实现和后台接口调用

1、新建用于存放图像识别页面的文件夹，并新建一个vue文件

2、构建页面基本框架

<!-- vue的三个模块 -->
<!-- 模板 html -->
<template>
    <!-- 这里有且只能有一个根标签 -->
    <div>
        example
    </div>
</template>
<!-- 脚本 js -->
<script>
export default {
    // 定义变量
    data(){ 
        return {
			
        }
    },
    // 定义事件处理函数
    methods:{
		
    },
    // 生命周期钩子函数
    created(){

    }
}
</script>
<!-- 样式 css -->
<style lang="sass" scoped>

</style>

2、配置路由

      {
        path: 'cars_recoginition',
        name: 'carsRecoginition',//当前路由名称
        component: () => import('@/views/CarsRecoginition/Index'),//页面文件路径
        meta: { title: '车辆识别'}
      }

3、添加elementui图片上传组件

<template>
    <div>
        <!-- action：处理图像的后台接口地址; -->
        <!-- :on-preview="handlePictureCardPreview"：处理图片的预览 -->
        <!-- :on-remove="handleRemove"：处理图片的移除 -->
        <!-- :on-success="successHandler"：处理图像成功的响应 -->
        <div style="text-alicenter">
            <el-upload
                action="http://localhost:8888/recognition/cars"
                list-type="picture-card"
                :on-success="successHandler">
                <i class="el-icon-plus"></i>
            </el-upload>
        </div>
    </div>
</template>

定义successHandler方法

    data(){
        return {
            resp :{}
        }
    },
    methods:{
        successHandler(resp){
            // 将后台返回的响应结果赋值给当前实例当中的resp
            this.resp = resp;
        }
    },

4、添加用于接收成功数据的表单

        <div>
            <h3>识别结果：</h3>
            <el-table :data="resp.result">
                <el-table-column label="精确度" align="center" prop="score"></el-table-column>
                <el-table-column label="生产年份" align="center" prop="year"></el-table-column>
                <el-table-column label="车辆型号" align="center" prop="name"></el-table-column>
            </el-table>
        </div>