diff --git a/src/renderer/src/components/CameraCapture.vue b/src/renderer/src/components/CameraCapture.vue
index 051960d..c173567 100644
--- a/src/renderer/src/components/CameraCapture.vue
+++ b/src/renderer/src/components/CameraCapture.vue
@@ -72,10 +72,23 @@ function capture(): void {
canvas.height = video.videoHeight
const ctx = canvas.getContext('2d')
if (!ctx) return
+ // 这台设备的摄像头画面是倒置的(见下方 .cam-preview-video 的 CSS 旋转),
+ // 拍出来的照片也要同步转正,不然预览是正的、存下来的图是倒的
+ ctx.save()
+ ctx.translate(canvas.width, canvas.height)
+ ctx.rotate(Math.PI)
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
+ ctx.restore()
capturedDataUrl.value = canvas.toDataURL('image/jpeg', 0.85)
}
+function switchCamera(): void {
+ if (devices.value.length < 2) return
+ const idx = devices.value.findIndex((d) => d.deviceId === selectedDeviceId.value)
+ const nextIdx = (idx + 1) % devices.value.length
+ switchDevice(devices.value[nextIdx].deviceId)
+}
+
function retake(): void {
capturedDataUrl.value = ''
}
@@ -114,22 +127,23 @@ onUnmounted(() => stopStream())
{{ errorMessage }}
-
-
-
-
-
@@ -154,17 +168,25 @@ onUnmounted(() => stopStream())
width: 100%; max-height: 60vh; object-fit: contain;
background: #000; border-radius: var(--radius-sm);
}
+/* 这台设备的摄像头画面是倒置的,转正预览;capture() 里对拍照结果做了同样的旋转 */
+.cam-preview-video { transform: rotate(180deg); }
.cam-loading {
position: absolute; inset: 0; display: flex;
align-items: center; justify-content: center;
color: #fff; font-size: 15px; background: rgba(0,0,0,.35);
border-radius: var(--radius-sm);
}
+.cam-switch-btn {
+ position: absolute; top: 14px; right: 14px;
+ width: 44px; height: 44px; border-radius: 50%;
+ border: none; background: rgba(0,0,0,.45); color: #fff;
+ display: flex; align-items: center; justify-content: center;
+ cursor: pointer;
+}
+.cam-switch-btn:hover { background: rgba(0,0,0,.65); }
.cam-error {
color: var(--red); background: #FBEAE8;
border-radius: var(--radius-sm); padding: 12px 14px; font-size: 15px;
}
-.cam-device-row { display: flex; align-items: center; gap: 12px; }
-.cam-device-row .fl { flex-shrink: 0; font-size: 15px; color: var(--ink-2); }
.cam-actions { display: flex; justify-content: flex-end; gap: 12px; }