yeguodong
/
mhCardReader


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华视读卡器照片BASE64功能测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; line-height: 1.6; }
        .container { max-width: 1000px; margin: 0 auto; }
        button { background: #007cba; color: white; border: none; padding: 10px 20px; margin: 5px; cursor: pointer; border-radius: 4px; }
        button:hover { background: #005a87; }
        .result { background: #f5f5f5; border: 1px solid #ccc; padding: 15px; margin: 10px 0; border-radius: 4px; }
        .photo-section { margin-top: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 4px; }
        .photo-preview { max-width: 200px; max-height: 200px; border: 1px solid #ccc; margin: 10px 0; }
        .base64-text { max-height: 200px; overflow-y: auto; background: #fff; border: 1px solid #ccc; padding: 10px; font-family: monospace; font-size: 12px; }
        .error { color: red; }
        .success { color: green; }
        .info { color: blue; }
    </style>
</head>
<body>
    <div class="container">
        <h1>华视读卡器照片BASE64功能测试</h1>
        
        <div class="test-section">
            <h2>测试功能</h2>
            <button onclick="testInitialize()">1. 初始化读卡器</button>
            <button onclick="testReadCardWithPhoto()">2. 读取身份证(含照片BASE64)</button>
            <button onclick="testDeviceStatus()">3. 检查设备状态</button>
            <button onclick="testClose()">4. 关闭设备</button>
            <br><br>
            <button onclick="clearResults()">清除结果</button>
        </div>

        <div id="results"></div>

        <div class="photo-section" id="photoSection" style="display: none;">
            <h3>照片预览</h3>
            <div>
                <strong>照片格式：</strong><span id="photoFormat"></span> | 
                <strong>照片大小：</strong><span id="photoSize"></span> 字符
            </div>
            <img id="photoPreview" class="photo-preview" alt="身份证照片">
            <div>
                <h4>BASE64编码 (前500字符):</h4>
                <div id="base64Preview" class="base64-text"></div>
            </div>
            <button onclick="downloadPhoto()">下载照片</button>
        </div>
    </div>

    <script>
        let currentPhotoData = null;

        function addResult(title, data, type = 'info') {
            const results = document.getElementById('results');
            const div = document.createElement('div');
            div.className = `result ${type}`;
            
            let content = `<h3>${title}</h3>`;
            if (typeof data === 'object') {
                content += `<pre>${JSON.stringify(data, null, 2)}</pre>`;
                
                // 如果包含照片数据，显示照片预览
                if (data.data && data.data.photoBase64 && data.data.hasPhoto) {
                    showPhotoPreview(data.data);
                }
            } else {
                content += `<p>${data}</p>`;
            }
            
            div.innerHTML = content;
            results.appendChild(div);
            results.scrollTop = results.scrollHeight;
        }

        function showPhotoPreview(data) {
            currentPhotoData = data;
            const photoSection = document.getElementById('photoSection');
            const photoPreview = document.getElementById('photoPreview');
            const photoFormat = document.getElementById('photoFormat');
            const photoSize = document.getElementById('photoSize');
            const base64Preview = document.getElementById('base64Preview');

            if (data.hasPhoto && data.photoBase64) {
                photoSection.style.display = 'block';
                
                // 设置照片信息
                photoFormat.textContent = data.photoFormat || 'UNKNOWN';
                photoSize.textContent = data.photoSize || data.photoBase64.length;
                
                // 显示BASE64前500字符
                base64Preview.textContent = data.photoBase64.substring(0, 500) + 
                    (data.photoBase64.length > 500 ? '...' : '');
                
                // 显示照片预览
                try {
                    let mimeType = 'image/jpeg';
                    if (data.photoFormat === 'BMP') {
                        mimeType = 'image/bmp';
                    }
                    
                    photoPreview.src = `data:${mimeType};base64,${data.photoBase64}`;
                    photoPreview.style.display = 'block';
                } catch (e) {
                    photoPreview.style.display = 'none';
                    addResult('照片预览错误', e.message, 'error');
                }
            } else {
                photoSection.style.display = 'none';
            }
        }

        function downloadPhoto() {
            if (!currentPhotoData || !currentPhotoData.photoBase64) {
                alert('没有可下载的照片数据');
                return;
            }

            try {
                const base64Data = currentPhotoData.photoBase64;
                const format = currentPhotoData.photoFormat || 'JPEG';
                const mimeType = format === 'BMP' ? 'image/bmp' : 'image/jpeg';
                const extension = format === 'BMP' ? 'bmp' : 'jpg';
                
                // 创建下载链接
                const link = document.createElement('a');
                link.href = `data:${mimeType};base64,${base64Data}`;
                link.download = `idcard_photo_${new Date().getTime()}.${extension}`;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            } catch (e) {
                addResult('照片下载错误', e.message, 'error');
            }
        }

        function testInitialize() {
            fetch('http://localhost:8321/readcard/huashi/initialize', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' }
            })
            .then(response => response.json())
            .then(data => {
                const type = data.code === 200 ? 'success' : 'error';
                addResult('初始化华视读卡器', data, type);
            })
            .catch(error => {
                addResult('初始化请求错误', error.message, 'error');
            });
        }

        function testReadCardWithPhoto() {
            addResult('开始读取身份证', '请将身份证放在读卡器上...', 'info');
            
            fetch('http://localhost:8321/readcard/huashi/readcard', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' }
            })
            .then(response => response.json())
            .then(data => {
                const type = data.code === 200 ? 'success' : 'error';
                addResult('读取身份证信息(含照片BASE64)', data, type);
            })
            .catch(error => {
                addResult('读卡请求错误', error.message, 'error');
            });
        }

        function testDeviceStatus() {
            fetch('http://localhost:8321/readcard/huashi/status', {
                method: 'GET',
                headers: { 'Content-Type': 'application/json' }
            })
            .then(response => response.json())
            .then(data => {
                const type = data.connected ? 'success' : 'error';
                addResult('设备状态检查', data, type);
            })
            .catch(error => {
                addResult('状态检查错误', error.message, 'error');
            });
        }

        function testClose() {
            fetch('http://localhost:8321/readcard/huashi/close', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' }
            })
            .then(response => response.json())
            .then(data => {
                const type = data.code === 200 ? 'success' : 'error';
                addResult('关闭设备连接', data, type);
            })
            .catch(error => {
                addResult('关闭设备错误', error.message, 'error');
            });
        }

        function clearResults() {
            document.getElementById('results').innerHTML = '';
            document.getElementById('photoSection').style.display = 'none';
            currentPhotoData = null;
        }

        // 页面加载完成后的说明
        window.onload = function() {
            addResult('测试说明', 
                `本页面用于测试华视读卡器的照片BASE64编码功能。
                
新增功能特性：
1. 在身份证数据中包含 photoBase64 字段（照片的BASE64编码）
2. hasPhoto 字段指示是否成功获取到照片
3. photoFormat 字段指示照片格式（JPEG/BMP）
4. photoSize 字段指示BASE64编码长度

测试步骤：
1. 先点击"初始化读卡器"
2. 将身份证放在读卡器上
3. 点击"读取身份证(含照片BASE64)"
4. 查看结果中的照片信息和预览

注意：确保华视读卡器已正确连接并安装驱动程序。`, 'info');
        };
    </script>
</body>
</html>