扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >uniapp实现人脸识别功能的具体实现代码
  • 406

0
分享到

uniapp实现人脸识别功能的具体实现代码

uniapp 人脸识别uniapp小程序人脸识别uniapp人脸识别功能 2022-12-08 20:12:37 406人浏览 薄情痞子
摘要

目录前言问题解决办法详细实现思路具体代码总结前言 对于前端来说，需要后端提供一个人脸识别接口，前端传入图片，接口识别并返回结果，如此看来，其实前端只需实现图片传入即可，但是其实不然，

前言

对于前端来说，需要后端提供一个人脸识别接口，前端传入图片，接口识别并返回结果，如此看来，其实前端只需实现图片传入即可，但是其实不然，在传入图片时，需要进行以下几点操作：

  • 判断图片格式，市场上比较常见的是.jpg、.jpeg、.png
  • 计算文件大小，一般要求不超过5MB
  • 对图片进行base64加密

其实前2点具体要看接口要求，但是第3点，是实现人脸识别必备步骤，下文重点讲述一下移动端实现人脸识别的base64加密方法

问题

项目主要使用的技术栈是uniapp，uniapp的优点是上手快，基于Vue开发，但缺点也很明显，多环境兼容导致兼容性较差，真机调试和运行较慢。比如h5端可以轻松实现base64加密，但是安卓环境完全不行，因为本地上传图片时，会返回一个blob流，但是uniapp的blob流是以<Http://localhost>…（安卓环境无法识别localhost）开始，导致无法进行base64加密

解决办法

经过多方实现后，借用HTML5+ api的多个结合方法（plus.zip.compressImage、plus.io.resolveLocalFileSystemURL、plus.io.FileReader）实现加密，主要代码如下：

//app压缩图片  用for循环 来处理图片压缩 的问题，原因是 plus.zip.compressImage 方法 是异步执行的，for循环很快， 同时手机可执行的压缩方法有限制：应该是3个吧。超出直接就不执行了。所以 原理就是 在图片压缩成功后 继续 回调 压缩函数。 以到达循环压缩图片的功能。
app_img(num, rem) {
  let that = this;
  let index = rem.tempFiles[num].path.lastIndexOf('.'); //获取图片地址最后一个点的位置
  let img_type = rem.tempFiles[num].path.substring(index + 1, rem.tempFiles[num].path.length); //截取图片类型如png jpg
  let img_yuanshi = rem.tempFiles[num].path.substring(0, index); //截取图片原始路径
  let d2 = new Date().getTime(); //时间戳
  //压缩图片
  plus.zip.compressImage(
    {
      src: rem.tempFiles[num].path, //你要压缩的图片地址
      dst: img_yuanshi + d2 + '.' + img_type, //压缩之后的图片地址(注意压缩之后的路径最好和原生路径的位置一样，不然真机上报code-5)
      quality: 70 //[10-100]
    },
    function (e) {
      //压缩之后路径转base64位的
      //通过URL参数获取目录对象或文件对象
      plus.io.resolveLocalFileSystemURL(e.target, function (entry) {
        // 可通过entry对象操作test.html文件
        entry.file(function (file) {
          //获取文件数据对象
          var fileReader = new plus.io.FileReader(); // 文件系统中的读取文件对象，用于获取文件的内容
          //alert("getFile:" + JSON.stringify(file));
          fileReader.readAsDataURL(file); //以URL编码格式读取文件数据内容
          fileReader.onloadend = function (evt) {
            //读取文件成功完成的回调函数
            that.base64Img = evt.target.result.split(',')[1]; //拿到‘data:image/jpeg;base64,‘后面的
            console.log('that.base64Img', that.base64Img);
            // rem.tempFiles[num].Base64_Path = evt.target.result.split(',')[1];
          };
        });
      });
      // that.base64Img = that.base64Img.concat(rem.tempFiles[num]);
      // 【注意】在此人脸认证中,只会传一张图片,故不考虑多张图片情况
      //利用递归循环来实现多张图片压缩
      // if (num == rem.tempFiles.length - 1) {
      // 	return;
      // } else {
      // 	that.app_img(num + 1, rem);
      // }
    },
    function (error) {
      console.log('Compress error!');
      console.log(jsON.stringify(error));
      uni.showToast({
        title: '编码失败' + error
      });
    }
  );
},

详细实现思路

