1、水果識別小程序核心內容
用戶上傳圖片，小程序將圖片數據返還回來，展示到前端。根據拍攝照片，識別圖片中果蔬名稱，可結合識別結果進一步為用戶提供營養價值、搭配禁忌，果蔬推薦等相關信息，廣泛應用於美食類APP中。
2、水果識別小程序模塊的設計
- 調用百度AI水果識別接口
- 將圖片裝換成base64位並上傳
- 處理請求回來的數據
- 將數據展示到前端
3、調用百度AI水果識別接口
使用NodeSDK文檔
安裝依賴
4、 調用百度AI水果識別接口
設置APPID/AK/SK
aiFruit雲函數
前端解碼圖片並調用雲函數
4、效果展示
5、部分核心代碼
雲函數的代碼
// 雲函數入口文件
const cloud = require('wx-server-sdk')
var AipImageClassifyClient = require("baidu-aip-sdk").imageClassify;
cloud.init()
// 設置APPID/AK/SK
var APP_ID = "22980729";
var API_KEY = "Fby7un15sxHnw01XTAi2SK5g";
var SECRET_KEY = "TV4kLgsOQUz0sw4trVIMKlgTF7SFNBdY";
// 新建一個對象，建議只保存一個對象調用服務接口
var client = new AipImageClassifyClient(APP_ID, API_KEY, SECRET_KEY);
// 如果有可選參數
var options = {};
options["baike_num"] = "5";
// 雲函數入口函數
exports.main = async (event, context) => {
let fruit = await aiFruit()
console.log(fruit)
return{
fruit
}
// 調用函數
// event.img的圖片必須是base64編碼的
function aiFruit(){
return new Promise((resolve,reject)=>{
client.plantDetect(event.img, options)
.then((res)=>{
resolve(res)
})
.catch((error)=>{
console.log(error)
})
})
}
}
主頁index的js代碼
<!-- 圖片展示區域 -->
<view class='pages'>
<view class='face'>
<image src='{{botany}}' mode='widthFix'></image>
<view>
<view>
<!-- 識別結果展示 -->
<view wx:if="{{aibotany}}">
<view class='result'>
<text class='result-text'>識 別 結 果</text>
<view>
<!-- 屬性展示 -->
<view class='botany-view'>
<view class='botany'>
<view>名稱<view>
<view>可信度<view>
<view>百度百科<view>
<view>
<block wx:for="{{botanyimg}}" wx:for-item="item">
<view class='botany botany-attr'>
<view>{{vitem.name}}</view>
<view>{{item.score}}<view>
<view bindtap='baike' data-testid="{{item.baike.description}}">查看百科<view>
<view>
<vock>
<view>
<view>
<!-- 非水果展示 -->
<view class='nobotany' wx:if="{{nohave}}">
{{nofruit}}
<view>
<!--選擇圖片 -->
<view class='btn' wx:if="{{aibtn}}">
<button type='primary' bindtap='faceImage'>拍照<vtton>
<view>
<!-- 百度百科展示 -->
<view class='introd' wx:if="{{introd}}">
<view class='introd-view'>
{{baikedata}}
<view>
<!-- 取消按鈕 -->
<view class='introd-img' bindtap='introdbaike'>
<image src='../../img/quxiao.png' mode='widthFix'></image>
<view>
<view>
賈嚴博 0:20:24
// pages/index/index.js
Page({
/**
* 頁面的初始數據
*/
data: {
botany: '',
botanyimg:[],
introd:false,
baikedata:'',
animation:false,
aibotany:false,
aibtn:true,
nohave:false,
nofruit:''
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
},
// 選擇本地圖片
faceImage() {
console.log('111')
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
// console.log(res)
var tempFilePaths = res.tempFilePaths[0]
// 解碼圖片base64
var imgbase = wx.getFileSystemManager().readFileSync(res.tempFilePaths[0], "base64")
console.log(imgbase)
// 調用雲函數
this.fruitCloud(imgbase)
this.setData({
botany: tempFilePaths,
animation:true,
aibtn:false,
aibotany:false,
nohave:false
})
},
fail: (err) => {
console.log(err)
}
})
},
// 接收后端雲函數
fruitCloud(imgbase){
wx.cloud.callFunction({
name:'fruit',
data:{
img: imgbase
}
})
.then((res)=>{
// console.log(res.result.fruit.result)
let botanyimg = res.result.fruit.result
// map遍歷
let botanydata = botanyimg.map((item)=>{
let name = 
item.name;
let score = item.score.toFixed(3);
let baike = item.baike_info
return {
name,
score,
baike
}
})
console.log(botanydata)
// 判斷是不是水果
if (botanydata[0].name == "非水果"){
this.setData({
aibotany: false,
aibtn: true,
animation:false,
nohave:true,
nofruit: '沒有識別到水果'
})
}else{
this.setData({
botanyimg: botanydata,
animation: false,
aibotany: true,
aibtn: true
})
}
})
.catch((Error)=>{
console.log('出錯啦')
// 請求出現錯誤提示
this.setData({
aibotany: false,
aibtn: true,
animation: false,
nohave: true,
noflower: '網絡錯誤請重新上傳'
})
})
},
// 百度百科展示
baike:function(event){
console.log(event.currentTarget.dataset.testid)
let baikedata = event.currentTarget.dataset.testid
this.setData({
introd:true,
baikedata : baikedata
})
},
// 取消百科內容
introdbaike(){
this.setData({
introd: false
})
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
return {
title: "AI識別水果，快上車",
imageUrl: "../../img/yingc.png",
path: "/pages/index/index"
}
}
})
6、心得感受
本學期js的學習，重點還是在學習概念等一些常識性的東西，我們小組通過兩周的不懈努力，做出了水果識小程序。遇到了很多自己感興趣的問題，就會很有興趣，當然學知識可不能憑自己的愛好和一時興趣，不能遇到自己不敢興趣的問題就把它拋給同學，要學會自己踏踏實實認真的去解決問題。要一步一個腳印，認認真真，踏踏實實，理論與實踐相結合，在扎實掌握課本實例和內容之后，有一定的擴展閱讀和課外學習，充分全面的了解 js、css、html的應用和擴展運用。本次我們小組所做的程序是“水果識別小程序"基本功能已經較好的完成，可是還是有一些不完善，比如我們的小程序沒有能夠做到把微信掃一掃來識別，所以還是有些不完善，我們的指導老師對我們的程序作出了大體評價，發現我們的思想還是處於一個比較簡單的過程當中，老師的幾句簡單評價，就帶給我們無與倫比的沖擊性。希望以后可以做的更好。
演示視頻連接：
打開百度網盤復鏈接：https://pan.baidu.com/s/1Z-XJgy2a4zPXS7Zsx0W95Q
提取碼：i1l5
小組成員：賈嚴博、 陳凡、 銀騰 、寇昱辰、楊雯靜