调用百度大脑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) {// 初始化一个AipImageClassifyAipImageClassify 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/SKpublic 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<>());// 手动返回jsonresp.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-uploadaction="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){// 将后台返回的响应结果赋值给当前实例当中的respthis.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>
