fix: align calibration clicks with displayed frame

web/src/main.js

@@ -325,13 +325,41 @@ function addPoint(event) {
     setStatus("请先从 RTSP 抓取一帧");
     return;
   }
-  const rect = els.canvas.getBoundingClientRect();
-  const x = clamp((event.clientX - rect.left) / rect.width);
-  const y = clamp((event.clientY - rect.top) / rect.height);
+  const imageRect = getCanvasImageRect();
+  const rawX = event.clientX - imageRect.left;
+  const rawY = event.clientY - imageRect.top;
+  if (rawX < 0 || rawY < 0 || rawX > imageRect.width || rawY > imageRect.height) {
+    setStatus("请点击截图实际显示区域内");
+    return;
+  }
+  const x = clamp(rawX / imageRect.width);
+  const y = clamp(rawY / imageRect.height);
   state.polygons[state.activeRegion].push({x: round(x), y: round(y)});
   render();
 }
 
+function getCanvasImageRect() {
+  const rect = els.canvas.getBoundingClientRect();
+  const canvasRatio = els.canvas.width / els.canvas.height;
+  const elementRatio = rect.width / rect.height;
+  if (elementRatio > canvasRatio) {
+    const width = rect.height * canvasRatio;
+    return {
+      left: rect.left + (rect.width - width) / 2,
+      top: rect.top,
+      width,
+      height: rect.height,
+    };
+  }
+  const height = rect.width / canvasRatio;
+  return {
+    left: rect.left,
+    top: rect.top + (rect.height - height) / 2,
+    width: rect.width,
+    height,
+  };
+}
+
 function undoPoint() {
   state.polygons[state.activeRegion].pop();
   render();