微信小程序人脸识别功能代码实例


Posted in Javascript onMay 07, 2019

前几天偶然看见一个人脸识别的小程序demo,觉得很有趣下载下来想玩玩,结果只是一个框架而已用不了的,花了点时间完善一下

吐槽一下wx.uploadFile这个接口,真是个大坑,最开始调用时候,我以为它和同期的wx.downloadFile一样,只需要填入必须的参数就可以用,结果还是要配合后台php的

首先,upload这个接口的url和request一样指的是php的路径,而不是download一样文件路径

其次,我在最开始一直没弄懂这个"name"到底应该填什么,上传功能不好用我一直觉得是"name"的原因,官方对于name给的解释很迷,这里我就给个结论,大家不要纠结这个属性,直接写file就好,图片属性是能用的

最后,人脸识别功能的功能本身是第三方提供的,比如我用的就是阿里云的人脸识别功能,不到一分钱一张图片充值一块钱就可以玩的很嗨

那么,上代码,我的代码基本就是网上的demo+自己修改

首先是wxml

<view class="container">
 <view class="userinfo">
  <image class="userinfo-avatar" mode="aspectFit" src="{{tempFilePaths}}" background-size="cover"></image>
  <text class="userinfo-tips">{{userInfo.tips}}</text>
 </view>
 <view class="usermotto">
 <button class="button" type="primary" bindtap="chooseimage">{{motto}}</button>
 </view>
</view>

然后js代码

var app = getApp()
Page({
 data: {
  motto: '上传靓照',
  userInfo: {},
  tempFilePaths: ''
 },
 chooseimage: function () {
  var that = this;
  wx.chooseImage({   //选择图片
   count: 1,
   sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
   sourceType: ['album', 'camera'], 
   success: function (res) {
    var tempFilePaths = res.tempFilePaths
    that.setData({
     tempFilePaths: tempFilePaths[0]
    })
    wx.uploadFile({   //上传图片
     url: '', //这里是你php的路径!!
     filePath: tempFilePaths[0],
     name: 'file',
     header: {
      'content-type': 'multipart/form-data'
     },
     success: function (res) {
      console.log("add success", res.data);
      that.uploadImage(res.data);
      wx.showToast({
       title: "图片上传成功",
       icon: 'success',
       duration: 700
      })
     }
    })
   }
  })
 },
 //事件处理函数
 uploadImage: function(picName) {
  var that = this
  wx.showToast({
   title: '鉴定中,请稍候',
   icon: 'loading',
   duration: 2000
})
   wx.request({
    url: '',        //这里是阿里云人脸识别功能php的路径
    data: {
     type: 0,
     image_url: picName,
    },
    header: {
     'Content-Type': 'application/json'
    },
   // filePath: tempFilePaths[0],
   name: 'file',
   success: function(res){
    console.log(res.data) 
    wx.hideToast()
    var data = res.data;
    var sex = data.gender;
    const genders = {
     'Male': '基佬',
     'Female': '小仙女'
    }  
    if(data.face_num == 0){
     that.setData({
      userInfo:{
      tips:'未检测到人脸'
      }
     })
     return
    } else {
     if (sex == 0) {
      that.setData({
       userInfo: {
        tips: data.face_num + '位' + data.age + '岁的' + genders.Female
       }
      })
     } else {
      that.setData({
       userInfo: {
        tips: data.face_num + '位' + data.age + '岁的' + genders.Male
       }
      })
     }
     return
    }  
   }
  })
  },
 onLoad: function () {
  console.log('onLoad');
 
 },
 onShareAppMessage: function () {
  
 }
})

最后上php

首先是阿里云人脸识别功能代码

<?php
$akId = "";
$akSecret = "";
$image_url = "";
//更新api信息
$url = "https://dtplus-cn-shanghai.data.aliyuncs.com/face/attribute";
$content = array(      
	'type' => 0,
	'image_url' => $image_url
);
$options = array(
  'http' => array(
    'header' => array(
      'accept'=> "application/json",
      'content-type'=> "application/json",
      'date'=> gmdate("D, d M Y H:i:s \G\M\T"),
      'authorization' => ''
    ),
    'method' => "POST", //可以是 GET, POST, DELETE, PUT
    'content' => json_encode($content)//如有数据,请用json_encode()进行编码
  )
);
$http = $options['http'];
$header = $http['header'];
$urlObj = parse_url($url);
if(empty($urlObj["query"]))
  $path = $urlObj["path"];
