精华内容
下载资源
问答
  • 微信小程序拍照识别垃圾分类|垃圾分类查询小程序|拍照识别垃圾分类小程序 微信小程序拍照识别垃圾分类查询小程序|拍照识别垃圾分类小程序 最近全中国人都在讨论一件事情那就是垃圾分类! 从上海开始到全国46个城市...

    微信小程序拍照识别垃圾分类|垃圾分类查询小程序|拍照识别垃圾分类小程序

    微信小程序拍照识别垃圾分类查询小程序|拍照识别垃圾分类小程序
    最近全中国人都在讨论一件事情那就是垃圾分类!
    从上海开始到全国46个城市试点垃圾分类提上日程似乎已经板上钉钉
    垃圾分类会激发多大的市场?哪些相关产业值得关注?
    全产业链均受益,湿垃圾市场增量最大 
    具体来说,可回收物 有害垃圾 易腐垃圾其他垃圾

    但是具体的一个垃圾属于什么垃圾我们还是不清楚,接下来我们就来写一个拍照可以识别垃圾分类的微信小程序

     

    展开全文
  • 但是具体的一个垃圾属于什么垃圾我们还是不清楚,接下来我们就来写一个拍照可以识别垃圾分类的微信小程序 作者Q--Q:1-3-7-9-1-7-4-4-6-4 先上效果: 我们小程序要用到的组件就是微信小程序的...

    生活垃圾一般可分为四大类:可回收垃圾、厨余垃圾、有害垃圾和其他垃圾。

    可回收垃圾:有废纸、塑料、玻璃、金属和布料五大类。

    厨余垃圾:剩菜剩饭、骨头、菜根菜叶、果皮等食品类废物,

    有害垃圾:包含电池、荧光灯管、灯泡、水银温度计、油漆桶、部分家电、过期药品、过期化妆品等。含有对人体健康有害的重金属、有毒的物质或对环境造成现实危害或者潜在危害的废弃物。

    但是具体的一个垃圾属于什么垃圾我们还是不清楚,接下来我们就来写一个拍照可以识别垃圾分类的微信小程序

    作者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
     

    展开全文
  • 人工智能微信小程序识别图片上的文字并提取出来,微信小程序+java后台,使用百度文字识别来检测图片上的文字
  • 关键词:微信小程序 人脸识别 百度云接口 前言 这是一篇关于一个原创微信小程序开发过程的原创文章。涉及到的核心技术是微信小程序开发方法和百度云人脸识别接口。小程序的主体是一个用于个人密码存储的密码管理器...

    微信小程序---人脸识别登陆的实现

    关键词:微信小程序 人脸识别 百度云接口

    前言

    这是一篇关于一个原创微信小程序开发过程的原创文章。涉及到的核心技术是微信小程序开发方法和百度云人脸识别接口。小程序的主体是一个用于个人密码存储的密码管理器,在登陆注册阶段,需要调用百度云人脸识别接口以及百度云在线人脸库的管理接口。本文主要涉及登陆注册模块的实现,而且不需要PHP后台代码,完全在线调用接口实现,希望后来的你能有所收获!(补充说明,如果要在实际中使用的话,要谨慎,后面的上传图片的步骤存在问题。暂时还未解决!)

    步骤

    步骤涉及接口(百度云)
    拍摄或者相册选择 并 上传比对样本照片到 人脸库人脸库管理接口(main:人脸注册)
    拍摄照片并上传,云服务器在线比对 人脸库照片与上传图片的相似度人脸识别接口
    获取返回结果(相似度)人脸识别接口

     

     

     

     

     

     

     

    开发过程

    1.拍摄人脸图片上传至人脸库---注册

    准备工作:需要在百度云注册(或者直接用百度云盘app扫码登陆),并创建人脸识别的应用。(完全免费)

    具体如下:

    百度云:https://cloud.baidu.com/

    注册完成后(或者直接扫码登陆),进入管理控制台->产品服务->人工智能->人脸识别->创建应用->填写必要信息->立即创建

     

     至此,我们已经创建好了人脸识别的应用。接下来,进入应用列表,找到我们才新建的应用,查看人脸库,我们需要创建用户组(用来集中管理小程序的用户人脸照片)

    新建组(id不要太复杂,后面还要用的。)

    至此,我们已经完成了在云上的所有必要操作。下面,我们在小程序中,拍照上传即可。


     拍照上传

    需要在pages中新建一个目录,用来承载我们的登陆注册模块。就假定为 camera{camera.js camera.wxml camera.wxss camera.json}

    主要文件自然是 *.wxml 和 *.js 了。

    camera.wxml

     1 <!-- camera.wxml相机大小需要从重新设置 -->
     2 <camera
     3   device-position="front"
     4   flash="off"
     5   binderror="error"
     6   style="width: 100%; height: 400px;"
     7 ></camera>
     8 
     9 <!-- 需要使用 button 来授权登录 -->
    10 <button
    11   wx:if="{{canIUse}}"
    12   open-type="getUserInfo"
    13   bindgetuserinfo="bindGetUserInfo"
    14   type="primary"
    15 >
    16   授权
    17 </button>
    18 <view wx:else>请升级微信版本</view>
    19 
    20 <!-- 拍照按钮 -->
    21 <button type="primary" bindtap="takePhoto"> 拍照 </button>
    22 
    23 <button bindtap='btnreg'> 注册须知 </button>

    我所谓的授权是,我需要获取用户微信的昵称来充当我人脸库照片的用户id,你可以不需要(设置成一样的,如果是只有一个人使用的话。)

    camera.js

    调用wxAPI takePhoto() 拍照并获取src -> wx.request() 访问百度云 用先前创建的应用的API Key & Screct Key 获取 access_token -> wx.request() 访问百度云 上传 所拍照片(要经过base64编码)详情可参考小程序API文档  以及 百度云API文档(接口以及于18年升级至v3)

      1 // camera.js
      2 const app = getApp()
      3 Page({
      4   data: {
      5     canIUse: wx.canIUse('button.open-type.getUserInfo'),
      6     nickName : "",
      7     src : "",//图片的链接
      8     token: "",
      9     base64: "",
     10     msg:""
     11   },
     12 
     13   //拍照
     14  takePhoto() {
     15     var that = this;
     16     //拍照
     17     const ctx = wx.createCameraContext()
     18     ctx.takePhoto({
     19       quality: 'high',
     20       success: (res) => {
     21         this.setData({
     22           src: res.tempImagePath//获取图片
     23         })
     24 
     25         //图片base64编码
     26         wx.getFileSystemManager().readFile({
     27           filePath: this.data.src, //选择图片返回的相对路径
     28           encoding: 'base64', //编码格式
     29           success: res => { //成功的回调
     30             this.setData({
     31               base64: res.data
     32             })
     33           }
     34         })
     35       }//拍照成功结束
     36 
     37     })//调用相机结束
     38 
     39       //acess_token获取,qs:需要多次尝试
     40       wx.request({
     41         url: 'https://aip.baidubce.com/oauth/2.0/token', //是真实的接口地址
     42         data: {
     43           grant_type: 'client_credentials',
     44           client_id: '**********************',//用你创建的应用的API Key
     45           client_secret: '************************'//用你创建的应用的Secret Key
     46         },
     47         header: {
     48           'Content-Type': 'application/json' // 默认值
     49         },
     50         success(res) {
     51           that.setData({
     52             token: res.data.access_token//获取到token
     53           })
     54         }
     55       })
     56       
     57       //上传人脸进行注册-----test
     58       wx.request({
     59         url: 'https://aip.baidubce.com/rest/2.0/face/v3/faceset/user/add?access_token=' + this.data.token,
     60         method: 'POST',
     61         data: {
     62           image: this.data.base64,
     63           image_type: 'BASE64',
     64           group_id: '********',//自己建的用户组id
     65           user_id: this.data.nickName//这里获取用户昵称
     66         },
     67         header: {
     68           'Content-Type': 'application/json' // 默认值
     69         },
     70         success(res) {
     71           that.setData({
     72             msg: res.data.error_msg
     73           })
     74           console.log(that.data.msg)
     75           //做成功判断
     76           if (that.data.msg == 'SUCCESS') {//微信js字符串请使用单引号
     77             wx.showToast({
     78               title: '注册成功',
     79               icon: 'success',
     80               duration: 2000
     81             })
     82             wx.switchTab({
     83               url: '../UI/ui',
     84             })
     85 
     86           }
     87 
     88         }
     89       }),
     90       
     91       //失败尝试
     92       wx.showToast({
     93         title: '请重试',
     94         icon: 'loading',
     95         duration: 500
     96       })
     97   },
     98   error(e) {
     99     console.log(e.detail)
    100   },
    101 
    102 //获取用户信息
    103   bindGetUserInfo: function(e){
    104     this.setData({
    105       nickName: e.detail.userInfo.nickName
    106     })
    107     wx.showToast({
    108       title: '授权成功',
    109       icon: 'success',
    110       duration: 1000
    111     })
    112   },
    113 
    114 //先授权登陆,再拍照注册
    115   btnreg:function(){
    116     wx.showModal({
    117       title: '注册须知',
    118       content: '先授权登陆,再拍照注册哦!网络可能故障,如果不成功,请再试一下!',
    119     })
    120   }
    121 
    122 })

    这里要多试几次,我以为可能由于网络的问题,会调用失败, 但其实是wx.request()是并发的,所以获取access_token和上传请求会冲突(可能没有获取到access_token就上传,会发生错误)。

    注意:还问题还未解决,如果你有好的想法或者解决办法,请务必留言或评论。

    目前我的改动是:

    • 在Page的data中声明一个flag,初始值置为false;在获取access_token的request返回succes中将flag 置为true;
    • 然后,在下面那个上传图片的request函数体外包一层if(false == true),这样就会解决你当前遇到的问题。即:只有在上一个request执行成功才去进行下一个request。 
    • 但是,会导致新的问题,Cannot read property 'user_list' of null;at api request success callback function这个似乎是后台返回数据的问题,还未解决,但是网上有人遇到相似的问题,可以参考解决。

    另外,要开启微信小程序 IDE 的 不校验合法域名的选项(设置->项目设置 -> 勾选 不校验......)

    至此,注册 就完成了(即获取用户昵称、拍照、上传人脸库注册。)



    2.拍照上传在线人脸识别---登陆

    找到指定用户组中与上传照片最相似的人脸并返回,比对结果。

    我们仍然需要再建立一个页面来承载我们的登陆相关操作。就假定为 camera2{camera2.js camera2.wxml camera2.wxss camera2.json}

    camera2.wxml

     

     1 <!-- camera.wxml -->
     2 <camera
     3   device-position="front"
     4   flash="off"
     5   binderror="error"
     6   style="width: 100%; height: 300px;"
     7 ></camera>
     8 <button type="primary" bindtap="takePhoto">拍照</button>
     9 <view>预览</view>
    10 <image mode="widthFix" src="{{src}}"></image>

    camera2.js 与注册大同小异,区别是图片上传的接口不同(这次是 https://aip.baidubce.com/rest/2.0/face/v3/search 人脸搜素),获取access_token、拍照、照片base64编码都相同。

     

     1 // camera.js
     2 Page({
     3   data: {
     4     base64: "",
     5     token: "",
     6     msg: null
     7   },
     8   //拍照并编码
     9   takePhoto() {
    10     //拍照
    11     const ctx = wx.createCameraContext()
    12     ctx.takePhoto({
    13       quality: 'high',
    14       success: (res) => {
    15         this.setData({
    16           src: res.tempImagePath
    17         })
    18       }
    19     })
    20 
    21     var that = this;
    22     //图片base64编码
    23     wx.getFileSystemManager().readFile({
    24       filePath: this.data.src, //选择图片返回的相对路径
    25       encoding: 'base64', //编码格式
    26       success: res => { //成功的回调
    27         that.setData({
    28           base64: res.data
    29         })
    30       }
    31     })
    32 
    33     //acess_token获取
    34     wx.request({
    35       url: 'https://aip.baidubce.com/oauth/2.0/token', //真实的接口地址
    36       data: {
    37         grant_type: 'client_credentials',
    38         client_id: '**************************',
    39         client_secret: '*******************************'//用自己的
    40       },
    41       header: {
    42         'Content-Type': 'application/json' // 默认值
    43       },
    44       success(res) {
    45         that.setData({
    46           token: res.data.access_token//获取到token
    47         })
    48       }
    49     })
    50 
    51     //上传人脸进行 比对
    52     wx.request({
    53       url: 'https://aip.baidubce.com/rest/2.0/face/v3/search?access_token=' + that.data.token,
    54       method: 'POST',
    55       data: {
    56         image: this.data.base64,
    57         image_type: 'BASE64',
    58         group_id_list: '********'//自己建的用户组id
    59       },
    60       header: {
    61         'Content-Type': 'application/json' // 默认值
    62       },
    63       success(res) {
    64         that.setData({
    65           msg: res.data.result.user_list[0].score
    66         })
    67         if(that.data.msg > 80){
    68           wx.showToast({
    69             title: '验证通过',
    70             icon: 'success',
    71             duration: 1000
    72           })
    73           //验证通过,跳转至UI页面
    74           wx.switchTab({
    75             url: '../UI/ui',
    76           })
    77         }
    78       }
    79     });
    80 
    81     wx.showToast({
    82       title: '请重试',
    83       icon: 'loading',
    84       duration: 500
    85     })
    86   },
    87   error(e) {
    88     console.log(e.detail)
    89   }
    90 })

     至此,我们的登陆也搞定了。


    注意:上述的 登陆注册 是一个某个小程序的一个模块。关系如下

    所以,需要在index页面中设置按钮,来跳转到注册以及登陆页面,然后注册登陆成功后,再跳转至其他功能页面。

    后记

    这次小程序实战,对我自己也是一个不小的挑战,对比各个云接口、看接口文档、查资料,耗费了大概十来天。但是,我相信大有裨益。另外,对我参考的博客和回答的诸位表示感谢。我们一起前进!

    参考资料

    【1】微信小程序开发文档

    【2】百度云接口文档.v3版

     

    展开全文
  • 微信小程序拍照的实现主要用到的组件就是 camera,这个组件主要就的调用手机的摄像头进行拍照,小程序拍照后上传到后台,后台通过算法识别垃圾的分类情况。这样就很方便的处理了我们平常不熟悉的垃圾分类,非常实用...

    垃圾分类小程序拍照识别垃圾分类微信小程序开发源码
    前面我们写过垃圾分类的文字查询垃圾分类,这里我们写下拍照识别垃圾分类的实现代码。
    微信小程序拍照的实现主要用到的组件就是 camera,这个组件主要就的调用手机的摄像头进行拍照,小程序拍照后上传到后台,后台通过算法识别垃圾的分类情况。这样就很方便的处理了我们平常不熟悉的垃圾分类,非常实用。

    <!--pages/laji/laji.wxml-->
    
    <!--遮罩层-->
    <view class='show-box'>
    <view wx:if="{{!src}}" class='show-img-box'>
    <view class='camera-box'><camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 100%;"></camera></view>
    </view>
    
    <view wx:if="{{src}}" class='show-img-box'>
    <image src="{{src}}"></image>
    <!--show-items-list-->
    <view class='show-items-list'>
    
    <block wx:for="{{itemdata}}" wx:for-index="idx" wx:for-item="item">
    <view class='itemcss  itemcss{{item.typeid}}'>
    <view class='itemcss-title'>{{item.typename}}</view>
    <view class='itemcss-name'>{{item.keyword}}</view>
    </view>
    </block>
    
    </view>
    <!--end show-items-list-->
    </view>
    <!---->
    <view class='show-items-box'>
    <!--相机按钮-->
    <!--<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相机按钮-->
    
    
    </view>
    <!---->
    </view>
    <!--end-->
    

    在这里插入图片描述

    展开全文
  • 然后我们在后台写刷脸登陆的接口login我们要把拍照获取的照片存储到服务器 public function login(){ // 上传文件路径 $dir = "./Uploads/temp/"; if(!file_exists($dir)){ mkdir($dir,0777,true); } $upload...
  • 图像识别对接百度OCR,具备免费识别限制配置以及会员充值功能,能够达到清晰的图像识别效果,能够通过拍照读取、微信好友选择图片读取、同时可以对图片进行剪切等操作。 小程序源码在small_app中
  • 我们经营要文字识别微信小程序现在也可以识别文字啦,微信小程序识别文字如何识别微信小程序比APP方便,可以节省手机内存空间,随用随走等特点。 1、在微信发现中找到小程序,点击进入。 2、在这里搜素,...
  • OCR 支持
  • Insight 微信图像识别小程序 扫码体验 </center> # 一、产品概况 ## 1. 介绍与需求 ### 1.1 产品简介 识相 Insight 是一款免费的 **快速识别图像,获取相关知识,提升生活信息认知** 的小程序。...
  • 前面我们讲了微信小程序开发教程前八章,现在更新完结篇:微信小程序拍照收纳开发以及删除名片等。(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信...
  • 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=...
  • 首先在微信小程序拍照会使用到camera组件,该组件需要用户授权,拒绝授权的情况以后可能会补充,目前展示仅仅为允许授权的情况。 组件中设置的值根据需求查看官网进行修改,官网地址:微信小程序camera组件 page....
  • 微信小程序——图片识别

    千次阅读 多人点赞 2020-01-03 13:55:11
    我的微信小程序 期末大作业——基于百度大脑API的图片识别小程序 具体实现了动物识别、植物识别、车辆识别 三个功能 实验源码已经放到了我的GitHub,欢迎测试修改 下面给大家分享该项目的实验报告???? 目录1 概述...
  • 微信小程序,图像识别源码

    万次阅读 热门讨论 2019-09-10 14:42:59
    基于近期的工作内容关系,在查询一些资料的同时,在微信小程序端集成了图像识别功能。基于成本的关系,在阿里,百度,腾讯等对比之后直接选择了免费的百度Ai开放平台,根据下方的价格目前测试够用。 百度端配置...
  • 微信小程序扫描二维码识别商品的简单项目 可用作基本框架
  • 微信小程序实现智能识别名片

    千次阅读 2020-04-17 15:30:11
    文章目录1、背景2、腾讯开放平台名片OCR接口2.1 文档参考2.2 小程序OCR功能主要JS代码实现3、微信小程序名片OCR功能接入3.1 微信小程序首页设计3.2 扫名片功能实现3.2.1 识别页面3.2.2 识别程序4 名片识别验证4.1 ...
  • 微信小程序人脸识别的实现

    千次阅读 2018-05-29 08:09:03
    通过远程预览来进行拍照,在后台进行操作 public function login(){ $dir="./Uploads/temp/"; if(!file_exists($dir)){ mkdir($dir,0777,true); } $upload = new \Think\Upload();// 实例化上传类 ...
  • -- 拍照识别 --> <uni-popup ref="photograph" type="center" :animation="false"> <view class="popup-content photographCenter" :style="'height: '+scrollheights+'px;box-sizing: border-...
  • 先看下效果 不多说废话,直接上代码 <view> <button type="primary" bindtap="chooseImage">选择图片</button> </view> chooseImage(){ wx.chooseImage({ ... success :(res)
  • php微信小程序人脸识别刷脸登录

    千次阅读 2018-05-24 11:17:54
    首先我们先确认我们的百度云人脸库里已经上传了我们的个人信息照片然后我们在后台写刷脸登陆的接口login我们要把拍照获取的照片存储到服务器public function login(){ // 上传文件路径 $dir = "./Uploads/...
  • 结束了五一国庆的八天假期后,便开始着手为微信小程序《代码协作》制作一个图片识别代码的功能。这个需求的主要来源是,在有的公司、组织、团队上,代码是不能直接拷贝出来的。但是,拍照是允许的。为了协作方便,...
  • 垃圾分类小程序,微信小程序开发,扫一扫识别垃圾分类,拍照识别垃圾分类小程序 今天我们来说下这个垃圾分类小程序的开发代码源码的实现。 微信小程序的开发熟悉的朋友都不陌生,开发工具那些这里就不讲了,主要就讲...
  • 涉及到的核心技术是微信小程序开发方法和百度云人脸识别接口。小程序的主体是一个用于个人密码存储的密码管理器,在登陆注册阶段,需要调用百度云人脸识别接口以及百度云在线人脸库的管理接口。本文主要涉及登陆注册...
  • 上一篇文章我们写了 垃圾分类小程序的文字查询分类垃圾分类微信小程序开发源码,垃圾分类查询工具,垃圾怎么分类拍照识别垃圾分类(一) 接下来我们来说下 垃圾分类拍照识别的功能实现代码 作者QQ:1379174464 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,057
精华内容 1,222
关键字:

微信小程序拍照识别

微信小程序 订阅