uniapp 开发微信小程序图像识别

效果图：

1.开通百度AI图像识别

https://login.bce.baidu.com/?redirect=https%3A%2F%2Fconsole.bce.baidu.com%2F%3Ffromai%3D1#/aip/overview

2.代码解释

3.完整代码

<template><view><view class="radio-list"><view style="color: #DD524D;"> 请选择类别：</view><radio-group class="radioG" @change="radioChange"><label class="radioR" v-for="(item, index) in radioItems" :key="item.value"><view><radio :value="item.value" :checked="item.checked" /></view><view> {{item.name}} </view></label></radio-group></view><view class="line"></view><view class="content"><!-- 选择图片区域 --><view class="images_box"><image class='img' :src='imgTempUrl' mode='aspectFill'></image></view><!-- 按钮区域 --><button class="btn" type="primary" @click="imgAdd">选择图片</button><!-- 识别结果 --><view class="txt" v-for="(item, index) in resItems" :key="item.value" ><text> {{ (item.score * 100).toFixed(1) }}% ---> {{item.name}} </text>               </view></view></view>
</template><script>//定义本页用到的变量var imgB64 = ''var id = 'bxxxxxxxxxxxxrio'var secret = 'LQxxxxxxxxxxxxxxxxxxxxxxxCQ'var typeUrl = 'https://aip.baidubce.com/rest/2.0/image-classify/v1/animal?access_token=' //默认是动物识别export default {data() {return {               type: 0 ,imgTempUrl: '',resItems:[],radioItems: [{value: 0,name: '动物识别',checked: true},{value: 1,name: '植物识别',checked: false},{value: 2,name: 'Logo识别',checked: false}],}},// 分享给朋友onShareAppMessage: function() {},//分享到朋友圈onShareTimeline: function() {},methods: {radioChange(e) {//console.log(e.detail.value)this.type = e.detail.valueif(this.type == 0) {  //动物识别typeUrl = 'https://aip.baidubce.com/rest/2.0/image-classify/v1/animal?access_token='}if(this.type == 1) {  //植物识别typeUrl = 'https://aip.baidubce.com/rest/2.0/image-classify/v1/plant?access_token='}if(this.type == 2) {  //商标识别typeUrl = 'https://aip.baidubce.com/rest/2.0/image-classify/v2/logo?access_token='}},//选择图片imgAdd() {wx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success: (res) => {this.imgTempUrl = res.tempFilePaths[0]this.getB64ByUrl(this.imgTempUrl)  //调用方法并传入参数}})},//转换成base64格式getB64ByUrl: function(url) {               const FileSystemManager = wx.getFileSystemManager();FileSystemManager.readFile({filePath: url,encoding: 'base64',success:(res) => {//console.log(res.data)imgB64 = res.datathis.plantTap()  //调用方法},fail:(err) => {console.log(err)}})},plantTap() {let that = thisthis.getToken(function(token) {  //先调用getToken方法得到token,再传入getResult方法中运行that.getResult(token)});},getToken: function(callback) {  //回调函数，要有返回值wx.request({url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=' + id + '&client_secret=' + secret,data: {},header: {'content-type': 'application/x-www-form-urlencoded' // 默认值},success(res) {                     //console.log(res)var token = res.data.access_tokenreturn callback(token) //返回值},fail(err) {console.log('错误',err)}});},getResult: function(token) { let that = thiswx.request({url: typeUrl + token, method: "post",data: {image: imgB64},header: {'content-type': 'application/x-www-form-urlencoded' // 默认值},success(res) {console.log(res.data)that.resItems = res.data.result}})}}}
</script><style>.radio-list {margin-left: 3.3%;}.radioG {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;}.radioR {display: flex;flex-direction: row;margin: 5rpx;}.line {border-top: 1rpx;border-top-style: solid;border-color: #007AFF;}.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.btn {margin: 10px;width: 80%;}.images_box {border: 1rpx;border-style: solid;border-color: rgba(0, 0, 0, 0.452);width: 98%;height: 496rpx;margin: 10rpx;position: relative;}.img {width: 100%;height: 100%;}.txt{margin: 10px;font-size: 20px;color: #007AFF;}</style>

uniapp 开发微信小程序图像识别相关推荐

uniapp开发微信小程序设置分包，简单易学（图解）
我们使用uniapp开发微信小程序的时候,当我们的包体积过大的时候,无法真机模拟因为小程序单个包只支持2MB,所以这时候我们要选择去分包. 有人要问了分包难吗?分包很简单.但是最重要的来了,分包这 ...
uni-app开发微信小程序使用微信小程序的插件
假如使用uni-app开发微信小程序需要用到官方插件----OCR插件, 插件地址如下: OCR插件申请方式见插件地址介绍.本文主要记录调用方式 1.在manifest.json的"mp- ...
Uni-app开发微信小程序使用本地图片做背景图
Uni-app开发微信小程序使用本地图片做背景图 <view class="content" :style="{backgroundImage:'url(' + i ...
uniapp开发微信小程序，从构建到上线
前言: 本文主要介绍 uniapp 的基础使用,以及使用 uniapp 在企业开发的过程中的一个详细流程,比较适合第一次使用uniapp 开发微信小程序的伙伴,或者没有过实战经验的小伙伴参考:使用 H ...
uniapp开发微信小程序分享功能
记一次uniapp开发微信小程序遇到的问题, 问题: 关于button的分享属性, 在HbuilderX中开发时,直接将button覆盖在image上,将button设置为透明,可以直接实现分享功能, ...
uniapp开发微信小程序-7.用户填写表单信息
uniapp开发微信小程序-7.用户填写表单信息本章让用户通过表单更新自己的个人信息,也是本系列文章最后一篇入门分享,之后碰到新颖.常用的功能会继续分享给大家,如果大家有任何问题欢迎留言,我会尽快线 ...
uniapp开发微信小程序使用painter绘制海报
uniapp开发微信小程序使用painter绘制海报参考文章: 1.简书大佬文章https://www.jianshu.com/p/e9cab600cf6c 2.CSDN大佬文章https://bl ...
uniapp开发微信小程序-4.页面跳转与横向滑动
uniapp开发微信小程序-4.页面跳转与横向滑动本篇文章主要是想记录一下横向滑动功能,备忘的同时给大家做个分享. 但既然是初级分享系列文章,为了方便新手朋友的上手工作,还是在此之前说一下页面跳转的 ...
uniapp开发微信小程序 wx.navigateBack()携带数据问题
uniapp开发微信小程序 wx.navigateBack()携带数据问题某个表单页面有时需要跳转另一个页面查询数据但如此想要保存当前页面数据需要在另一个查询页面调用 wx.navigateBa ...

uniapp 开发微信小程序图像识别

1.开通百度AI图像识别

2.代码解释

3.完整代码

uniapp 开发微信小程序图像识别相关推荐

最新文章

热门文章