react_hsbc_teller 2.0.51 → 2.0.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react_hsbc_teller",
-  "version": "2.0.51",
+  "version": "2.0.53",
   "description": "React",
   "private": false,
   "main": "lib/hsbc.js",

package/packages/pages/video/video.jsx

@@ -6,7 +6,7 @@ import QRCode  from 'qrcode.react';
 import API from '../../api/api';
 import { BoardOperate } from '../../common/index.esm.js';
 import './video.less'
-import { compressImage, isLight } from '../../utils/utils'
+import { compressImage, isLight, saveBase64Image, combineBase64Images } from '../../utils/utils'
 import Recorder from "js-audio-recorder";
 import MyAsrController from '../../utils/asrController'
 import Header from '../header/header.jsx'
@@ -63,7 +63,7 @@ import MultiModule from '../multiModule/multiModule'//签字、抄录
 import axios from 'axios';
 import CryptoJS from "crypto-js";
 
-const SDK_VERISON = '2.0.51'
+const SDK_VERISON = '2.0.53'
 const IDtypeFront = '请客户在其设备后置摄像头下展示证件正面（如：身份证照片页面）'
 const IDtypeBack = '请在后置摄像头下展示证件反面（如：身份证国徽页）'
 const { Option } = Select;
@@ -249,8 +249,8 @@ class Video extends Component {
     linkData: '',
     roomCustomerList: [],
     userIdCardResults: {},
-    facialImg: '',
-    isFaceImage: false,
+    facialImg: '', // 人脸图片
+    isFaceImage: false, // 是否拍过照片，用于控制下一步的显示
     isModalVisibleFacial: false,
     isModalVisibleEnd: false,
     isModalVisible: false,
@@ -995,7 +995,7 @@ class Video extends Component {
     const list = []
     for (let i =1;i<=12;i++){
       let item = this.state.videoList[i-1];
-      if (document.getElementById('video'+ i).name && !item.isPIBIntranet && item.userSide===1) {
+      if (document.getElementById('video'+ i).name && !item.isPIBIntranet) {
         // console.log(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId"+i).innerText))
         list.push({
           feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId"+i).innerText).feedId,
@@ -1267,7 +1267,8 @@ class Video extends Component {
         name: 'publish_video1',
         title: this.props.meetingInfo.host ? this.props.meetingInfo.host : '客户经理1',
         mute: this.state.voiceStatue,
-        noVideo: false
+        noVideo: false,
+        userId: this.props.tellerAccount
       })
     }
     console.log(this.state.videoList)
@@ -1412,7 +1413,7 @@ class Video extends Component {
         let microphoneSize = 50
         var img = document.getElementById("icon_huatong");
         var img1 = document.getElementById("icon_huatong_close");
-        if (!this.state.listVideoPicture[i].title.includes(IPAD_SUFFIX)) {
+        if (!this.state.listVideoPicture[i].userId.includes(IPAD_SUFFIX)) {
         if (this.state.listVideoPicture[i].mute) {
           cobj.drawImage(img1, 10, 360 * (i + 1) - 60 + baseStartHeight, microphoneSize, microphoneSize);
         } else {
@@ -4102,6 +4103,7 @@ class Video extends Component {
         isPIBIntranet: false,
         idIndex: i,
         hasOcr: 0,
+        userId: ''
       })
     }
     this.videoErrorEvent = (event) => {
@@ -4834,6 +4836,8 @@ class Video extends Component {
     // })
     } else {
       console.log('身份证ocr')
+      const idCardName = this.state.idCardName
+      const documentType = this.state.documentType
       // 身份证，进行人脸识别后再入库
       this.state.userIdCardResults[this.state.faceCustomerUid] = {
         idCardName: this.state.idCardName,
@@ -4871,6 +4875,14 @@ class Video extends Component {
       setTimeout(() => {
         this.publishVideoTwo()
       }, 0);
+
+      // 保存图片到本地
+      setTimeout(() => {
+        combineBase64Images(this.state.facialImgFront, this.state.facialImgBack, (base64Image)=>{
+          saveBase64Image(base64Image, `${idCardName}-${documentType}`)
+        })
+      }, 100);
+      
     }
   }
   // ocr结果入库
@@ -4920,6 +4932,16 @@ class Video extends Component {
         if (this.state.isPictureInPicture) {
           this.pictureInPicture('Refresh')
         }
+        // console.log(this.state.facialImgFront)
+        // console.log(`${data.idCardName}-${this.state.documentType}`)
+        if (this.state.documentType == 'HK_MO_RESIDENCE_CARD' || this.state.documentType == 'TW_RESIDENCE_CARD') {
+          // 居住证正反面需要拼接成一张图
+          combineBase64Images(this.state.facialImgFront, this.state.facialImgBack, (base64Image)=>{
+            saveBase64Image(base64Image, `${data.reviseIdCardName||data.idCardName}-${this.state.documentType}`)
+          })
+        } else {
+          saveBase64Image(this.state.facialImgFront, `${data.reviseIdCardName||data.idCardName}-${this.state.documentType}`)
+        }
       } else {
         console.log('1')
         this.messageClick('保持信息失败', 'error')
@@ -5448,7 +5470,12 @@ class Video extends Component {
 
     compressImage(imgBase64, (compressedImg)=>{
       // console.log(compressedImg)
-      if (this.state.IDtypeFrontOrBack == IDtypeFront) {
+      if (this.state.titleModal == '身份验证') {
+        this.setState({
+          facialImg: compressedImg,
+          isFaceImage: true,
+        })
+      } else if (this.state.IDtypeFrontOrBack == IDtypeFront) {
         this.setState({
           facialImg: compressedImg,
           isFaceImage: true,
@@ -7053,7 +7080,7 @@ class Video extends Component {
                     <label style={{ display: 'none' }} id={'feedId'+(item.idIndex)} type="text" />
                     
                     <div onClick={this.muteOpposite.bind(this, 'video'+(item.idIndex))} style={{ display: (item.videoName) ? '' : 'none'}} className={`customerTitle titleSamlle`}>
-                    { item.videoName.includes(IPAD_SUFFIX) ? <span style={{paddingLeft: '8px'}}> </span>:<>
+                    { item.userId.includes(IPAD_SUFFIX) ? <span style={{paddingLeft: '8px'}}> </span>:<>
                     {
                       item.mute && <img
                         alt=""

package/packages/utils/utils.js

@@ -115,8 +115,85 @@ function isLight(src, sensitivity = 1) {
   }
   
 }
+
+function combineBase64Images(image1, image2, callback) {
+  // console.log(image1, image2)
+  // 创建Canvas元素
+  var canvas = document.createElement('canvas');
+  var ctx = canvas.getContext('2d');
+ 
+  // 加载第一张图片
+  var img1 = new Image();
+  img1.onload = function() {
+ 
+    // 加载第二张图片
+    var img2 = new Image();
+    img2.onload = function() {
+
+      // 设置Canvas的宽度和高度
+      const imageWidth = 1280;
+      const imageHeight = 720;
+      canvas.width = imageWidth ; // 不压缩的话是 1280 x 720 
+      canvas.height = imageHeight * 2;
+
+      console.log(img1.width, img1.height)
+      console.log(img2.width, img2.height)
+  
+      // 绘制第一张图片
+      ctx.drawImage(img1, 0, 0, imageWidth, imageHeight);
+      // 绘制第二张图片在第一张图片下方
+      ctx.drawImage(img2, 0, imageHeight, imageWidth, imageHeight);
+
+ 
+      // 导出拼接后的图片为base64
+      var combinedImageData = canvas.toDataURL('image/png');
+      
+      // 执行回调函数，返回base64字符串
+      callback(combinedImageData);
+      console.log(combinedImageData)
+
+    };
+    img2.src = image2;
+  };
+  img1.src = image1;
+ 
+}
+
+function saveBase64Image(base64Data, fileName) {
+  // 将base64字符串转换为Blob对象
+  let arr = base64Data.split(',');
+  let mime = arr[0].match(/:(.*?);/)[1];
+  let bstr = atob(arr[1]);
+  let n = bstr.length;
+  let u8arr = new Uint8Array(n);
+
+  while (n--) {
+      u8arr[n] = bstr.charCodeAt(n);
+  }
+
+  let blob = new Blob([u8arr], { type: mime });
+
+  // 创建一个指向Blob对象的URL
+  let url = URL.createObjectURL(blob);
+
+  // 创建一个a标签用于下载
+  let link = document.createElement('a');
+  link.href = url;
+  link.download = fileName + '.jpg';
+  document.body.appendChild(link);
+
+  // 触发下载
+  link.click();
+
+  // 清理并移除元素和对象URL
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+
 export {
   compressImage,
   debounce,
-  isLight
+  isLight,
+  combineBase64Images,
+  saveBase64Image
 }