利用百度图像识别进行植物识别
前端页面代码index.js（需要用到的js代码）后端（Java）接收并上传给百度图像识别
最近在学校课比较少，看了下百度的图像识别，我的想法是在客服端浏览器上传植物图片，然后在服务器端进行接收并识别（按指定规则传给百度的图像识别，它会返回结果给你，具体可以参照百度云中人工智能的图像识别API文档，很详细的！），然后根据结果在页面显示同类植物的信息、商品、事务。由于项目还没开始写，所以这里只是对结果进行了回显。我这里只是对我的整个流程代码进行阐述，有什么问题或优化可以帮忙指教一下，谢谢！
前端页面代码
<!-- 我前端页面用到是H5，当然可以直接用最简单的html实现 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>图像识别</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet"
href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet"
href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
<link rel="stylesheet" href="../resources/css/shop/productmanage.css">
</head>
<body>
<header class="bar bar-nav">
<h1 class="title">图像识别</h1>
</header>
<div class="content">
<div class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-media">
<i class="icon icon-form-email"></i>
</div>
<div class="item-inner">
<div class="item-title label">植物图片</div>
<div class="item-input">
<input type="file" id="small-img" name="file" >
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block">
<div class="row">
<div class="col-100">
<a href="#" class="button button-big button-fill" id="submit">查询</a>
</div>
</div>
</div>
</div>
<script type='text/javascript'
src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript'
src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript'
src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script type='text/javascript'
src='../resources/js/baidu/index.js' charset='utf-8'></script>
</body>
</html>
index.js（需要用到的js代码）
/**
* 利用Ajax来上传图片
*/
$(function(){
//查询图片信息的URL
var productPostUrl = '/自己项目名/baidu/txsp';
$('#submit').click(function(){
//获取图片对象
var thumbnail = $('#small-img')[0].files[0];
//浏览器打印出来看看而已
console.log(thumbnail);
//利用FormData来上传文件
var formData = new FormData();
formData.append('thumbnail', thumbnail);
$.ajax({
url : productPostUrl,
type:'POST',
data : formData,
//必须false才会自动加上正确的Content-Type
contentType : false,
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
processData : false,
dataType:"json",
//设置上传的mime类型为 multipart/form-data
mimeType:"multipart/form-data",
cache : false,
success : function(data){
if(data.success){
//回显植物名称
$.toast(data.result);
}else {
$.toast('无法识别！');
}
}
});
});
});
后端（Java）接收并上传给百度图像识别
/*
这里用到了AccessToken、Base64Util、FileInputStreamUtil、TXSPHttpUtil4个工具类
AccessToken：是为了通过百度给的API Key和Secret Key获取权限（即Access Token）
（不懂得可以去百度云的人工智能—图像识别 看一下它的API文档，很简单的）
Base64Util:进行Base64编码
FileInputStreamUtil：根据图片的输入流读取并返回byte[] 数组
TXSPHttpUtil：通过该工具类将图片发送给百度进行识别，并返回结果（JSON格式）
*/
@Controller
@RequestMapping("/baidu")
public class BaiDuTXSP {
/**
* 进行图像识别，返回植物信息
* @param request
* @return
*/
@RequestMapping(value="/txsp",method=RequestMethod.POST)
@ResponseBody
//写required=false 是为了当前端不传文件时不会报错。
private Map<String,Object> listShopDetailPageInfo(HttpServletRequest request,@RequestParam( value="thumbnail",required=false)MultipartFile multipartFile){
Map<String,Object> modelMap = new HashMap<String, Object>();
//百度图像识别请求地址
String requestUrl = "https://aip.baidubce.com/rest/2.0/image-classify/v1/plant";
try {
//读取文件内容转为byte数组
byte[] imageArr = FileInputStreamUtil.readFileByBytes(multipartFile.getInputStream());
//通过Base64进行编码
String imageStr = Base64Util.encode(imageArr);
//参数：图片的字符串形式
String imageParam = "image=" + URLEncoder.encode(imageStr, "UTF-8");
//以字符串的形式发送给百度并返回结果
String result = TXSPHttpUtil.post(requestUrl, AccessToken.getAccessToken(), imageParam);
modelMap.put("result",new JSONObject(result).getJSONArray("result").getJSONObject(0).getString("name"));
modelMap.put("success",true);
} catch (Exception e) {
System.out.println("图像识别失败！");
modelMap.put("success",false);
e.printStackTrace();
}
return modelMap;
}
}
Controller层用到的四个工具类我就不写在上面了，如果有需要可以通过百度网盘下载。 链接： 百度网盘4个工具类下载链接 提取码：b0bw