其实对于uniapp实现人脸识别功能来讲，大概要经过这么几个步骤

  • onImage()：打开手机相册上传图片，获取blob流（本地临时地址）
  • #ifdef APP-PLUS/#ifndef APP-PLUS：判断系统环境，是h5还是安卓环境，然后在进行图片压缩和加密，具体实现代码如下：
//#ifdef APP-PLUS
//图片压缩
that.app_img(0, res);
//#endif

// #ifndef APP-PLUS
that.blobTobase64(res.tempFilePaths[0]);
// #endif
  • app_img()/blobTobase64()：对要识别的图片进行base64加密
  • onSave()—>upImage()：附件上传，并处理识别信息

具体代码

<!-- 人脸认证 -->
<template>
	<view>
		<view class="u-margin-30 text-center"><u-avatar size="600" :src="imageSrc"></u-avatar></view>
		<view class="u-margin-60">
			<u-button type="primary" class="u-margin-top-60" @click="onImage">{{ !imageSrc ? '拍照' : '重拍' }}</u-button>
			<!-- <u-button type="primary" class="u-margin-top-30">重拍</u-button> -->
			<u-button type="primary" class="u-margin-top-50" @click="onSave">保存</u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { reGISterOrUpdateFaceInfo, UpdateLaborPersonnel } from '@/api/mww/labor.js';
