百度物体识别api的uniapp小程序项目

运行效果

百度智能云

百度开放平台：点击跳转

百度智能云于2015年正式对外开放运营，基于百度18年技术积累，提出ABC（AI、BigData、Cloud Computing）三位一体发展战略，要用"最全面最落地的A+最开放最安全的B+持续领先的C"与IoT、区块链、边缘计算结合。这一服务体系拥有智能边缘、云端全功能AI芯片、安全存储、一站式解决方案等全面ABC功能，全形态输出150多项AI能力，9个开源的大数据服务能力，以及10种计算实例、6类网络组件、3级对象存储等强大的基础云服务能力。

物体检测api

百度智能云的物体检测API是基于百度独创的“轻量级物体检测模型”及“数据驱动的智能化标注方案”，打造的百度智能云-AI开放平台物体检测API。它能够支持通用物体检测、定制物体检测，支持高精度的图像物体检测。此外，它还具有高效、快速、准确的特点，可以帮助企业或个人高效地进行图像中的物体检测，从而进行智能化分析和处理。

步骤

• 注册一个百度账号，并登录百度智能云。
• 进入百度智能云个人中心，找到图像识别，点击创建图像识别应用。
• 创建成功后，打开百度AI开放平台，找到图像识别，点击进入动物识别界面，打开技术文档。
• 点击下方链接进行Access Token获取
• 然后使用后端语言或编写接口，或前端进行请求

个人实现

先获取token-这里是用springboot开的后台：

使用了hutool工具类来进行http请求，封装工具类详情：http工具类

sevices代码:

    public String getToken(){
        HttpResponse post = RequestUtil.post("https://aip.baidubce.com/oauth/2.0/token?client_id=MeAAK1tby49DAZkdrnsX7q5Y&client_secret=****&grant_type=******", "");
        String body = post.body();
        JSONObject token = JSON.parseObject(body);
        String accessToken = token.getString("access_token");
        return accessToken;
    }
	/**
	* 图像识别接口
	* url 图像网络地址
	**/
    public List<AdvancedGeneralPo> getAdvanceGeneral(String url){
        String params = "url="+url;
        HttpResponse post = RequestUtil.post("https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general?access_token=" + getToken(), params);
        // 使用JSON.toJSONString()将Object转为json字符串
        JSONObject jsonObject = JSON.parseObject(post.body());
        Object result = jsonObject.get("result");
        List<AdvancedGeneralPo> advancedGeneralPos = JSONObject.parseArray(result.toString(), AdvancedGeneralPo.class);
        return advancedGeneralPos;
    }

前端:

<template>
    <view class="content">
      <view class="btn-area">
        <button @tap="chooseImage" type="primary">拍照</button>
      </view>
      <view class="img-container">
        <image :src="imageSrc" mode="aspectFill"></image>
      </view>
	  <view class="display" v-for="(item,index) in resultData" :key="index">
			<view class="child">
				<view>
					<text>{{item.keyword}}</text>
				</view>
				<view>
					<text>{{item.root}}</text>
				</view>
				<view>
					<text>{{item.score}}</text>
				</view>
			</view>
	  </view>
	  <canvas style="width: 300px; height: 200px;" canvas-id="canvas" id="canvas"></canvas>
    </view>
</template>

<script>
	export default {
	  data() {
	    return {
	      imageSrc: '',
		  name:'',
		  resultData:[
			],
	    }
	  },
	  onLoad() {
	  	// this.getToken()
		const ctx = uni.createCanvasContext('canvas')
		ctx.rect(519, 259, 259, 916)
		ctx.stroke()
		ctx.draw()
		
	  },
	  methods: {
		testUpload(){
			this.upLoadImg();
		},
	    chooseImage() {
	      uni.chooseImage({
	        count: 1,
	        success: (res) => {
			  this.imageSrc = res.tempFilePaths[0];
			  this.name = res.tempFiles[0].name
			  console.log(this.imageSrc)
			  this.upLoadImg()
	        }
	      });
	    },
		getImgApi(url){
			uni.request({
			    url: 'http://localhost:8081/baiduApi/advancedGeneral', //仅为示例，并非真实接口地址。
				method:'POST',
			    data: {
					url:url
				},
			    header:{
					"Accept": "application/json",
					"Content-Type": "application/json"
				},
			    success: (res) => {
					uni.hideLoading();
					console.log(res.data.data);
					this.resultData = res.data.data;
			       
			    }
			});

		},
		upLoadImg(){
			uni.showLoading({
			  title: '上传中' 
			})
			const filePath = this.imageSrc // 选择图片的临时路径
			const name = this.name
			uniCloud.uploadFile({
				filePath:filePath,
				cloudPath:"/aiImage/"+Date.now() + "-" + name,
				cloudPathAsRealPath:true,
			}).then(res=>{
				
				console.log(res["fileID"])
				this.getImgApi(res["fileID"])
			})
			
		}
	  }
	}

</script>

<style lang="scss">
	.content{
	  padding: 20rpx;
	  .img-container{
	    width: 100%;
	    height: 600rpx;
		padding-bottom: 40rpx;
	    image{
	      width: 100%;
	      height: 100%;
	    }
	  }
	  .btn-area{
	    padding-bottom: 40rpx;
	  }
	  .display{
		  width: 100%;
		  text{
			  font-size: 28rpx;
			  padding-bottom: 10rpx;
		  }
		  .child{
			  padding: 30rpx;
			  border-bottom: 1rpx solid #eee;
		  }
	  }
	}
	
	
</style>

这里图片会先通过uniCloud上传，然后收到返回的地址后请求后端接口，然后识别后的数据。图片上传请看uniapp的api的uploadFile方法。文档地址
所以在开发之前需要注册一个dcloud的服务空间，然后绑定uniCloud的服务
dcloud服务空间