Mantra MFS100生物识别设备在React应用中的集成教程

import React, { useState } from 'react';  const MantraFingerprintScanner = () => {     // 使用useState管理捕获到的指纹图像数据     const [fingerprintImage, setFingerprintImage] = useState('');     const [isLoading, setIsLoading] = useState(false);     const [Error, setError] = useState(null);      /**      * 处理Mantra MFS100指纹捕获逻辑      * 通过向本地MFS100服务发送HTTP请求来捕获指纹      */     const handleCaptureFingerprint = async () => {         setIsLoading(true);         setError(null); // 清除之前的错误信息          const myHeaders = new Headers();         myHeaders.append("Content-Type", "application/json");          // 构建发送给本地MFS100服务的请求体         const MFS100Request = {             "Quality": 100, // 指纹图像质量 (1-100, 建议最低55)             "TimeOut": 10   // 捕获超时时间 (秒, 建议最低10, 最高60, 0为无限)         };          // 将请求数据JSON字符串化         const rawBody = JSON.stringify({             "data": JSON.stringify(MFS100Request)         });          const requestOptions = {             method: 'POST',             headers: myHeaders,             body: rawBody,             redirect: 'follow'         };          try {             // 向本地MFS100服务发送捕获请求             const response = await fetch('http://localhost:8004/mfs100/capture', requestOptions);             if (!response.ok) {                 throw new Error(`HTTP error! Status: ${response.status}`);             }             const result = await response.json();              // 检查MFS100服务返回的数据结构             if (result && result.BitmapData) {                 // 将Base64编码的指纹图像数据更新到状态中                 setFingerprintImage('data:image/png;base64,' + result.BitmapData);             } else {                 // 如果服务返回的数据格式不符合预期                 throw new Error('MFS100 service did not return valid BitmapData.');             }         } catch (err) {             console.error('Error capturing fingerprint:', err);             setError(`捕获指纹失败: ${err.message}. 请确保Mantra MFS100服务已运行。`);             setFingerprintImage(''); // 清空图像，以防显示旧数据         } finally {             setIsLoading(false);         }     };      return (         <div style={{ padding: '20px', textAlign: 'center' }}>             <h2>Mantra MFS100 指纹捕获</h2>             {error && <p style={{ color: 'red' }}>{error}</p>}             {isLoading && <p>正在扫描指纹，请稍候...</p>}             <div style={{ margin: '20px 0' }}>                 {fingerprintImage ? (                     <img                         src={fingerprintImage}                         alt="Captured Fingerprint"                         style={{ maxWidth: '200px', border: '1px solid #ccc' }}                     />                 ) : (                     <div style={{                         width: '200px', height: '200px', border: '1px dashed #ccc',                         display: 'inline-flex', alignItems: 'center', justifyContent: 'center',                         color: '#999'                     }}>                         等待指纹图像...                     </div>                 )}             </div>             <button                 onClick={handleCaptureFingerprint}                 disabled={isLoading}                 style={{                     padding: '10px 20px',                     fontSize: '16px',                     cursor: isLoading ? 'not-allowed' : 'pointer',                     backgroundColor: '#007bff',                     color: 'white',                     border: 'none',                     borderRadius: '5px'                 }}             >                 {isLoading ? '捕获中...' : '捕获指纹'}             </button>         </div>     ); };  export default MantraFingerprintScanner;