uniapp中人脸识别图片并圈起人脸

在这里插入图片描述
效果如上,我用的是阿里云的人脸识别。首先,我们先封装一个阿里云的请求js文件

faceRecognition.js

import CryptoJS from 'crypto-js'//SignatureNonce随机数字
function signNRandom() {const Rand = Math.random()const mineId = Math.round(Rand * 100000000000000)return mineId;
};
//Timestamp
function getTimestamp() {let date = new Date();let YYYY = pad2(date.getUTCFullYear());let MM = pad2(date.getUTCMonth() + 1);let DD = pad2(date.getUTCDate());let HH = pad2(date.getUTCHours());let mm = pad2(date.getUTCMinutes());let ss = pad2(date.getUTCSeconds());return `${YYYY}-${MM}-${DD}T${HH}:${mm}:${ss}Z`;
}
//补位占位
function pad2(num) {if (num < 10) {return '0' + num;}return '' + num;
};
// 排序
function ksort(params) {let keys = Object.keys(params).sort();let newParams = {};keys.forEach((key) => {newParams[key] = params[key];});return newParams;
};
// HmacSHA1加密+base64
function createHmac(stringToSign, key) {const CrypStringToSign = CryptoJS.HmacSHA1(stringToSign, key);const base64 = CryptoJS.enc.Base64.stringify(CrypStringToSign);return base64;
};
//编码
function encode(str) {var result = encodeURIComponent(str);return result.replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').replace(/\)/g, '%29').replace(/\*/g, '%2A');
};
function sha1(stringToSign, key) {return createHmac(stringToSign, key);
};
function getSignature(signedParams, method, secret) {var stringToSign = `${method}&${encode('/')}&${encode(signedParams)}`;const key = secret + "&";return sha1(stringToSign, key);
};
//参数拼接 &
function objToParam(param) {if (Object.prototype.toString.call(param) !== '[object Object]') {return '';}let queryParam = '';for (let key in param) {if (param.hasOwnProperty(key)) {let value = param[key];queryParam += toQueryPair(key, value);}}return queryParam;
};
function toQueryPair(key, value) {if (typeof value == 'undefined') {return `&${key}=`;}return `&${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
};
function generateUrl(request, httpMethod, endpoint, accessKeySecret) {//参数中key排序const sortParams = ksort(request);//拼成参数const sortQueryStringTmp = objToParam(sortParams);const sortedQueryString = sortQueryStringTmp.substring(1);// 去除第一个多余的&符号//构造待签名的字符串const Signature = getSignature(sortedQueryString, httpMethod, accessKeySecret)//签名最后也要做特殊URL编码request["Signature"] = encodeURIComponent(Signature);//最终生成出合法请求的URLconst finalUrl = "https://" + endpoint + "/?Signature=" + encodeURIComponent(Signature) + sortQueryStringTmp;return finalUrl;
}const callRecognizeBankCard  =    function (ImageURL,callback) {const accessKeyId = '';const accessKeySecret = '';const endpoint = "facebody.cn-shanghai.aliyuncs.com";const Action = "DetectFace";// API_HTTP_METHOD推荐使用POSTconst API_HTTP_METHOD = "POST";const API_VERSION = "2019-12-30";const request_ = {};//系统参数request_["SignatureMethod"] = "HMAC-SHA1";request_["SignatureNonce"] = signNRandom();request_["AccessKeyId"] = accessKeyId;request_["SignatureVersion"] = "1.0";request_["Timestamp"] = getTimestamp();request_["Format"] = "JSON";request_["RegionId"] = "cn-shanghai";request_["Version"] = API_VERSION;request_["Action"] = Action; request_["ImageURL"] =  ImageURLcallApiRequest(request_, API_HTTP_METHOD, endpoint, accessKeySecret, callback);
}var http = {};
http.request = function (option, callback) {var url = option.url;var method = option.method;var data = option.data;var timeout = option.timeout || 0;//创建XMLhttpRequest对象var xhr = new XMLHttpRequest();// var xhr = new plus.net.XMLHttpRequest()// return(timeout > 0) && (xhr.timeout = timeout);//使用open方法设置和服务器的交互信息xhr.open(method, url, true);if (typeof data === 'object') {try {data = JSON.stringify(data);} catch (e) { }}//发送请求xhr.send(data);//如果请求完成,并响应完成,获取到响应数据xhr.onreadystatechange = function () {if (xhr.readyState == 4) {var result = xhr.responseText;try { result = JSON.parse(xhr.responseText); } catch (e) { }callback && callback(null, result);}}.bind(this);//延时处理xhr.ontimeout = function () {callback && callback('timeout');console.log('error', '连接超时');};
};
// post请求
http.post = function (option, callback) {option.method = 'post';option.contentType = 'application/json;charset=UTF-8'this.request(option, callback);
};// 封装请求方法
function httpRequest(url, data, method, callback) {uni.request({url: url,method: method,data: data,header: {'content-type': 'application/json'},success: function (res) {callback(null, res.data);},fail: function (err) {callback(err, null);}});
}//请求数据
const callApiRequest = (request_, API_HTTP_METHOD, endpoint, accessKeySecret, callback) => {const url = generateUrl(request_, API_HTTP_METHOD, endpoint, accessKeySecret);httpRequest(url, null, 'POST', function (err, result) {if (err) {console.error('Error:', err);callback(null);} else {console.log('Result:', result);callback(result);}});
}export default callRecognizeBankCard;

请求之后的响应参数都在文档里面有,https://help.aliyun.com/zh/viapi/developer-reference/api-i5236v?spm=a2c4g.11186623.0.i2

然后开始使用

<view class="re-upload" @click="uploadImage">上传图片</view><u-modal :show="identifyShow" title="" :showConfirmButton="false"><view class="slot-content" style="width: 100%;position: relative;display: flex;justify-content: center;background-color: #00112b;"><image class="ai-bg-top" src="" mode=""></image><view class="ai-image" style="width: 330px !important;height: 350px;margin-top: 200rpx;position: relative;"><view class="animation" v-show="scanShow"><view class="animation-list"></view></view><image :src="aiAvatar" mode="" style="width: 100% !important;height: 100%;"></image><view class="faceRectangles" v-for="(item, index) in avatarPostionList":key="index":style="handlefaceRectanglesStyle(item, index)"></view></view><image class="ai-bg-bottom" src="" mode=""></image></view></u-modal>import faceRecognition from '@/utils/faceRecognition.js'const identifyShow = ref(false)
const aiAvatar = ref('')
const scanShow = ref(false)
const studentForm = ref({ avatar: '' })
const avatarPostionList = ref([])const handlefaceRectanglesStyle = (item, index) => {return {'position': 'absolute','left': `${item[0]}px`,'top': `${item[1]}px`,'width': `${item[2]}px`,'height': `${item[3]}px`}
}const chunkArray = (array, chunkSize) =>  {const groupedArray = [];for (let i = 0; i < array.length; i += chunkSize) {groupedArray.push(array.slice(i, i + chunkSize));}return groupedArray;
}const handleClear = (boolean) => {avatarPostionList.value = []scanShow.value = booleanidentifyShow.value = boolean
}const handleFaceRecognition = (path) => {faceRecognition(path, avatar => {if(avatar.Code) {uni.showToast({title: avatar.Message,icon: 'none',duration: 5000})identifyShow.value = falsereturn;}if(avatar.Data.FaceCount !== 1) {const avatarList = chunkArray(avatar.Data.FaceRectangles, 4)avatarPostionList.value = avatarListscanShow.value  = falsesetTimeout(() => {uni.showModal({title: '提示',content: '当前照片可能存在多张人脸,是否继续上传?',success: res => {if(res.confirm) {studentForm.value.avatar = path}else {uni.showToast({title: '已取消上传',icon: 'none'})}identifyShow.value = false}})}, 1000)}else {avatarPostionList.value = [avatar.Data.FaceRectangles]setTimeout(() => {handleClear(false)studentForm.value.avatar = path}, 1000)}})
}const uploadImage = () => {uni.chooseImage({count: 1,success: (res) => {//uploadFile,封装的上传方法uploadFile(res.tempFilePaths[0], 'avatar', (path:string) => {// path为图片线上地址const newPath = `${path}?x-oss-process=image/resize,limit_0,m_fill,w_330,h_350/quality,q_100`// newPath 加宽高之后的图片aiAvatar.value = newPathhandleClear(true)setTimeout(() => {handleFaceRecognition(newPath)}, 5000)},()=>{})}});
}

css

:deep(.u-popup__content){width: 350px !important;// border-radius: 0 !important;
}
:deep(.u-modal) {width: 100% !important;
}
.ai-bg-top {position: absolute;width: 100%;height: 200rpx;top: 0;left: 0;
}
.ai-bg-bottom {position: absolute;width: 100%;height: 200rpx;bottom: 0;left: 0;
}
.animation{position: absolute;top: 350rpx;left: 0;right: 0;height: 700rpx;}.animation-list{width: 100%;height: 450rpx;background: linear-gradient(to bottom,rgba(216,179,255,0),rgba(216,179,255,1));position: relative;top: 0;animation: myfist 2s linear 1s infinite alternate;}/* 开始执行动画 */@keyframes myfist{0%{background: linear-gradient(to bottom,rgba(216,179,255,0),rgba(216,179,255,1));left: 0;top: -400rpx;}25%{left: 0;top: 100rpx;}50%{left: 0;top: 100rpx;}75%{left: 0;top: 100rpx;}100%{left: 0;top: -400rpx;}}.faceRectangles {border: 4rpx solid red;
}:deep(.u-modal__content){padding: 0 !important;height: 1100rpx;width: 100%;
}
:deep(.u-line){display: none !important; 
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/745519.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

R语言lavaan结构方程模型(SEM)实践技术应用

基于R语言lavaan程序包&#xff0c;通过理论讲解和实际操作相结合的方式&#xff0c;由浅入深地系统介绍结构方程模型的建立、拟合、评估、筛选和结果展示的全过程。我们筛选大量经典案例&#xff0c;这些案例来自Nature、Ecology、Ecological Applications、Journal of Ecolog…

MySQL 数据库 下载地址 国内阿里云站点

mysql安装包下载_开源镜像站-阿里云 以 MySQL 5.7 为例 mysql-MySQL-5.7安装包下载_开源镜像站-阿里云

C#,图论与图算法,输出无向图(Un-directed Graph)全部环(cycle)的算法与源代码

1 无向图(Un-directed Graph)全部环 图算法中需要求解全部的环。 2 方法 使用图着色方法,用唯一的数字标记不同循环的所有顶点。图形遍历完成后,将所有类似的标记数字推送到邻接列表,并相应地打印邻接列表。 3 算法 将边插入到邻接列表中。调用DFS函数,该函数使用着色方…

C# wpf 使用GDI实现截屏

wpf截屏系列 第一章 使用GDI实现截屏&#xff08;本章&#xff09; 第二章 使用GDI实现截屏 第三章 使用DockPanel制作截屏框 第四章 实现截屏框热键截屏 第五章 实现截屏框实时截屏 第六章 使用ffmpeg命令行实现录屏 文章目录 wpf截屏系列前言一、导入gdi32方法一、NuGet获取…

解决无法登录到 ArcGIS Server Administrator

目录 问题复现原因分析解决办法 问题复现 今天在访问arcgisserver后台准备设置arcgis api for js请求路径时&#xff0c;登录之后出现500错误。Services Directoryhttp://xxx.xxx.xxx.xxx:6080/arcgis/admin/system/handlers/rest/servicesdirectory 原因分析 我实在两台虚拟机…

【经验分享】Windows10无法通过SSHFS连接服务器

【经验分享】Windows10如何通过SSHFS连接服务器 前言问题分析解决方法 前言 现在很多公司出于成本考虑&#xff0c;不会为每一台电脑都提供高配置&#xff0c;所以需要通过访问云服务器来进行编译等操作。程序员如果配备的是一台windows电脑&#xff0c;那么需要访问linux服务…

vue iview 级联选择器遇到的坑

我们PC项目用到的前端技术栈是vue+iview,最近有个需求,要做个级联选择器,并且是懒加载动态加载后端返回的数据。效果如下: 如下图所示,在我们封装的公共组件form-box.vue里有我们级联选择器: 代码如下: <!--级联选择器--><template v-else-if="item.type…

基于Java的海南旅游景点推荐系统(Vue.js+SpringBoot)

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用户端2.2 管理员端 三、系统展示四、核心代码4.1 随机景点推荐4.2 景点评价4.3 协同推荐算法4.4 网站登录4.5 查询景点美食 五、免责说明 一、摘要 1.1 项目介绍 基于VueSpringBootMySQL的海南旅游推荐系统&#xff…

在Django中使用PyJWT实现登录及验证功能

目录 1、安装PyJWT 2、对信息加密及解密 3、配置登录视图和及url 4、登录装饰器 5、在验证有登录权限的的视图中登录 PyJWT的使用 1、安装PyJWT pip isntall pyjwt 2、对信息加密及解密 import jwt import datetime from jwt import exceptions# 加密盐 JWT_SALT &qu…

腾讯云轻量服务器地域选择教程,2024最新地域选择攻略

腾讯云服务器地域怎么选择&#xff1f;不同地域之间有什么区别&#xff1f;腾讯云哪个地域好&#xff1f;地域选择遵循就近原则&#xff0c;访客距离地域越近网络延迟越低&#xff0c;速度越快。腾讯云百科txybk.com告诉大家关于地域的选择还有很多因素&#xff0c;地域节点选择…

Android 异常重启--踩坑归来--干货篇

如果你未对自己的app进行过处理&#xff0c;那么线上各种偶发莫名其妙的闪退、白屏、数据丢失&#xff0c;请检查一下是否因此而引发的。 起因 异常重建指的是非配置变更情况下导致的 Activity 重新创建。 常见场景大多是因为内存等资源不足&#xff0c;从而导致后台应用被系…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:XComponent)

可用于EGL/OpenGLES和媒体数据写入&#xff0c;并显示在XComponent组件。 说明&#xff1a; 该组件从API Version 8 开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 构造参数type为"surface"时不支持。 从API version …

VsCode 使用密钥连接 Centos

在 centos 下生成密钥 ssh-keygen 执行上述命令后&#xff0c;一路回车&#xff0c;直到出现如下界面&#xff1a; 查看密钥生成情况 cd /root/.ssh ls 结果如下所示&#xff1a; 服务器上安装公钥 cd /root/.ssh cat id_rsa.pub >> authorized_keys ls >查看确…

Covalent Network(CQT)与 Celo 集成,推动 Web3 下一代现实资产解决方案的发展

Covalent Network&#xff08;CQT&#xff09;是一个统一的区块链 API 提供商&#xff0c;其已正式与 Celo 集成&#xff0c;Celo 是一个以移动优先的 EVM 兼容链。这一重要的里程碑旨在提升 Celo 生态系统中开发者的能力&#xff0c;通过授予他们访问关键链上数据的权限&#…

Python | Bootstrap图介绍

在进入Bootstrap 图之前&#xff0c;让我们先了解一下Bootstrap&#xff08;或Bootstrap 抽样&#xff09;是什么。 Bootstrap 抽样&#xff08;Bootstrap Sampling&#xff09;&#xff1a;这是一种方法&#xff0c;我们从一个数据集中重复地取一个样本数据来估计一个总体参数…

Qt教程 — 3.1 深入了解Qt 控件:Buttons按钮

目录 1 Buttons按钮简介 1.1 Buttons按钮简介 1.2 Buttons按钮如何选择 2 如何使用Buttons按钮 2.1 QPushButton使用-如何自定义皮肤 2.2 QToolButton使用-如何设置帮助文档 2.3 QRadioButton使用-如何设置开关效果 2.4 QRadioButton使用-如何设置三态选择框 2.5 QCom…

学习使用postman软件上传文件发起api接口请求

学习使用postman软件上传文件发起api接口请求 设置headers头信息设置body 设置headers头信息 如图设置&#xff1a; KEY&#xff1a;Content-Type VALUE&#xff1a;multipart/form-data 设置body 设置需要上传的key对应的类型为File&#xff0c;上传类型 设置需要上传的文件…

留学生课设|R语言|研究方法课设

目录 INSTRUCTIONS Question 1. Understanding Quantitative Research Question 2. Inputting data into Jamovi and creating variables (using the dataset) Question 3. Outliers Question 4. Tests for mean difference Question 5. Correlation Analysis INSTRUCTIO…

如何安装ES

Elasticsearch入门安装 ES的官方地址&#xff1a;Elasticsearch 平台 — 大规模查找实时答案 | Elastic 我们进到网页可以看到platform&#xff08;平台&#xff09; 我们可以看到Elasticsearch logstash kibanba beats 这几个产品 Elasticsearch&#xff1a;分布式&…

某夕夕商品数据抓取逆向之webpack扣取

逆向网址 aHR0cHM6Ly93d3cucGluZHVvZHVvLmNvbQ 逆向链接 aHR0cHM6Ly93d3cucGluZHVvZHVvLmNvbS9ob21lL2JveXNoaXJ0 逆向接口 aHR0cHM6Ly9hcGl2Mi5waW5kdW9kdW8uY29tL2FwaS9naW5kZXgvdGYvcXVlcnlfdGZfZ29vZHNfaW5mbw 逆向过程 请求方式&#xff1a;GET 参数构成 【anti_content】…