企业网站建设 英铭,企业数字展厅,白帽seo是什么职业,汽车网站方案效果如上#xff0c;我用的是阿里云的人脸识别。首先#xff0c;我们先封装一个阿里云的请求js文件
faceRecognition.js
import CryptoJS from crypto-js//SignatureNonce随机数字
function signNRandom() {const Rand Math.random()const mineId Math.round(Rand * 1000… 效果如上我用的是阿里云的人脸识别。首先我们先封装一个阿里云的请求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;charsetUTF-8this.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?spma2c4g.11186623.0.i2
然后开始使用
view classre-upload clickuploadImage上传图片/viewu-modal :showidentifyShow title :showConfirmButtonfalseview classslot-content stylewidth: 100%;position: relative;display: flex;justify-content: center;background-color: #00112b;image classai-bg-top src mode/imageview classai-image stylewidth: 330px !important;height: 350px;margin-top: 200rpx;position: relative;view classanimation v-showscanShowview classanimation-list/view/viewimage :srcaiAvatar mode stylewidth: 100% !important;height: 100%;/imageview classfaceRectangles v-for(item, index) in avatarPostionList:keyindex:stylehandlefaceRectanglesStyle(item, index)/view/viewimage classai-bg-bottom src mode/image/view/u-modalimport faceRecognition from /utils/faceRecognition.jsconst 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-processimage/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;
}
