垃圾分类小程序,拍照识别垃圾分类,垃圾分类查询微信小程序开发代码源码(二)

php 同时被 2 个专栏收录
4 篇文章 1 订阅
5 篇文章 2 订阅

上一篇文章我们写了 垃圾分类小程序的文字查询分类 垃圾分类微信小程序开发源码,垃圾分类查询工具,垃圾怎么分类拍照识别垃圾分类(一)

接下来我们来说下 垃圾分类拍照识别的功能实现代码

首先说到拍照 我们微信小程序里面有个

camera

基础库 1.6.0 开始支持,低版本需做兼容处理

系统相机。扫码二维码功能,需升级微信客户端至6.7.3。需要用户授权 scope.camera

相关api:wx.createCameraContext

所以前台页面我们需要用到它:

<view class='camera-box'><camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 100%;"></camera></view>

</view>

还有一个保存按钮:

<!--相机按钮-->

<!--<image src='../images/playbut.png' class='playbutcss' bindtap="subut"></image>-->

<cover-view class="playbutcss" bindtap="subut">

<cover-image class="img" src="../images/playbut.png" />

</cover-view>

<!--end相机按钮作者Q1379174464-->

这样前台页面的构建就完成了。

接下来要处理的就是按钮拍照后我们要吧照片上传到服务器,给后台识别照片:

这里用到的api就是 ctx.takePhoto

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: app.globalData.serverUrl + '/laji/api.php?action=upimg',

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);

//console.log(dataarr);

that.setData({ itemdata: dataarr.result})

//that.data.itemdata = dataarr.result;

},

fail: function (error) {

wx.hideLoading();

wx.showToast({

title: '请求超时',

icon: 'loading',

duration: 2000

});

console.log(error)

},

complete: function () {

wx.hideLoading();

}

})

/**end */

}

})

}

将照片上传到服务器后台出来 识别出垃圾分类的数据返回给前台显示:

垃圾分类小程序

这个就是数据返回给前台的数据展示,这样一个垃圾分类小程序的基本功能就已经完成了.

  • 5
    点赞
  • 0
    评论
  • 49
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值