《微信小程序案例12》图片识别功能
2024-05-08 14:33:43
一、实现效果
二、查看百度AI开发平台文档
该功能是直接使用百度AI开发平台的动物识别接口，这个接口有两个重要的参数，一是需要获取access_token、二是需要把上传的图片编码为base64。而获取access_token有需要使用另一个接口来获取，获取到后我使用缓存技术把这个acces_token保存起来，并设置一个有效时间。
1、百度AI开发平台上的准备工作
新用户是可以直接领取一年的免费试用时间的。
2、查看接口如何使用
access_token是必须参数，使用所提供的接口获取access_token
识别的图片的编码必须是base64：
三、微信小程序代码实现
wxml
<view class="fa"><view class="top"><image src="{{imgSrc}}"></image></view><view class="middle"><view class="photograph" data-flag="0" bindtap="getImage">拍照识动物</view><view class="photos" data-flag="1" bindtap="getImage">相册选择</view></view><view class="animal">{{animal.name}}</view><view class="bottom" class="confirm" bindtap="identify"> 开始识别</view>
</view>js代码
// pages/picIdentif/picIdentif.js
Page({/*** 页面的初始数据*/data: {imgSrc:'/img/tpsb/cat.jpg',imgToBaidu:'',},getImage:function(e){var that = thisvar flag=e.currentTarget.dataset.flagif(flag==0) {var sourceType="camera"}else {var sourceType="album"; }console.log(sourceType)wx.chooseMedia({count: 1,mediaType: ['image','video'],sourceType: [sourceType],maxDuration: 30,camera: 'back',success(res) {// console.log(res)console.log(res.tempFiles[0].tempFilePath)that.setData({imgSrc:res.tempFiles[0].tempFilePath})// wx.getFileSystemManager().readFile为图片编码，调用百度接口也是传这个编码后的数据wx.getFileSystemManager().readFile({filePath: res.tempFiles[0].tempFilePath, //要读取的文件的路径 (本地路径)encoding: 'base64', //编码格式success: res => { //成功的回调console.log(res)// console.log(res.data)that.setData({imgToBaidu:res.data})console.log("编码base64成功")}})}})},identify:function(){var that=this;wx.showLoading({title: '识别中...',})// 调用接口console.log(this.data.imgSrc)wx.request({url: 'https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general?access_token='+that.data.token,data: {// 注意：图片需要base64编码、去掉编码头后再进行urlencode。image: this.data.imgToBaidu},header: {'Content-Type': 'application/x-www-form-urlencoded'},method: 'POST',success (res) {wx.hideLoading({success: (res) => {},})console.log(res.data)// 返回了五个结果，需要根据score处理相似度最高的一个结果let result = res.data.resultlet length = res.data.result.lengthlet max=0.00let obj={name:'',root:'',max:0.00}for(let i=0;i<length;i++){if(result[i].score>obj.max){obj.max=result[i].scoreobj.name=result[i].keywordobj.root=result[i].root} }console.log("++++++++++++++++识别结果："+obj)that.setData({animal:obj})}})},// 百度AIP开放平台使用OAuth2.0授权调用开放API，调用API时必须在URL中带上access_token参数
// 获取token
getToken:function(){console.log("正在创建新的access_token")var that=this;// client_id：app_key需要自己去百度智能云创建相应的应用后获取//client_secret：Secret Keyconst url = 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=lFsrBuHHI0WdrqauG8TbapYC&client_secret=2B6WucDBXfswoFfObmawp7Inkj88OAsD';wx.request({url:url,method: 'POST',success: res => {console.log("创建access_token成功")console.log(res)let thaRres=res.data;// 将access_token存储到storage中wx.setStorage({key:'access_token',data:thaRres.access_token});var date=new Date().getTime();let time=date+2592000*1000;console.log('三十天后的时间',time);console.log('当前时间戳',date)wx.setStorage({key:'expires_in',data:time});that.setData({token:thaRres.access_token});/*access_token： 要获取的Access Token；expires_in： Access Token的有效期(秒为单位，一般为1个月)；*/},});
},/*** 生命周期函数--监听页面加载*/onLoad(options) {// 自定义头部导航栏文字wx.setNavigationBarTitle({title: '动物搜索'});//获取storge中的tokenvar that=this;wx.getStorage({key:'expires_in',success(res){console.log("缓存中有access_token")console.log(res)console.log(res.data)// 获取成功，证明本地已存有相关tokenconst newT =new Date().getTime();// // 用当前时间和存储的时间判断，token是否已过期if (newT > parseInt(res.data)) {console.log("token过期，重新获取token")// token过期，重新获取tokenthat.getToken();} else {console.log("获取本地缓存的token")// 获取本地缓存的tokenlet token=wx.getStorageSync('access_token');console.log("access_token为:"+token)that.setData({token:token});console.log("获取本地缓存的token结束")}},fail(){console.log("缓存中没有access_token")that.getToken();}});},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})《微信小程序案例12》图片识别功能相关推荐
- 微信小程序-预览图片识别二维码
wx.getImageInfo(Object object) 获取图片信息.网络图片需先配置download域名才能生效. 测试图片地址:http://mmbiz.qpic.cn/mmbiz_png/ ...
- 怎么实现微信小程序云开发拼团功能？
[微信云开发教程]怎么实现微信小程序云开发拼团功能? 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 [微 ...
- 基于微信小程序的用户列表点赞功能
代码地址如下: http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4. ...
- 微信图片 自动上传到服务器,微信小程序怎样使图片上传至服务器
这次给大家带来微信小程序怎样使图片上传至服务器,微信小程序使图片上传至服务器的注意事项有哪些,下面就是实战案例,一起来看一下.-wxml 发布项目 /**选择图片 */ choose: functio ...
- 微信小程序网悦新闻开发--功能介绍（一）
目录 微信小程序网悦新闻开发--功能介绍(一) 微信小程序网悦新闻开发--小程序配置(二) 微信小程序网悦新闻开发--首页模块开发(三) 微信小程序网悦新闻开发--视频模块开发(四) 微信小程序网悦新 ...
- 微信小程序长按图片发送给好友
问题描述 微信小程序长按图片发送给好友 解决方法 直接在<image></image>标签添加:show-menu-by-longpress="true" ...
- 微信小程序调起扫码功能
场景:在微信小程序中使用扫码功能,对扫描的物品进行识别处理 1.先随便定义一个点击调起扫码的元素 <view bindtap="tapScan">扫码</view ...
- 微信小程序中进行图片压缩
微信小程序中进行图片压缩 问题: 一般情况下,小程序在进行拍照识别的时候,上传图片的大小会使小程序出现冗余,这个时候,为了减少小程序的冗余 并且使上传的图片可以分辨出该图片中的内容是那些内容,我们就需 ...
- 微信小程序中高清图片替换加载策略
微信小程序中高清图片替换加载策略 前言 一.基本思想 二.具体步骤 1.图片大小对比 2.代码流程 总结 前言 随着微信的不断发展,微信小程序凭借着它用户基数大,无下载安装等优点开始逐渐替代传统app ...
最新文章
- C#Swagger使用
- music算法原理_大话FMCW雷达之区域检测原理
- PowerDesigner导入SQL脚本
- 第五章 条件、循环及其他语句
- java 导出excel 例子_java导出Excel例子
- kafka配置文件server.properties
- python - bs4提取XML/HTML中某个标签下的属性
- Keyboard项目中观察者模式解析
- 1188 最大公约数之和 V2
- win10台式机前置耳机无声音解决方案
- NCH ClickCharts(流程图绘制软件)v4.10 汉化免费版
- 主板螺丝是机箱配还是主板配_MATX主板配什么机箱好？曜越Tt启航者A3装机记
- sublime text3 英文版转为中文版
- HTML英雄联盟 效果图代码结构 (多多指教，感谢)
- 3-6月计算机类学术会议合集
- 【数据分析】盘点五一期间最受欢迎的几个景区
- landsat5数据下载1985年中国地区
- OpenAI 人工智能绘图工具 DALLE 好用吗？
- 专业治疗选择困难症----帮你做选择
- macbook A1181 小白 换键盘记