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

最新推荐文章于 2024-01-19 16:08:02 发布

双丨木

最新推荐文章于 2024-01-19 16:08:02 发布

阅读量3.6k

点赞数 1

分类专栏：图像识别运用使用Ajax上传文件文章标签： Java Javascript

本文链接：https://blog.csdn.net/weixin_44217658/article/details/102840998

版权

图像识别运用同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

使用Ajax上传文件

1 篇文章 0 订阅

订阅专栏

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

最近在学校课比较少，看了下百度的图像识别，我的想法是在客服端浏览器上传植物图片，然后在服务器端进行接收并识别（按指定规则传给百度的图像识别，它会返回结果给你，具体可以参照百度云中人工智能的图像识别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

双丨木

关注

1
点赞
踩
25

收藏

觉得还不错? 一键收藏
1
评论
利用百度图像识别鉴定植物

利用百度图像识别进行植物识别前端页面代码index.js（需要用到的js代码）后端接收并上传给百度图像识别最近在学校课比较少，看了下百度的图像识别，我的想法是在客服端浏览器上传植物图片，然后在服务器端进行接收并识别（按指定规则传给百度的图像识别，它会返回结果给你，具体可以参照百度云中人工智能的图像识别API文档，很详细的！），然后根据结果在页面显示同类植物的信息、商品、事务。由于项目还没开始写，...
复制链接

扫一扫