智能垃圾分类小程序 拍照一键识别垃圾类别
垃圾分类查询小程序|拍照识别垃圾分类小程序|微信小程序拍照识别垃圾分类
具体的一个垃圾属于什么垃圾我们还是不清楚,接下来我们就来写一个拍照可以识别垃圾分类的微信小程序
作者Q--Q:1-3-7-9-1-7-4-4-6-4
先上效果:
我们小程序要用到的组件就是微信小程序的拍照功能,那么就要调用手机的摄像头
调用手机的摄像头拍照组件
camera
基础库 1.6.0 开始支持,低版本需做兼容处理。
系统相机。扫码二维码功能,需升级微信客户端至6.7.3。需要用户授权 scope.camera。
相关api:wx.createCameraContext
Bug & Tip
tip: 同一页面只能插入一个 camera 组件
tip:请注意原生组件使用限制
tip:onCameraFrame 接口根据 frame-size 返回不同尺寸的原始帧数据,与 Camera 组件展示的图像不同,其实际像素值由系统决定
页面wxml:
<view class='camera-box'><camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 100%;"></camera></view>
<!--相机按钮-->
<cover-view class="playbutcss" bindtap="takePhoto">
<cover-image class="img" src="../images/playbut.png" />
</cover-view>
<!--end相机按钮-->
拍照要用到的函数 将拍照获取到的图片上传到服务器进行识别,识别结果返回给客户端显示:
takePhoto() {
var that=this;
this.ctx.takePhoto({
quality: 'high',
success: (res) => {
this.setData({
src: res.tempImagePath
})
/******上传识别图片*******/
wx.showLoading({
title: '识别中...',
})
var tempFilePaths = res.tempImagePath
wx.uploadFile({
url: '后台服务器地址',
header: { "Content-Type": "multipart/form-data" },
filePath: tempFilePaths,
name: encodeURI('img'),
formData: {
uid: encodeURI('test')
},
success(res) {
console.log(res)
var dataarr = JSON.parse(res.data);
that.setData({ itemdata: dataarr.result})
},
fail: function (error) {
wx.hideLoading();
wx.showToast({
title: '请求超时',
icon: 'loading',
duration: 2000
});
console.log(error)
},
complete: function () {
wx.hideLoading();
}
})
/**end */
}
})
}
这样一个拍照识别垃圾分类的微信小程序的主要功能就完成了。作者Q--Q:1-3-7-9-1-7-4-4-6-4