React应用集成Mantra MFS100指纹仪：从直接调用到API服务模式

import React, { useState } from 'react';

const MantraFingerprintCapture = () => {
    // 使用useState来存储捕获到的指纹图像数据
    const [fingerprintImage, setFingerprintImage] = useState('');
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);

    /**
     * 处理指纹捕获逻辑
     * 通过调用本地MFS100服务的API来捕获指纹
     */
    const handleCaptureFingerprint = async () => {
        setLoading(true);
        setError(null); // 重置错误信息

        try {
            const myHeaders = new Headers();
            myHeaders.append("Content-Type", "application/json");

            // 构建发送给本地服务的请求体
            const MFS100Request = {
                "Quality": 100, // 指纹图像质量 (1-100)
                "TimeOut": 10   // 捕获超时时间 (秒)
            };

            const raw = JSON.stringify({
                "data": JSON.stringify(MFS100Request) // 根据API要求，可能需要双重JSON字符串化
            });

            const requestOptions = {
                method: 'POST',
                headers: myHeaders,
                body: raw,
                redirect: 'follow' // 允许重定向
            };

            // 发送请求到Mantra MFS100本地服务
            const response = await fetch('http://localhost:8004/mfs100/capture', requestOptions);

            if (!response.ok) {
                // 如果HTTP响应状态码不是2xx，抛出错误
                const errorData = await response.json();
                throw new Error(`API error: ${response.status} - ${errorData.message || 'Unknown error'}`);
            }

            const result = await response.json();

            // 检查API返回的数据结构，确保包含BitmapData
            if (result && result.BitmapData) {
                // 将Base64编码的图像数据设置为组件状态
                setFingerprintImage('data:image/png;base64,' + result.BitmapData);
            } else {
                throw new Error('Failed to capture fingerprint: Missing BitmapData in response.');
            }

        } catch (err) {
            console.error('Error capturing fingerprint:', err);
            setError(`捕获指纹失败: ${err.message}`);
            setFingerprintImage(''); // 清除旧图像
        } finally {
            setLoading(false);
        }
    };

    return (
        <div style={{ padding: '20px', textAlign: 'center' }}>
            <h2>Mantra MFS100 指纹捕获</h2>
            <p>通过本地服务API进行指纹识别。</p>

            <button 
                onClick={handleCaptureFingerprint} 
                disabled={loading}
                style={{ 
                    padding: '10px 20px', 
                    fontSize: '16px', 
                    cursor: loading ? 'not-allowed' : 'pointer',
                    backgroundColor: loading ? '#ccc' : '#007bff',
                    color: '#fff',
                    border: 'none',
                    borderRadius: '5px'
                }}
            >
                {loading ? '正在捕获...' : '捕获指纹'}
            </button>

            {error && (
                <p style={{ color: 'red', marginTop: '15px' }}>{error}</p>
            )}

            {fingerprintImage && (
                <div style={{ marginTop: '20px' }}>
                    <h3>捕获到的指纹图像:</h3>
                    <img 
                        src={fingerprintImage} 
                        alt="Captured Fingerprint" 
                        style={{ maxWidth: '200px', border: '1px solid #ddd' }} 
                    />
                </div>
            )}
        </div>
    );
};

export default MantraFingerprintCapture;