feat: enhance photo capturing and uploading features with auto-capture and image cropping

src/views/ShootingView.vue

@@ -8,6 +8,8 @@ const canvasRef = ref<HTMLCanvasElement>()
 const photos = ref<string[]>([])
 const currentPhotoIndex = ref(0)
 const isCapturing = ref(false)
+const isAutoCapturing = ref(false)
+const countdown = ref(0)
 const stream = ref<MediaStream | null>(null)
 
 const totalPhotos = 4
@@ -25,8 +27,8 @@ const startCamera = async () => {
     const constraints = {
       video: {
         facingMode: 'user',
-        width: { ideal: 1280 },
-        height: { ideal: 720 }
+        width: { ideal: 720 },
+        height: { ideal: 960 }
       }
     }
 
@@ -47,7 +49,7 @@ const stopCamera = () => {
   }
 }
 
-const capturePhoto = () => {
+const captureSinglePhoto = () => {
   if (!videoRef.value || !canvasRef.value || isCapturing.value) return
 
   isCapturing.value = true
@@ -58,26 +60,88 @@ const capturePhoto = () => {
 
   if (!context) return
 
-  // ตั้งค่าขนาด canvas ให้ตรงกับ video
-  canvas.width = video.videoWidth
-  canvas.height = video.videoHeight
+  const videoWidth = video.videoWidth
+  const videoHeight = video.videoHeight
 
-  // วาดภาพจาก video ไปยัง canvas
-  context.drawImage(video, 0, 0, canvas.width, canvas.height)
+  // คำนวณขนาดสำหรับ 3:4 aspect ratio
+  const targetAspectRatio = 3/4 // width:height = 3:4
+  let cropWidth, cropHeight, cropX, cropY
+
+  if (videoWidth / videoHeight > targetAspectRatio) {
+    // ภาพกว้างกว่าที่ต้องการ - ครอบด้านข้าง
+    cropHeight = videoHeight
+    cropWidth = videoHeight * targetAspectRatio
+    cropX = (videoWidth - cropWidth) / 2
+    cropY = 0
+  } else {
+    // ภาพสูงกว่าที่ต้องการ - ครอบด้านบน/ล่าง
+    cropWidth = videoWidth
+    cropHeight = videoWidth / targetAspectRatio
+    cropX = 0
+    cropY = (videoHeight - cropHeight) / 2
+  }
+
+  // ตั้งค่าขนาด canvas เป็น 3:4 (720x960)
+  const finalWidth = 720
+  const finalHeight = 960
+
+  canvas.width = finalWidth
+  canvas.height = finalHeight
+
+  // วาดภาพที่ครอบแล้วไปยัง canvas
+  context.drawImage(
+    video,
+    cropX, cropY, cropWidth, cropHeight, // ตำแหน่งและขนาดที่ครอบจาก video
+    0, 0, finalWidth, finalHeight // ตำแหน่งและขนาดใน canvas
+  )
 
   // แปลงเป็น base64
   const photoDataUrl = canvas.toDataURL('image/jpeg', 0.9)
   photos.value.push(photoDataUrl)
   currentPhotoIndex.value++
 
-  // ถ่ายครบ 4 รูปแล้ว ไปหน้าถัดไป
-  if (currentPhotoIndex.value >= totalPhotos) {
-    proceedToNext()
-  }
-
   setTimeout(() => {
     isCapturing.value = false
-  }, 500)
+  }, 200)
+}
+
+const startAutoCapture = () => {
+  if (isAutoCapturing.value) return
+
+  isAutoCapturing.value = true
+  photos.value = []
+  currentPhotoIndex.value = 0
+
+  const captureNextPhoto = () => {
+    if (currentPhotoIndex.value >= totalPhotos) {
+      // ถ่ายครบแล้ว ไปหน้าถัดไป
+      isAutoCapturing.value = false
+      proceedToNext()
+      return
+    }
+
+    // นับถอยหลังสำหรับรูปปัจจุบัน
+    countdown.value = 3
+
+    const countdownInterval = setInterval(() => {
+      countdown.value--
+      if (countdown.value <= 0) {
+        clearInterval(countdownInterval)
+        countdown.value = 0
+
+        // ถ่ายภาพ
+        captureSinglePhoto()
+
+        // ถ่ายรูปต่อไปหลังจาก delay สั้นๆ
+        setTimeout(() => {
+          captureNextPhoto()
+        }, 500)
+      }
+    }, 1000)
+  }
+
+  // เริ่มถ่ายรูปแรก
+  captureNextPhoto()
 }
 
 const proceedToNext = () => {
@@ -95,6 +159,8 @@ const goBack = () => {
 const retakePhoto = () => {
   photos.value = []
   currentPhotoIndex.value = 0
+  isAutoCapturing.value = false
+  countdown.value = 0
 }
 </script>
 
@@ -121,22 +187,29 @@ const retakePhoto = () => {
           <div class="capture-guide">
             <div class="guide-frame"></div>
           </div>
+
+          <!-- Countdown overlay -->
+          <div v-if="countdown > 0" class="countdown-overlay">
+            <div class="countdown-info">รูปที่ {{ currentPhotoIndex + 1 }}</div>
+            <div class="countdown-number">{{ countdown }}</div>
+          </div>
         </div>
       </div>
 
       <div class="controls">
         <button
-          @click="capturePhoto"
-          :disabled="isCapturing"
+          @click="startAutoCapture"
+          :disabled="isAutoCapturing || currentPhotoIndex >= totalPhotos"
           class="capture-button"
-          :class="{ capturing: isCapturing }"
+          :class="{ capturing: isAutoCapturing }"
         >
-          <span v-if="!isCapturing">📷 ถ่ายภาพ</span>
-          <span v-else>กำลังถ่าย...</span>
+          <span v-if="!isAutoCapturing && currentPhotoIndex === 0">📷 ถ่ายทั้ง 4 รูป</span>
+          <span v-else-if="isAutoCapturing">กำลังถ่าย...</span>
+          <span v-else>ถ่ายเสร็จแล้ว</span>
         </button>
 
         <button
-          v-if="currentPhotoIndex > 0 && currentPhotoIndex < totalPhotos"
+          v-if="currentPhotoIndex > 0 && !isAutoCapturing"
           @click="retakePhoto"
           class="retake-button"
         >
@@ -211,8 +284,8 @@ const retakePhoto = () => {
 .camera-container {
   position: relative;
   width: 100%;
-  max-width: 500px;
-  aspect-ratio: 4/3;
+  max-width: 400px;
+  aspect-ratio: 3/4;
   border-radius: 16px;
   overflow: hidden;
   box-shadow: 0 8px 32px rgba(0,0,0,0.3);
@@ -237,6 +310,36 @@ const retakePhoto = () => {
   pointer-events: none;
 }
 
+.countdown-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  animation: countdownFade 1s ease-in-out;
+}
+
+.countdown-info {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: white;
+  margin-bottom: 1rem;
+  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+}
+
+.countdown-number {
+  font-size: 8rem;
+  font-weight: bold;
+  color: white;
+  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+  animation: countdownPulse 1s ease-in-out;
+}
+
 .capture-guide {
   width: 100%;
   height: 100%;
@@ -319,8 +422,8 @@ const retakePhoto = () => {
 
 .preview-item {
   position: relative;
-  width: 80px;
-  height: 80px;
+  width: 60px;
+  aspect-ratio: 3/4;
   border-radius: 8px;
   overflow: hidden;
 }
@@ -353,6 +456,21 @@ const retakePhoto = () => {
   100% { transform: scale(1); }
 }
 
+@keyframes countdownFade {
+  0% { opacity: 0; }
+  10% { opacity: 1; }
+  90% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+@keyframes countdownPulse {
+  0% { transform: scale(0.8); opacity: 0; }
+  20% { transform: scale(1.2); opacity: 1; }
+  50% { transform: scale(1); }
+  80% { transform: scale(1.1); }
+  100% { transform: scale(1); opacity: 0; }
+}
+
 @media (max-width: 768px) {
   .camera-container {
     max-width: 100%;