IE11专家人脸demo完成

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({
+        this.props.faceCompareEvent(image);
-          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, '*');
-        }) 
       }
     });
   }
- 
   render() {
     const { transferData } = this.state || {};
     console.log(transferData, "数据");
     return (
-      <div style={{ height: "100%" }}>
+        <div style={{ height: "100%" }}>
-		{/* 设置Iframe 盒子的宽度 */}
+          {/* 设置Iframe 盒子的宽度 */}
-        <div style={{ minHeight: "calc(55vh - 97px)", position: "relative" }}>
+          <div style={{ minHeight: "calc(55vh - 97px)", position: "relative" }}>
-        {/* 这个是打包后的Iframe 地址：要到webpack中配置打包地址 */}
+          {/* 这个是打包后的Iframe 地址：要到webpack中配置打包地址 */}
-          <FrameLoader url="/faceLoginIE/index.html" />
+            <FrameLoader url="/faceLoginIE/index.html" />
+          </div>
+          <div id ="result"></div>
         </div>
-      </div>
     );
   }
 }

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 (
             <Tabs defaultActiveKey="1" onChange={onChange}>
                 <TabPane tab="人脸识别登录" key="1">
-                    <video ref={video} width="480" height="320"></video>
+                    <Spin spinning={spinning}>
-                    <div>
+                        <video ref={video} width="480" height="320"></video>
-                        <button id="recog" onClick={() => Recog()}>人脸识别</button>
+                        <div>
-                    </div>
+                            <button id="recog" onClick={() => Recog('')}>人脸识别</button>
-                    <canvas id="canvas" ref={canvas} width="480" height="320"></canvas>
+                        </div>
-                    <div id='result'></div>
+                        <canvas id="canvas" ref={canvas} width="480" height="320"></canvas>
+                        <h1 id='result'></h1>
+                    </Spin>
                 </TabPane>
                 <TabPane tab="账号密码登录" key="2">
                     Content of Tab Pane 2
@@ -148,7 +204,10 @@ const FaceLoginNotIE: React.FC<{}> = () => {
         return(
             <Tabs defaultActiveKey="1" onChange={onChange}>
                 <TabPane tab="人脸识别登录" key="1">
-                    <FrameFaceLogin/>
+                    <Spin spinning={spinning}>
+                        <FrameFaceLogin faceCompareEvent = {Recog}/>
+                        <h1 id='result'></h1>
+                    </Spin>
                 </TabPane>
                 <TabPane tab="账号密码登录" key="2">
                     Content of Tab Pane 2