diff --git a/src/pages/userformal/faceLogin/FrameFaceLogin.tsx b/src/pages/userformal/faceLogin/FrameFaceLogin.tsx index f35c7ce..a317346 100644 --- a/src/pages/userformal/faceLogin/FrameFaceLogin.tsx +++ b/src/pages/userformal/faceLogin/FrameFaceLogin.tsx @@ -1,51 +1,37 @@ import React from "react"; import FrameLoader from "./FrameLoader"; + export default class FrameFaceLogin extends React.Component { constructor(props:any) { super(props); - console.log(props, "props数据"); this.state = { transferData: { image: '' }, }; } + componentDidMount() { - // 接收Iframe传递的数据 + // 接收Iframe传递的数据 window.addEventListener("message", (e) => { const { image} = e.data || {}; //传递的数据 if (image) { - this.setState({ - transferData: { - image:e.data - }, - }); - const url = 'http://127.0.0.1:8081/outer/v1.0/stock/logicStock/rgbArray2Base64'; - window.fetch(url,{ - method:'post', - body : JSON.stringify({//post请求参数 - type: 'pixel', - rgb: image - }) - }).then(res => res.json()).then(res => { - const childFrameObj = document.getElementById('faceLoginFrame'); - childFrameObj.contentWindow.postMessage(res, '*'); - }) + this.props.faceCompareEvent(image); } }); } - render() { const { transferData } = this.state || {}; console.log(transferData, "数据"); return ( -
- {/* 设置Iframe 盒子的宽度 */} -
- {/* 这个是打包后的Iframe 地址:要到webpack中配置打包地址 */} - +
+ {/* 设置Iframe 盒子的宽度 */} +
+ {/* 这个是打包后的Iframe 地址:要到webpack中配置打包地址 */} + +
+
-
); } } diff --git a/src/pages/userformal/faceLogin/index.tsx b/src/pages/userformal/faceLogin/index.tsx index 8ebdb9b..0386687 100644 --- a/src/pages/userformal/faceLogin/index.tsx +++ b/src/pages/userformal/faceLogin/index.tsx @@ -1,5 +1,5 @@ import React, { useRef, useEffect, useState } from 'react'; -import {Tabs, message } from 'antd'; +import {Spin, Tabs, message } from 'antd'; import cookie from 'react-cookies'; import FrameFaceLogin from './FrameFaceLogin'; @@ -92,8 +92,21 @@ const FaceLoginNotIE: React.FC<{}> = () => { InitBrowser(); initMedia(); }, []); + + const base64ToBlob = (base64:string) =>{ + const parts = base64.split(";base64,"); + const contentType = parts[0].split(":")[1]; + const raw = window.atob(parts[1]); + const rawLength = raw.length; + const uInt8Array = new Uint8Array(rawLength); + for (let i = 0; i < rawLength; i += 1) { + uInt8Array[i] = raw.charCodeAt(i); + } + return new Blob([uInt8Array], { type: contentType }); + }; + //人脸比对 - const Recog=() =>{ + const Recog=(image:any) =>{ if(canvas.current){ setSping(true); const context = canvas.current.getContext('2d'); @@ -115,7 +128,7 @@ const FaceLoginNotIE: React.FC<{}> = () => { var _similarity = _data['UNI_BSS_BODY']['FACE_COMPARE_RSP']['SIMILARITY']; _html.innerText = '相似度:' + _similarity; //关闭摄像头 - video.current.srcObject.getTracks()[0].stop(); + //video.current.srcObject.getTracks()[0].stop(); } else { setSping(false); message.error('人脸比对失败'); @@ -126,18 +139,61 @@ const FaceLoginNotIE: React.FC<{}> = () => { setSping(false); }); }); + }else{ + setSping(true); + const url = 'http://127.0.0.1:8081/outer/v1.0/stock/logicStock/rgbArray2Base64'; + window.fetch(url,{ + method:'post', + body : JSON.stringify({//post请求参数 + type: 'pixel', + rgb: image + }) + }).then(res => res.json()).then(res => { + const childFrameObj = document.getElementById('faceLoginFrame'); + childFrameObj.contentWindow.postMessage(res, '*'); + //base64图片进行人脸比对 + var formData = new FormData(); + formData.append('multipartFiles', base64ToBlob( 'data:image/jpg;base64,' + res.data), 'upload_face.jpeg'); + console.log(3); + const url2 = 'http://127.0.0.1:8081/outer/v1.0/stock/logicStock/importStockDepotRelation'; + window.fetch(url2,{ + method:'post', + mode:'cors', + body : formData + }).then(res => res.json()).then(res => { + if (null != res) { + setSping(false); + message.success('人脸比对成功'); + var _html = document.getElementById('result'); + var _data = eval("(" + res['data'] + ")"); + var _similarity = _data['UNI_BSS_BODY']['FACE_COMPARE_RSP']['SIMILARITY']; + _html.innerText = '相似度:' + _similarity; + //关闭摄像头 + //video.current.srcObject.getTracks()[0].stop(); + } else { + setSping(false); + message.error('人脸比对失败'); + } + }).catch(e =>{ + console.log(e); + }).finally(() => { + setSping(false); + }); + }) } } if(!whetherIE.current){ return ( - -
- -
- -
+ + +
+ +
+ +

+
Content of Tab Pane 2 @@ -148,7 +204,10 @@ const FaceLoginNotIE: React.FC<{}> = () => { return( - + + +

+
Content of Tab Pane 2