import { UploadByProject } from '@/api/sys/upload.js';
import { sysConfig } from '@/config/config.js';
import storage from 'store';
import { ACCESS_TOKEN } from '@/store/mutation-types';
export default {
	name: 'face-authentication',
	data() {
		return {
			imageSrc: '',
			lastData: {},
			base64Img: '',
			base64: ''
		};
	},
	onLoad(option) {
		this.lastData = JSON.parse(decodeURIComponent(option.lastData));
		console.log('前一个页面数据', this.lastData);
		uni.setNavigationBarTitle({
			title: this.lastData.CnName + '-人脸认证 '
		});
	},
	methods: {
		onSave() {
			if (!this.imageSrc) {
				this.$refs.uToast.show({
					title: '请先拍照',
					type: 'error'
				});
			}
			// 人脸上传,附件上传,劳务人员信息修改
			this.upImage();
		},
		// h5压缩图片的方式，url为图片流
		blobTobase64(url) {
			console.log('进来了2', url);
			let imgFile = url;
			let _this = this;
			uni.request({
				url: url,
				method: 'GET',
				responseType: 'arraybuffer',
				success: res => {
					let base64 = uni.arrayBufferToBase64(res.data); //把arraybuffer转成base64
					_this.base64Img = 'data:image/jpeg;base64,' + base64; //不加上这串字符，在页面无法显示
				}
			});
		},
		//app压缩图片  用for循环 来处理图片压缩 的问题，原因是 plus.zip.compressImage 方法 是异步执行的，for循环很快， 同时手机可执行的压缩方法有限制：应该是3个吧。超出直接就不执行了。所以 原理就是 在图片压缩成功后 继续 回调 压缩函数。 以到达循环压缩图片的功能。
		app_img(num, rem) {
			let that = this;
			let index = rem.tempFiles[num].path.lastIndexOf('.'); //获取图片地址最后一个点的位置
			let img_type = rem.tempFiles[num].path.substring(index + 1, rem.tempFiles[num].path.length); //截取图片类型如png jpg
			let img_yuanshi = rem.tempFiles[num].path.substring(0, index); //截取图片原始路径
			let d2 = new Date().getTime(); //时间戳
			//压缩图片
			plus.zip.compressImage(
				{
					src: rem.tempFiles[num].path, //你要压缩的图片地址
					dst: img_yuanshi + d2 + '.' + img_type, //压缩之后的图片地址(注意压缩之后的路径最好和原生路径的位置一样，不然真机上报code-5)
					quality: 70 //[10-100]
				},
				function(e) {
					//压缩之后路径转base64位的
					//通过URL参数获取目录对象或文件对象
					plus.io.resolveLocalFileSystemURL(e.target, function(entry) {
						// 可通过entry对象操作test.html文件
						entry.file(function(file) {
							//获取文件数据对象
							var fileReader = new plus.io.FileReader(); // 文件系统中的读取文件对象，用于获取文件的内容
							//alert("getFile:" + JSON.stringify(file));
							fileReader.readAsDataURL(file); //以URL编码格式读取文件数据内容
							fileReader.onloadend = function(evt) {
								//读取文件成功完成的回调函数
								that.base64Img = evt.target.result.split(',')[1]; //拿到‘data:image/jpeg;base64,‘后面的
								console.log('that.base64Img', that.base64Img);
								// rem.tempFiles[num].Base64_Path = evt.target.result.split(',')[1];
							};
						});
					});
					// that.base64Img = that.base64Img.concat(rem.tempFiles[num]);
					// 【注意】在此人脸认证中,只会传一张图片,故不考虑多张图片情况
					//利用递归循环来实现多张图片压缩
					// if (num == rem.tempFiles.length - 1) {
					// 	return;
					// } else {
					// 	that.app_img(num + 1, rem);
					// }
				},
				function(error) {
					console.log('Compress error!');
					console.log(JSON.stringify(error));
					uni.showToast({
						title: '编码失败' + error
					});
				}
			);
		},
		// 打开手机相机相册功能
		onImage() {
			const that = this;
			// 安卓系统无法默认打开前置摄像头,具体请看下面app-plus原因,
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['camera'], // 打开摄像头-'camera'，从相册选择-'album'
				success: function(res) {
					console.log('文件结果', res);
					if (res.tempFilePaths.length > 0) {
						// Blob流地址
						that.imageSrc = res.tempFilePaths[0];
						//#ifdef APP-PLUS
						//图片压缩
						that.app_img(0, res);
						//#endif
						// #ifndef APP-PLUS
						that.blobTobase64(res.tempFilePaths[0]);
						// #endif
					} else {
						that.$refs.uToast.show({
							title: '无文件信息',
							type: 'error'
						});
					}
				},
				fail: function(res) {
					console.log('失败了', res.errMsg);
					that.$refs.uToast.show({
						title: res.errMsg,
						type: 'error'
					});
				}
			});
			// #ifdef APP-PLUS
			// console.log('app环境了');
			// 指定要获取摄像头的索引值，1表示主摄像头，2表示辅摄像头。如果没有设置则使用系统默认主摄像头。
			// 平台支持【注意注意注意】
			// Android - 2.2+ (不支持) :
			// 暂不支持设置默认使用的摄像头，忽略此属性值。打开拍摄界面后可操作切换。
			// iOS - 4.3+ (支持)
			// var cmr = plus.camera.getCamera(1);
			// var res = cmr.supportedImageResolutions[0];
			// var fmt = cmr.supportedImageFORMats[0];
			// console.log('Resolution: ' + res + ', Format: ' + fmt);
			// cmr.captureImage(
			// 	function(path) {
			// 		alert('Capture image success: ' + path);
			// 	},
			// 	function(error) {
			// 		alert('Capture image failed: ' + error.message);
			// 	},
			// 	{ resolution: res, format: fmt }
			// );
			// #endif
		},
		// 上传附件至[人脸认证]服务器
		upImage() {
			if (!this.base64Img) {
				this.$refs.uToast.show({
					title: '无图片信息',
					type: 'error'
				});
				return;
			}
			const params = {
				identityId: this.lastData.IdCard, //身份证号码
				imgInfo: this.base64Img, //头像采用base64编码
				userId: this.lastData.Id, //劳务人员Id
				userName: this.lastData.CnName //劳务姓名
			};
			uni.showLoading();
			registerOrUpdateFaceInfo(params)
				.then(res => {
					if (res.success) {
						this.$refs.uToast.show({
							title: '认证成功',
							type: 'success'
						});
						// 上传至附件服务器+修改劳务人员信息
						this.uploadFile();
					} else {
						this.$refs.uToast.show({
							title: '认证失败,' + res.message,
							type: 'error'
						});
						uni.hideLoading();
					}
				})
				.catch(err => {
					uni.hideLoading();
					uni.showModal({
						title: '提示',
						content: err
					});
				});
		},
		// 上传附件至附件服务器
		uploadFile() {
			const obj = {
				project: this.lastData.OrGCode || this.$store.getters.projectCode.value,
				module: 'mww.personnelCertification',
				segment: this.lastData.OrgCode,
				businessID: this.lastData.Id,
				storageType: 1
			};
			let str = `project=${obj.project}&module=${obj.module}&segment=${obj.segment}&businessID=${obj.businessID}&storageType=${obj.storageType}`;
			console.log('str', str);
			// const url = '';
			// console.log('url', url);
			// const formData = new FormData();
			// formData.append('file', this.imageSrc, '.png');
			// UploadByProject(str, formData).then(res => {
			// 	if (res.success) {
			// 		this.$refs.uToast.show({
			// 			title: '上传成功',
			// 			type: 'success'
			// 		});
			// 	} else {
			// 		this.$refs.uToast.show({
			// 			title: res.message,
			// 			type: 'error'
			// 		});
			// 	}
			// });
			const token = uni.getStorageSync(ACCESS_TOKEN);
			const that = this;
			// 需要使用uniapp提供的api,因为that.imageSrc的blob流为地址头为localhost(本地临时文件)
			uni.uploadFile({
				url: `${sysConfig().fileServer}/UploadFile/UploadByProject?${str}`,
				filePath: that.imageSrc,
				formData: {
					...obj
				},
				header: {
					// 必须传token,不然会报[系统标识不能为空]
					authorization: `Bearer ${token}`
				},
				name: 'file',
				success: res => {
					that.$refs.uToast.show({
						title: '上传成功',
						type: 'success'
					});
					that.lastData.CertificationUrl = res.data[0].virtualPath;
					that.lastData.Certification = 1;
					that.updateLaborPersonnel();
				},
				fail: err => {
					console.log('上传失败了', err);
					that.$refs.uToast.show({
						title: '上传失败,' + err,
						type: 'error'
					});
					uni.hideLoading();
				}
			});
		},
		// 修改劳务人员信息
		updateLaborPersonnel() {
			UpdateLaborPersonnel(this.lastData)
				.then(res => {
					if (res.success) {
						this.$refs.uToast.show({
							title: '修改成功',
							type: 'success'
						});
						// uni.showToast({
						// 	title: '成功了'
						// });
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 800);
					} else {
						this.$refs.uToast.show({
							title: '修改失败,' + res.message,
							type: 'error'
						});
					}
				})
				.finally(() => {
					uni.hideLoading();
				});
		}
	}
};
</script>

