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

src/views/PickupView.vue

@@ -37,14 +37,16 @@ const getGridStyle = computed(() => {
       display: 'grid',
       gridTemplateColumns: '1fr',
       gridTemplateRows: 'repeat(4, 1fr)',
-      gap: '8px'
+      gap: '8px',
+      aspectRatio: '1/2' // ทำให้แต่ละภาพยาวขึ้น (1:2 aspect ratio รวม)
     }
   } else {
     return {
       display: 'grid',
       gridTemplateColumns: 'repeat(2, 1fr)',
       gridTemplateRows: 'repeat(2, 1fr)',
-      gap: '8px'
+      gap: '8px',
+      aspectRatio: '1/1' // 2x2 เป็น square
     }
   }
 })
@@ -67,24 +69,113 @@ const generateShareUrl = () => {
   qrCodeUrl.value = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(shareUrl.value)}`
 }
 
-const downloadImage = () => {
+const downloadImage = async () => {
-  // ในโปรเจกต์จริงควรสร้าง canvas และ download เป็นไฟล์ภาพ
+  if (photos.value.length === 0) return
-  // ตัวอย่างนี้ download เป็น JSON ชั่วคราว
+
-  const data = {
+  // สร้าง canvas สำหรับรวมรูป
-    photos: photos.value,
+  const canvas = document.createElement('canvas')
-    layout: layout.value,
+  const context = canvas.getContext('2d')
-    frame: frame.value
+
+  if (!context) return
+
+  // ขนาดรูปแต่ละภาพ (720x960 = 3:4)
+  const photoWidth = 720
+  const photoHeight = 960
+  const gap = 20 // ระยะห่างระหว่างรูป
+
+  let canvasWidth, canvasHeight
+
+  if (layout.value === '1x4') {
+    // 1x4: 1 คอลัมน์ 4 แถว
+    canvasWidth = photoWidth
+    canvasHeight = (photoHeight * 4) + (gap * 3)
+  } else {
+    // 2x2: 2 คอลัมน์ 2 แถว
+    canvasWidth = (photoWidth * 2) + gap
+    canvasHeight = (photoHeight * 2) + gap
   }
 
-  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
+  canvas.width = canvasWidth
+  canvas.height = canvasHeight
+
+  // วาด background ตาม frame
+  drawFrameBackground(context, canvasWidth, canvasHeight, frame.value)
+
+  // วาดรูปภาพ
+  for (let i = 0; i < photos.value.length; i++) {
+    const img = new Image()
+    img.src = photos.value[i]
+
+    await new Promise((resolve) => {
+      img.onload = () => {
+        let x, y
+
+        if (layout.value === '1x4') {
+          // 1x4 layout
+          x = 0
+          y = i * (photoHeight + gap)
+        } else {
+          // 2x2 layout
+          const col = i % 2
+          const row = Math.floor(i / 2)
+          x = col * (photoWidth + gap)
+          y = row * (photoHeight + gap)
+        }
+
+        // วาดรูปภาพ
+        context.drawImage(img, x, y, photoWidth, photoHeight)
+        resolve(void 0)
+      }
+    })
+  }
+
+  // สร้าง PNG และ download
+  canvas.toBlob((blob) => {
+    if (blob) {
       const url = URL.createObjectURL(blob)
       const a = document.createElement('a')
       a.href = url
-  a.download = `photobooth-${Date.now()}.json`
+      a.download = `photobooth-${Date.now()}.png`
       document.body.appendChild(a)
       a.click()
       document.body.removeChild(a)
       URL.revokeObjectURL(url)
+    }
+  }, 'image/png')
+}
+
+const drawFrameBackground = (context: CanvasRenderingContext2D, width: number, height: number, frameType: number) => {
+  // วาด background ตาม frame type
+  switch (frameType) {
+    case 0: // Classic - white
+      context.fillStyle = '#ffffff'
+      break
+    case 1: // Modern - gradient
+      const gradient1 = context.createLinearGradient(0, 0, width, height)
+      gradient1.addColorStop(0, '#667eea')
+      gradient1.addColorStop(1, '#764ba2')
+      context.fillStyle = gradient1
+      break
+    case 2: // Vintage - gradient
+      const gradient2 = context.createLinearGradient(0, 0, width, height)
+      gradient2.addColorStop(0, '#f093fb')
+      gradient2.addColorStop(1, '#f5576c')
+      context.fillStyle = gradient2
+      break
+    case 3: // Colorful - gradient
+      const gradient3 = context.createLinearGradient(0, 0, width, height)
+      gradient3.addColorStop(0, '#4facfe')
+      gradient3.addColorStop(1, '#00f2fe')
+      context.fillStyle = gradient3
+      break
+    case 4: // Minimal - light gray
+      context.fillStyle = '#f8f9fa'
+      break
+    default:
+      context.fillStyle = '#ffffff'
+  }
+
+  context.fillRect(0, 0, width, height)
 }
 
 const shareImage = async () => {
@@ -223,7 +314,6 @@ const startOver = () => {
   background: #f8f9fa;
   border-radius: 8px;
   padding: 12px;
-  aspect-ratio: 3/4;
 }
 
 .photo-cell {

src/views/PrintStepView.vue

@@ -52,14 +52,16 @@ const getGridStyle = () => {
       display: 'grid',
       gridTemplateColumns: '1fr',
       gridTemplateRows: 'repeat(4, 1fr)',
-      gap: '8px'
+      gap: '8px',
+      aspectRatio: '1/5' // ทำให้แต่ละภาพยาวขึ้น (1:2 aspect ratio รวม)
     }
   } else {
     return {
       display: 'grid',
       gridTemplateColumns: 'repeat(2, 1fr)',
       gridTemplateRows: 'repeat(2, 1fr)',
-      gap: '8px'
+      gap: '8px',
+      aspectRatio: '1/1' // 2x2 เป็น square
     }
   }
 }
@@ -194,7 +196,6 @@ const getGridStyle = () => {
   background: #f8f9fa;
   border-radius: 8px;
   padding: 12px;
-  aspect-ratio: 3/4;
 }
 
 .photo-cell {

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 },
+        width: { ideal: 720 },
-        height: { 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
+  const videoWidth = video.videoWidth
-  canvas.width = video.videoWidth
+  const videoHeight = video.videoHeight
-  canvas.height = video.videoHeight
 
-  // วาดภาพจาก video ไปยัง canvas
+  // คำนวณขนาดสำหรับ 3:4 aspect ratio
-  context.drawImage(video, 0, 0, canvas.width, canvas.height)
+  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
+  }, 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"
+          @click="startAutoCapture"
-          :disabled="isCapturing"
+          :disabled="isAutoCapturing || currentPhotoIndex >= totalPhotos"
           class="capture-button"
-          :class="{ capturing: isCapturing }"
+          :class="{ capturing: isAutoCapturing }"
         >
-          <span v-if="!isCapturing">📷 ถ่ายภาพ</span>
+          <span v-if="!isAutoCapturing && currentPhotoIndex === 0">📷 ถ่ายทั้ง 4 รูป</span>
-          <span v-else>กำลังถ่าย...</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;
+  max-width: 400px;
-  aspect-ratio: 4/3;
+  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;
+  width: 60px;
-  height: 80px;
+  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%;

src/views/UploadView.vue

@@ -8,29 +8,86 @@ const fileInputRef = ref<HTMLInputElement>()
 
 const totalPhotos = 4
 
+const cropImageTo34 = (imageSrc: string): Promise<string> => {
+  return new Promise((resolve) => {
+    const img = new Image()
+    img.onload = () => {
+      const canvas = document.createElement('canvas')
+      const context = canvas.getContext('2d')
+
+      if (!context) {
+        resolve(imageSrc)
+        return
+      }
+
+      const imgWidth = img.width
+      const imgHeight = img.height
+
+      // คำนวณขนาดสำหรับ 3:4 aspect ratio
+      const targetAspectRatio = 3/4 // width:height = 3:4
+      let cropWidth, cropHeight, cropX, cropY
+
+      if (imgWidth / imgHeight > targetAspectRatio) {
+        // ภาพกว้างกว่าที่ต้องการ - ครอบด้านข้าง
+        cropHeight = imgHeight
+        cropWidth = imgHeight * targetAspectRatio
+        cropX = (imgWidth - cropWidth) / 2
+        cropY = 0
+      } else {
+        // ภาพสูงกว่าที่ต้องการ - ครอบด้านบน/ล่าง
+        cropWidth = imgWidth
+        cropHeight = imgWidth / targetAspectRatio
+        cropX = 0
+        cropY = (imgHeight - cropHeight) / 2
+      }
+
+      // ตั้งค่าขนาด canvas เป็น 3:4 (720x960)
+      const finalWidth = 720
+      const finalHeight = 960
+
+      canvas.width = finalWidth
+      canvas.height = finalHeight
+
+      // วาดภาพที่ครอบแล้วไปยัง canvas
+      context.drawImage(
+        img,
+        cropX, cropY, cropWidth, cropHeight, // ตำแหน่งและขนาดที่ครอบจากภาพต้นฉบับ
+        0, 0, finalWidth, finalHeight // ตำแหน่งและขนาดใน canvas
+      )
+
+      // แปลงเป็น base64
+      const croppedDataUrl = canvas.toDataURL('image/jpeg', 0.9)
+      resolve(croppedDataUrl)
+    }
+    img.src = imageSrc
+  })
+}
+
 const triggerFileInput = () => {
   fileInputRef.value?.click()
 }
 
-const handleFileSelect = (event: Event) => {
+const handleFileSelect = async (event: Event) => {
   const target = event.target as HTMLInputElement
   const files = target.files
 
   if (!files) return
 
-  // แปลงไฟล์เป็น base64
+  // แปลงไฟล์เป็น base64 และครอบเป็น 3:4
-  Array.from(files).forEach(file => {
+  for (const file of Array.from(files)) {
-    if (uploadedPhotos.value.length >= totalPhotos) return
+    if (uploadedPhotos.value.length >= totalPhotos) break
 
     const reader = new FileReader()
-    reader.onload = (e) => {
+    reader.onload = async (e) => {
       const result = e.target?.result as string
       if (result) {
-        uploadedPhotos.value.push(result)
+        // ครอบภาพให้เป็น 3:4 ก่อนเก็บ
+        const croppedImage = await cropImageTo34(result)
+        uploadedPhotos.value.push(croppedImage)
       }
     }
     reader.readAsDataURL(file)
-  })
+  }
 
   // เคลียร์ input
   target.value = ''

vite.config.ts

@@ -34,6 +34,9 @@ export default defineConfig({
       }
     })
   ],
+  server: {
+    allowedHosts: ['photobooth.lookmeblog.com']
+  },
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))