else
  $path = $urlObj["path"]."?".$urlObj["query"];
$body = $http['content'];
if(empty($body))
  $bodymd5 = $body;
else
  $bodymd5 = base64_encode(md5($body,true));
$stringToSign = $http['method']."\n".$header['accept']."\n".$bodymd5."\n".$header['content-type']."\n".$header['date']."\n".$path;
$signature = base64_encode(
  hash_hmac(
    "sha1",
    $stringToSign,
    $akSecret, true));
$authHeader = "Dataplus "."$akId".":"."$signature";
$options['http']['header']['authorization'] = $authHeader;
$options['http']['header'] = implode(
  array_map(
    function($key, $val){
      return $key.":".$val."\r\n";
    },
    array_keys($options['http']['header']),
    $options['http']['header']));
$context = stream_context_create($options);
$file = file_get_contents($url, false, $context );
echo($file);
?>

然后是后台图片上传服务器功能,这里的代码也是我参考大佬,然后自己修改的【侵删】

<?php
date_default_timezone_set("Asia/Suzhou"); //设置时区 
$code = $_FILES['file'];//获取小程序传来的图片 
if(is_uploaded_file($_FILES['file']['tmp_name'])) {  
  //把文件转存到你希望的目录(不要使用copy函数)  
  $uploaded_file=$_FILES['file']['tmp_name'];  
  $username = "image"; 
  //我们给每个用户动态的创建一个文件夹  
  $user_path=$_SERVER['DOCUMENT_ROOT']."/WeChatphp/".$username;  //  DOCUMENT_ROOT是你域名配置的根目录,后面的目录可自己调整
 
  //判断该用户文件夹是否已经有这个文件夹  
  if(!file_exists($user_path)) {  
    mkdir($user_path);  
  }  
  $file_true_name=$_FILES['file']['name'];  
	$move_to_file_1 = time().rand(1,1000)."-".date("Y-m-d").substr($file_true_name,strrpos($file_true_name,"."));
  $move_to_file=$user_path."/".$move_to_file_1;//strrops($file_true,".")查找“.”在字符串中最后一次出现的位置  
  if(move_uploaded_file($uploaded_file,iconv("utf-8","gb2312",$move_to_file))) {   
		echo $move_to_file_1;	
  } else {  
    echo "上传失败".date("Y-m-d H:i:sa");  
 
  }  
} else {  
  echo "上传失败".date("Y-m-d H:i:sa");  
}  
?>

人脸识别的功能就完成了,最后上效果图,帅气的我胡,打call

微信小程序人脸识别功能代码实例

以上所述是小编给大家介绍的微信小程序人脸识别功能详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript 遍历对象中的子对象
Jul 03 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
JQuery插件开发示例代码
Nov 06 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
JSONP基础知识详解
Mar 19 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
React 并发功能体验(前端的并发模式)
Jul 01 Javascript
iphone刘海屏页面适配方法
May 07 #Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 #Javascript
JavaScript实现随机点名器实例详解
May 07 #Javascript
vue父组件触发事件改变子组件的值的方法实例详解
May 07 #Javascript
微信小程序:数据存储、传值、取值详解
May 07 #Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 #Javascript
详解Vue前端生产环境发布配置实战篇
May 07 #Javascript
You might like
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
JS 文件传参及处理技巧分析
2010/05/13 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
原生js实现下拉选项卡
2019/11/27 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
python匿名函数用法实例分析
2019/08/03 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
初一学生期末评语
2014/04/24 职场文书
辞职信如何写
2015/02/27 职场文书
争先创优个人总结
2015/03/04 职场文书
公安机关起诉意见书
2015/05/20 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
一定要知道的 25 个 Vue 技巧
2021/11/02 Vue.js