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


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焦点的方法小结
Oct 08 Javascript
JS 的应用开发初探(mootools)
Dec 19 Javascript
JavaScript格式化数字的函数代码
Nov 30 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 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树的代码,可以嵌套任意层
2006/10/09 PHP
php 什么是PEAR?
2009/03/19 PHP
php 带逗号千位符数字的处理方法
2012/01/10 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
Angular2库初探
2017/03/01 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
python中if嵌套命令实例讲解
2021/02/25 Python
python3判断IP地址的方法
2021/03/04 Python
幼儿园教师备课制度
2014/01/12 职场文书
政风行风评议工作总结
2014/10/21 职场文书
财务整改报告范文
2014/11/05 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
观后感的写法
2015/06/19 职场文书
文书工作总结(范文)
2019/07/11 职场文书
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python
A22国内电台短波广播频率表
2022/05/10 无线电
SQL Server删除表中的重复数据
2022/05/25 SQL Server