利用百度图像识别鉴定植物

利用百度图像识别进行植物识别

- 前端页面代码
- 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(){//查询图片信息的URLvar 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-TypecontentType : false,/*** 必须false才会避开jQuery对 formdata 的默认处理* XMLHttpRequest会对 formdata 进行正确的处理*/processData : false,dataType:"json",//设置上传的mime类型为  multipart/form-datamimeType:"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