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


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的面向对象方法以及差别
Mar 31 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
Vue2.0 实现移动端图片上传功能
May 30 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 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文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
img标签中onerror用法
2009/08/13 Javascript
javascript onmouseout 解决办法
2010/07/17 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
解析js如何获取css样式
2016/12/11 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
Python3中bytes类型转换为str类型
2018/09/27 Python
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
python处理“
2019/06/10 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
Python Django 命名空间模式的实现
2019/08/09 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
python 实现两个npy档案合并
2020/07/01 Python
python xlsxwriter模块的使用
2020/12/24 Python
英语教学随笔感言
2014/02/20 职场文书
创业大赛策划书
2014/03/01 职场文书
《秋游》教学反思
2014/04/24 职场文书
法制宣传日活动总结
2014/04/29 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
pandas数值排序的实现实例
2021/07/25 Python
MySQL中优化SQL语句的方法(show status、explain分析服务器状态信息)
2022/04/09 MySQL
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL