417 lines
14 KiB
HTML
417 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>坐标提取工具</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
html, body { width: 100%; height: 100%; overflow: hidden; background: #111827; color: #e5e7eb; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; display: flex; }
|
|
|
|
.left-panel {
|
|
width: 320px; min-width: 320px; background: #020617; border-right: 1px solid #1f2937;
|
|
display: flex; flex-direction: column; height: 100vh;
|
|
}
|
|
.left-header {
|
|
padding: 12px 16px; border-bottom: 1px solid #1f2937; font-size: 14px; color: #9ca3af;
|
|
font-weight: 500; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
|
|
}
|
|
.coord-list {
|
|
flex: 1; overflow-y: auto; padding: 8px;
|
|
}
|
|
.coord-group {
|
|
margin-bottom: 10px; background: #0f172a; border: 1px solid #1f2937; border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
.coord-group-header {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 8px 12px; border-bottom: 1px solid #1f2937; font-size: 13px;
|
|
}
|
|
.coord-group-color {
|
|
display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px;
|
|
}
|
|
.coord-group-actions { display: flex; gap: 6px; }
|
|
.coord-group-actions button {
|
|
background: none; border: none; cursor: pointer; font-size: 13px; padding: 2px 4px;
|
|
border-radius: 3px; transition: background 0.15s;
|
|
}
|
|
.coord-group-actions .copy-btn { color: #60a5fa; }
|
|
.coord-group-actions .copy-btn:hover { background: rgba(96,165,250,0.15); }
|
|
.coord-group-actions .del-btn { color: #f87171; }
|
|
.coord-group-actions .del-btn:hover { background: rgba(248,113,113,0.15); }
|
|
.coord-group pre {
|
|
margin: 0; padding: 8px 12px; font-family: 'Courier New', monospace; font-size: 12px;
|
|
color: #d1d5db; white-space: pre; overflow-x: auto; line-height: 1.6;
|
|
}
|
|
|
|
.main-area {
|
|
flex: 1; display: flex; flex-direction: column; min-width: 0;
|
|
}
|
|
.toolbar {
|
|
padding: 10px 16px; background: #0f172a; border-bottom: 1px solid #1f2937;
|
|
display: flex; align-items: center; gap: 12px; flex-shrink: 0;
|
|
}
|
|
.upload-btn {
|
|
padding: 6px 16px; background: #3b82f6; color: #fff; border: none; border-radius: 4px;
|
|
font-size: 13px; cursor: pointer; transition: background 0.2s;
|
|
}
|
|
.upload-btn:hover { background: #2563eb; }
|
|
.toolbar-info { font-size: 12px; color: #9ca3af; }
|
|
.toolbar-hint {
|
|
margin-left: auto; font-size: 12px; color: #6b7280;
|
|
}
|
|
.toolbar-hint kbd {
|
|
padding: 1px 5px; background: #1f2937; border: 1px solid #374151;
|
|
border-radius: 3px; font-size: 11px; font-family: inherit;
|
|
}
|
|
|
|
.canvas-area {
|
|
flex: 1; position: relative; overflow: hidden; background: #000;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
#imageCanvas { cursor: crosshair; }
|
|
.upload-placeholder {
|
|
position: absolute; display: flex; flex-direction: column; align-items: center;
|
|
gap: 12px; color: #6b7280; font-size: 14px;
|
|
}
|
|
.upload-placeholder svg { opacity: 0.3; }
|
|
|
|
.toast {
|
|
position: fixed; top: 20px; right: 20px; padding: 10px 18px;
|
|
background: #10b981; color: #fff; border-radius: 6px; font-size: 13px;
|
|
opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 999;
|
|
}
|
|
.toast.show { opacity: 1; }
|
|
|
|
#fileInput { display: none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<aside class="left-panel">
|
|
<div class="left-header">
|
|
<span>坐标数据</span>
|
|
<button id="copyAllBtn" class="copy-btn" style="background:none;border:none;color:#60a5fa;cursor:pointer;font-size:12px;">复制全部</button>
|
|
</div>
|
|
<div id="coordList" class="coord-list"></div>
|
|
</aside>
|
|
|
|
<div class="main-area">
|
|
<div class="toolbar">
|
|
<button class="upload-btn" id="uploadBtn">上传图片</button>
|
|
<input type="file" id="fileInput" accept=".jpg,.jpeg,.png" />
|
|
<span class="toolbar-info" id="imageInfo"></span>
|
|
<span class="toolbar-hint">
|
|
<kbd>点击</kbd> 标记点
|
|
<kbd>Backspace</kbd> 撤销
|
|
<kbd>Enter</kbd> 完成当前组
|
|
</span>
|
|
</div>
|
|
<div class="canvas-area" id="canvasArea">
|
|
<canvas id="imageCanvas"></canvas>
|
|
<div class="upload-placeholder" id="placeholder">
|
|
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
|
|
<circle cx="8.5" cy="8.5" r="1.5"/>
|
|
<polyline points="21 15 16 10 5 21"/>
|
|
</svg>
|
|
<span>点击「上传图片」开始</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<script>
|
|
const GROUP_COLORS = [
|
|
'#ef4444', '#3b82f6', '#10b981', '#f59e0b', '#8b5cf6',
|
|
'#ec4899', '#06b6d4', '#f97316', '#6366f1', '#14b8a6'
|
|
];
|
|
|
|
let groups = []; // [{points: [[x,y], ...]}, ...]
|
|
let currentPoints = []; // current group being edited
|
|
let image = null; // HTMLImageElement
|
|
let canvasScale = 1;
|
|
let canvasOffsetX = 0;
|
|
let canvasOffsetY = 0;
|
|
|
|
const canvas = document.getElementById('imageCanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
const canvasArea = document.getElementById('canvasArea');
|
|
const placeholder = document.getElementById('placeholder');
|
|
const fileInput = document.getElementById('fileInput');
|
|
const imageInfo = document.getElementById('imageInfo');
|
|
const coordList = document.getElementById('coordList');
|
|
const toast = document.getElementById('toast');
|
|
|
|
// --- Upload ---
|
|
document.getElementById('uploadBtn').addEventListener('click', () => fileInput.click());
|
|
fileInput.addEventListener('change', (e) => {
|
|
const file = e.target.files[0];
|
|
if (!file) return;
|
|
const ext = file.name.toLowerCase().split('.').pop();
|
|
if (!['jpg', 'jpeg', 'png'].includes(ext)) {
|
|
showToast('仅支持 JPG/PNG 格式', true);
|
|
return;
|
|
}
|
|
const reader = new FileReader();
|
|
reader.onload = (ev) => {
|
|
image = new Image();
|
|
image.onload = () => {
|
|
imageInfo.textContent = `${image.width} x ${image.height}`;
|
|
placeholder.style.display = 'none';
|
|
fitCanvas();
|
|
redraw();
|
|
};
|
|
image.src = ev.target.result;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
// Reset groups on new image
|
|
groups = [];
|
|
currentPoints = [];
|
|
renderCoordList();
|
|
});
|
|
|
|
// --- Canvas sizing ---
|
|
function fitCanvas() {
|
|
if (!image) return;
|
|
const areaW = canvasArea.clientWidth;
|
|
const areaH = canvasArea.clientHeight;
|
|
const imgAspect = image.width / image.height;
|
|
const areaAspect = areaW / areaH;
|
|
|
|
let drawW, drawH;
|
|
if (imgAspect > areaAspect) {
|
|
drawW = areaW;
|
|
drawH = areaW / imgAspect;
|
|
} else {
|
|
drawH = areaH;
|
|
drawW = areaH * imgAspect;
|
|
}
|
|
canvasScale = drawW / image.width;
|
|
canvasOffsetX = (areaW - drawW) / 2;
|
|
canvasOffsetY = (areaH - drawH) / 2;
|
|
|
|
canvas.width = areaW;
|
|
canvas.height = areaH;
|
|
canvas.style.width = areaW + 'px';
|
|
canvas.style.height = areaH + 'px';
|
|
}
|
|
|
|
window.addEventListener('resize', () => { fitCanvas(); redraw(); });
|
|
|
|
// --- Drawing ---
|
|
function redraw() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
if (!image) return;
|
|
|
|
// Draw image
|
|
ctx.drawImage(image, canvasOffsetX, canvasOffsetY, image.width * canvasScale, image.height * canvasScale);
|
|
|
|
// Draw completed groups
|
|
groups.forEach((group, gi) => {
|
|
const color = GROUP_COLORS[gi % GROUP_COLORS.length];
|
|
drawGroup(group.points, color);
|
|
});
|
|
|
|
// Draw current group
|
|
if (currentPoints.length > 0) {
|
|
const color = GROUP_COLORS[groups.length % GROUP_COLORS.length];
|
|
drawGroup(currentPoints, color, true);
|
|
}
|
|
}
|
|
|
|
function drawGroup(points, color, isCurrent) {
|
|
if (points.length === 0) return;
|
|
|
|
// Draw lines
|
|
if (points.length > 1) {
|
|
ctx.beginPath();
|
|
ctx.strokeStyle = color;
|
|
ctx.lineWidth = 2;
|
|
const p0 = toCanvas(points[0]);
|
|
ctx.moveTo(p0.x, p0.y);
|
|
for (let i = 1; i < points.length; i++) {
|
|
const p = toCanvas(points[i]);
|
|
ctx.lineTo(p.x, p.y);
|
|
}
|
|
ctx.stroke();
|
|
}
|
|
|
|
// Draw points
|
|
points.forEach((pt, i) => {
|
|
const p = toCanvas(pt);
|
|
ctx.beginPath();
|
|
ctx.arc(p.x, p.y, 5, 0, Math.PI * 2);
|
|
ctx.fillStyle = color;
|
|
ctx.fill();
|
|
ctx.strokeStyle = '#fff';
|
|
ctx.lineWidth = 1.5;
|
|
ctx.stroke();
|
|
|
|
// Label
|
|
ctx.fillStyle = '#fff';
|
|
ctx.font = '11px sans-serif';
|
|
ctx.fillText((i + 1).toString(), p.x + 7, p.y - 5);
|
|
});
|
|
|
|
// "editing" indicator for current group
|
|
if (isCurrent) {
|
|
const last = toCanvas(points[points.length - 1]);
|
|
ctx.beginPath();
|
|
ctx.arc(last.x, last.y, 10, 0, Math.PI * 2);
|
|
ctx.strokeStyle = color;
|
|
ctx.lineWidth = 1.5;
|
|
ctx.setLineDash([3, 3]);
|
|
ctx.stroke();
|
|
ctx.setLineDash([]);
|
|
}
|
|
}
|
|
|
|
function toCanvas(pt) {
|
|
return {
|
|
x: pt[0] * image.width * canvasScale + canvasOffsetX,
|
|
y: pt[1] * image.height * canvasScale + canvasOffsetY
|
|
};
|
|
}
|
|
|
|
function toNorm(cx, cy) {
|
|
return [
|
|
Math.round(((cx - canvasOffsetX) / (image.width * canvasScale)) * 1000) / 1000,
|
|
Math.round(((cy - canvasOffsetY) / (image.height * canvasScale)) * 1000) / 1000
|
|
];
|
|
}
|
|
|
|
// --- Click ---
|
|
canvas.addEventListener('click', (e) => {
|
|
if (!image) return;
|
|
const rect = canvas.getBoundingClientRect();
|
|
const cx = e.clientX - rect.left;
|
|
const cy = e.clientY - rect.top;
|
|
|
|
// Check within image bounds
|
|
const nx = (cx - canvasOffsetX) / (image.width * canvasScale);
|
|
const ny = (cy - canvasOffsetY) / (image.height * canvasScale);
|
|
if (nx < 0 || nx > 1 || ny < 0 || ny > 1) return;
|
|
|
|
const pt = toNorm(cx, cy);
|
|
currentPoints.push(pt);
|
|
redraw();
|
|
renderCoordList();
|
|
});
|
|
|
|
// --- Keyboard ---
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter') {
|
|
if (currentPoints.length === 0) return;
|
|
groups.push({ points: [...currentPoints] });
|
|
currentPoints = [];
|
|
redraw();
|
|
renderCoordList();
|
|
showToast(`第 ${groups.length} 组坐标已完成`);
|
|
} else if (e.key === 'Backspace') {
|
|
if (currentPoints.length > 0) {
|
|
currentPoints.pop();
|
|
redraw();
|
|
renderCoordList();
|
|
}
|
|
}
|
|
});
|
|
|
|
// --- Coord list ---
|
|
function renderCoordList() {
|
|
coordList.innerHTML = '';
|
|
if (groups.length === 0 && currentPoints.length === 0) {
|
|
coordList.innerHTML = '<div style="padding:16px;color:#4b5563;font-size:13px;text-align:center;">暂无坐标数据</div>';
|
|
return;
|
|
}
|
|
|
|
groups.forEach((group, gi) => {
|
|
const color = GROUP_COLORS[gi % GROUP_COLORS.length];
|
|
const div = document.createElement('div');
|
|
div.className = 'coord-group';
|
|
div.innerHTML = `
|
|
<div class="coord-group-header">
|
|
<span><span class="coord-group-color" style="background:${color}"></span>第 ${gi + 1} 组 (${group.points.length} 点)</span>
|
|
<div class="coord-group-actions">
|
|
<button class="copy-btn" data-group="${gi}" title="复制">复制</button>
|
|
<button class="del-btn" data-group="${gi}" title="删除">删除</button>
|
|
</div>
|
|
</div>
|
|
<pre>${formatYAML(group.points)}</pre>
|
|
`;
|
|
coordList.appendChild(div);
|
|
});
|
|
|
|
// Current editing group
|
|
if (currentPoints.length > 0) {
|
|
const gi = groups.length;
|
|
const color = GROUP_COLORS[gi % GROUP_COLORS.length];
|
|
const div = document.createElement('div');
|
|
div.className = 'coord-group';
|
|
div.style.borderColor = color;
|
|
div.innerHTML = `
|
|
<div class="coord-group-header">
|
|
<span><span class="coord-group-color" style="background:${color}"></span>第 ${gi + 1} 组 (编辑中, ${currentPoints.length} 点)</span>
|
|
</div>
|
|
<pre>${formatYAML(currentPoints)}</pre>
|
|
`;
|
|
coordList.appendChild(div);
|
|
}
|
|
|
|
// Bind copy/delete
|
|
coordList.querySelectorAll('.copy-btn[data-group]').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const gi = parseInt(btn.dataset.group);
|
|
copyText(formatYAML(groups[gi].points));
|
|
showToast('已复制到剪贴板');
|
|
});
|
|
});
|
|
coordList.querySelectorAll('.del-btn[data-group]').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const gi = parseInt(btn.dataset.group);
|
|
groups.splice(gi, 1);
|
|
redraw();
|
|
renderCoordList();
|
|
});
|
|
});
|
|
}
|
|
|
|
function formatYAML(points) {
|
|
return points.map(pt => `- [${pt[0]}, ${pt[1]}]`).join('\n');
|
|
}
|
|
|
|
// --- Copy all ---
|
|
document.getElementById('copyAllBtn').addEventListener('click', () => {
|
|
if (groups.length === 0) { showToast('暂无数据', true); return; }
|
|
const all = groups.map((g, i) => `# 第 ${i + 1} 组\n${formatYAML(g.points)}`).join('\n\n');
|
|
copyText(all);
|
|
showToast('已复制全部坐标');
|
|
});
|
|
|
|
// --- Utils ---
|
|
function copyText(text) {
|
|
navigator.clipboard.writeText(text).catch(() => {
|
|
const ta = document.createElement('textarea');
|
|
ta.value = text;
|
|
document.body.appendChild(ta);
|
|
ta.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(ta);
|
|
});
|
|
}
|
|
|
|
let toastTimer = null;
|
|
function showToast(msg, isError) {
|
|
toast.textContent = msg;
|
|
toast.style.background = isError ? '#ef4444' : '#10b981';
|
|
toast.classList.add('show');
|
|
clearTimeout(toastTimer);
|
|
toastTimer = setTimeout(() => toast.classList.remove('show'), 1800);
|
|
}
|
|
|
|
// Initial render
|
|
renderCoordList();
|
|
</script>
|
|
</body>
|
|
</html>
|