<style scoped lang="less"></style>

总结

到此这篇关于uniapp实现人脸识别功能的文章就介绍到这了,更多相关uniapp人脸识别功能内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: uniapp实现人脸识别功能的具体实现代码

本文链接: https://lsjlt.com/news/174276.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • uniapp实现人脸识别功能的具体实现代码
    目录前言问题解决办法详细实现思路具体代码总结前言 对于前端来说，需要后端提供一个人脸识别接口，前端传入图片，接口识别并返回结果，如此看来，其实前端只需实现图片传入即可，但是其实不然，...
    99+
    2022-12-08
    uniapp 人脸识别 uniapp小程序人脸识别 uniapp人脸识别功能
  • uniapp app人脸识别功能怎么实现
    这篇文章主要介绍“uniapp app人脸识别功能怎么实现”，在日常操作中，相信很多人在uniapp app人脸识别功能怎么实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”uniapp&...
    99+
    2023-06-30
  • uniapp实现人脸识别功能详细示例
    微信小程序实现人脸识别，具体应用场景   前端实现人脸信息采集  拍到正面照片  发送给后端 该方法暂时只针对微信小程序 前端具体效果展示 如...
    99+
    2022-11-13
    uniapp人脸识别功能 uniapp 人脸识别 uniapp 人脸识别 小程序
  • Python 40行代码实现人脸识别功能
    前言 很多人都认为人脸识别是一项非常难以实现的工作，看到名字就害怕，然后心怀忐忑到网上一搜，看到网上N页的教程立马就放弃了。这些人里包括曾经的我自己。其实如果如果你不是非要深究其中的原理，只是要实现这一工作...
    99+
    2022-06-04
    代码 功能 Python
  • python实现人脸识别代码
    从实时视频流中识别出人脸区域，从原理上看，其依然属于机器学习的领域之一，本质上与谷歌利用深度学习识别出猫没有什么区别。程序通过大量的人脸图片数据进行训练，利用数学算法建立建立可靠的人脸特征模型，如此即可识别...
    99+
    2022-06-04
    代码 python
  • java+opencv实现人脸识别功能
    背景：最近需要用到人脸识别，但又不花钱使用现有的第三方人脸识别接口，为此使用opencv结合java进行人脸识别（ps:opencv是开源的，使用它来做人脸识别存在一定的误差，效果一...
    99+
    2024-04-02
  • uniapp app 人脸识别的实现示例
    由于 小程序端 有camera组件 直接就可以调起摄像头 但是 app端是不支持这个标签的 所以只能用其他的方法 使用 nvue 中 live-pusher 组件 子组件&...
    99+
    2024-04-02
  • uniapp 安卓使用live-pusher实现人脸识别（拍照）功能
    1.nvue页面使用 nvue页面可以直接使用live-pusher组件。 由于live-pusher是矩形的，一般人脸识别使用圆形，所以添加cover-image可覆盖在live-pusher上层，...
    99+
    2023-10-04
    uni-app android javascript vue.js
  • java+opencv如何实现人脸识别功能
    这篇文章主要介绍了java+opencv如何实现人脸识别功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。Java的特点有哪些Java的特点有哪些1.Java语言作为静态面向...
    99+
    2023-06-15
  • Android基于opencv4.6.0实现人脸识别功能
    前言 步骤： 整合opencv 获取相机的SurfaceView传到native层去检测(亦或是不断的获取SurfaceView的Bitmap，传到native层) 检测人脸，在本地保存人脸特征信息 4.上传至后台(不实现) 人脸识别实现的...
    99+
    2023-09-30
    android android studio opencv
  • 人脸识别实战之Opencv+SVM实现人脸识别
    目录前言项目结构编码训练人脸识别模型识别图像中的人脸摄像头识别人脸前言 在本文中，您将学习如何使用 OpenCV 进行人脸识别。文章分三部分介绍： 第一，将首先执行人脸检测，使用深度...
    99+
    2024-04-02
  • 怎么用Python代码实现人脸识别
    这篇文章主要介绍“怎么用Python代码实现人脸识别”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么用Python代码实现人脸识别”文章能帮助大家解决问题。正文：环境要求：Ubuntu17.10P...
    99+
    2023-06-29
  • OpenCV实现人脸识别
    主要有以下步骤： 1、人脸检测 2、人脸预处理 3、从收集的人脸训练机器学习算法 4、人脸识别 5、收尾工作 人脸检测算法： 基于Haar的脸部检测器的基本思想是，对于面部正面大部分区域而言，会有眼睛所在区...
    99+
    2022-06-04
    OpenCV
  • Python实现人脸识别
    使用到的库： dlib+Opencv python版本： 3.8 编译环境： Jupyter Notebook (Anaconda3) 0.Dlib人脸特征检测原理 提取特征点：首选...
    99+
    2024-04-02
  • 如何基于SpringBoot实现人脸识别功能
    目录前言需求分析一、人脸注册二、人脸登录具体实现一、人脸注册二、刷脸登录总结前言 去年在公司参与了一个某某机场建设智能机场的一个项目，人脸登机是其中的一个功能模块，当时只是写了后台的...
    99+
    2024-04-02
  • java人脸识别考勤功能怎么实现
    Java人脸识别考勤功能的实现需要以下步骤：1.采集人脸数据：使用摄像头或者照片采集人脸数据，保存到数据库中。2.预处理人脸数据：对...
    99+
    2023-05-30
    java人脸识别 java
  • 基于Python的人脸识别功能怎么实现
    这篇文章主要介绍“基于Python的人脸识别功能怎么实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“基于Python的人脸识别功能怎么实现”文章能帮助大家解决问题。一、 人脸检测人脸检测是指从图像...
    99+
    2023-07-05
  • 人脸识别4：Android InsightFace实现人脸识别Face Recognition(含源码)
    人脸识别4：Android InsightFace实现人脸识别Face Recognition(含源码) 目录 人脸识别4：Android InsightFace实现人脸识别Face Recognition(含源码) 1. 前言 2. 项目...
    99+
    2023-08-31
    android 人脸识别 人脸检测 android人脸识别
  • Python几行代码即可实现人脸识别
    摘要:一行代码实现人脸识别 首先你需要提供一个文件夹，里面是所有你希望系统认识的人的图片。其中每个人一张图片，图片以人的名字命名。 接下来，你需要准备另一个文件夹，...
    99+
    2024-04-02
  • 使用Python实现简单的人脸识别功能(附源码）
    目录前言一、首先二、接下来1.对照人脸获取2. 通过算法建立对照模型3.识别前言 今天，我们用Python实现简单的人脸识别技术！ Python里，简单的人脸识别有很多种方法可以实现...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作