222 lines
7.8 KiB
HTML
222 lines
7.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>截图功能测试</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
margin: 20px;
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
max-width: 800px;
|
||
|
|
margin: 0 auto;
|
||
|
|
background: white;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
|
|
}
|
||
|
|
.test-area {
|
||
|
|
border: 2px dashed #ccc;
|
||
|
|
padding: 20px;
|
||
|
|
margin: 20px 0;
|
||
|
|
background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.button {
|
||
|
|
background: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216));
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
padding: 10px 20px;
|
||
|
|
border-radius: 5px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 16px;
|
||
|
|
margin: 10px;
|
||
|
|
}
|
||
|
|
.button:hover {
|
||
|
|
opacity: 0.9;
|
||
|
|
}
|
||
|
|
.button:disabled {
|
||
|
|
opacity: 0.5;
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
.status {
|
||
|
|
margin: 10px 0;
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
.success {
|
||
|
|
background: #d4edda;
|
||
|
|
color: #155724;
|
||
|
|
border: 1px solid #c3e6cb;
|
||
|
|
}
|
||
|
|
.error {
|
||
|
|
background: #f8d7da;
|
||
|
|
color: #721c24;
|
||
|
|
border: 1px solid #f5c6cb;
|
||
|
|
}
|
||
|
|
.info {
|
||
|
|
background: #d1ecf1;
|
||
|
|
color: #0c5460;
|
||
|
|
border: 1px solid #bee5eb;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h1>截图功能测试页面</h1>
|
||
|
|
|
||
|
|
<div id="detectare" class="test-area">
|
||
|
|
<h2>这是要截图的区域</h2>
|
||
|
|
<p>患者ID: 2101</p>
|
||
|
|
<p>患者姓名: 张三</p>
|
||
|
|
<p>测试时间: <span id="currentTime"></span></p>
|
||
|
|
<div style="display: flex; justify-content: space-around; margin: 20px 0;">
|
||
|
|
<div style="background: #ff6b6b; color: white; padding: 20px; border-radius: 10px;">
|
||
|
|
<h3>模块1</h3>
|
||
|
|
<p>数据: 85%</p>
|
||
|
|
</div>
|
||
|
|
<div style="background: #4ecdc4; color: white; padding: 20px; border-radius: 10px;">
|
||
|
|
<h3>模块2</h3>
|
||
|
|
<p>数据: 92%</p>
|
||
|
|
</div>
|
||
|
|
<div style="background: #45b7d1; color: white; padding: 20px; border-radius: 10px;">
|
||
|
|
<h3>模块3</h3>
|
||
|
|
<p>数据: 78%</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="text-align: center;">
|
||
|
|
<button id="screenshotBtn" class="button">📸 截图测试</button>
|
||
|
|
<button id="checkBackendBtn" class="button">🔍 检查后端</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="status"></div>
|
||
|
|
|
||
|
|
<div style="margin-top: 20px;">
|
||
|
|
<h3>使用说明:</h3>
|
||
|
|
<ol>
|
||
|
|
<li>确保后端服务已启动 (python debug_server.py)</li>
|
||
|
|
<li>点击"检查后端"按钮验证后端连接</li>
|
||
|
|
<li>点击"截图测试"按钮进行截图</li>
|
||
|
|
<li>截图将保存到 screenshots/2101_张三/ 文件夹中</li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
|
||
|
|
<script>
|
||
|
|
const BACKEND_URL = 'http://localhost:5000';
|
||
|
|
|
||
|
|
// 更新当前时间
|
||
|
|
function updateTime() {
|
||
|
|
const now = new Date();
|
||
|
|
document.getElementById('currentTime').textContent = now.toLocaleString('zh-CN');
|
||
|
|
}
|
||
|
|
updateTime();
|
||
|
|
setInterval(updateTime, 1000);
|
||
|
|
|
||
|
|
// 显示状态消息
|
||
|
|
function showStatus(message, type = 'info') {
|
||
|
|
const statusDiv = document.getElementById('status');
|
||
|
|
statusDiv.innerHTML = `<div class="status ${type}">${message}</div>`;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 检查后端连接
|
||
|
|
async function checkBackend() {
|
||
|
|
try {
|
||
|
|
showStatus('正在检查后端连接...', 'info');
|
||
|
|
const response = await fetch(`${BACKEND_URL}/health`);
|
||
|
|
const data = await response.json();
|
||
|
|
|
||
|
|
if (data.status === 'ok') {
|
||
|
|
showStatus('✅ 后端连接正常', 'success');
|
||
|
|
} else {
|
||
|
|
showStatus('❌ 后端响应异常', 'error');
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
showStatus(`❌ 后端连接失败: ${error.message}`, 'error');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 截图功能
|
||
|
|
async function takeScreenshot() {
|
||
|
|
const btn = document.getElementById('screenshotBtn');
|
||
|
|
|
||
|
|
try {
|
||
|
|
btn.disabled = true;
|
||
|
|
btn.textContent = '📸 截图中...';
|
||
|
|
showStatus('正在生成截图...', 'info');
|
||
|
|
|
||
|
|
// 获取要截图的元素
|
||
|
|
const element = document.getElementById('detectare');
|
||
|
|
if (!element) {
|
||
|
|
throw new Error('未找到截图区域');
|
||
|
|
}
|
||
|
|
|
||
|
|
// 使用html2canvas进行截图
|
||
|
|
const canvas = await html2canvas(element, {
|
||
|
|
useCORS: true,
|
||
|
|
allowTaint: true,
|
||
|
|
backgroundColor: '#ffffff',
|
||
|
|
scale: 1,
|
||
|
|
logging: false
|
||
|
|
});
|
||
|
|
|
||
|
|
// 转换为base64
|
||
|
|
const base64Image = canvas.toDataURL('image/png');
|
||
|
|
|
||
|
|
showStatus('正在保存截图...', 'info');
|
||
|
|
|
||
|
|
// 生成检查记录ID
|
||
|
|
const now = new Date();
|
||
|
|
const sessionId = now.getFullYear() +
|
||
|
|
String(now.getMonth() + 1).padStart(2, '0') +
|
||
|
|
String(now.getDate()).padStart(2, '0') +
|
||
|
|
String(now.getHours()).padStart(2, '0') +
|
||
|
|
String(now.getMinutes()).padStart(2, '0') +
|
||
|
|
String(now.getSeconds()).padStart(2, '0');
|
||
|
|
|
||
|
|
// 调用后端API保存截图
|
||
|
|
const response = await fetch(`${BACKEND_URL}/api/screenshots/save`, {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/json'
|
||
|
|
},
|
||
|
|
body: JSON.stringify({
|
||
|
|
patientId: '2101',
|
||
|
|
patientName: '张三',
|
||
|
|
sessionId: sessionId,
|
||
|
|
imageData: base64Image
|
||
|
|
})
|
||
|
|
});
|
||
|
|
|
||
|
|
const result = await response.json();
|
||
|
|
|
||
|
|
if (result.success) {
|
||
|
|
showStatus(`✅ 截图保存成功！<br>文件路径: ${result.filepath}`, 'success');
|
||
|
|
} else {
|
||
|
|
throw new Error(result.message || '保存失败');
|
||
|
|
}
|
||
|
|
|
||
|
|
} catch (error) {
|
||
|
|
console.error('截图失败:', error);
|
||
|
|
showStatus(`❌ 截图失败: ${error.message}`, 'error');
|
||
|
|
} finally {
|
||
|
|
btn.disabled = false;
|
||
|
|
btn.textContent = '📸 截图测试';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 绑定事件
|
||
|
|
document.getElementById('screenshotBtn').addEventListener('click', takeScreenshot);
|
||
|
|
document.getElementById('checkBackendBtn').addEventListener('click', checkBackend);
|
||
|
|
|
||
|
|
// 页面加载时自动检查后端
|
||
|
|
window.addEventListener('load', checkBackend);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|