From d7cd5af9b0fab4f2ef196d909dc4a1f2831f2d35 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A2=81=E5=B8=85?= Date: Tue, 16 Aug 2022 11:13:29 +0800 Subject: [PATCH] =?UTF-8?q?IE11=E4=B8=93=E5=AE=B6=E4=BA=BA=E8=84=B8demo?= =?UTF-8?q?=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../userformal/faceLogin/FrameFaceLogin.tsx | 36 +++------ src/pages/userformal/faceLogin/index.tsx | 79 ++++++++++++++++--- 2 files changed, 80 insertions(+), 35 deletions(-) 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