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

2026-01-17 13:20:17 +07:00
parent e90c06230b
commit 39afc25aba
5 changed files with 322 additions and 53 deletions
--- a/src/views/PickupView.vue
+++ b/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 = () => {
-  // ในโปรเจกต์จริงควรสร้าง canvas และ download เป็นไฟล์ภาพ
-  // ตัวอย่างนี้ download เป็น JSON ชั่วคราว
-  const data = {
-    photos: photos.value,
-    layout: layout.value,
-    frame: frame.value
+const downloadImage = async () => {
+  if (photos.value.length === 0) return
+
+  // สร้าง canvas สำหรับรวมรูป
+  const canvas = document.createElement('canvas')
+  const context = canvas.getContext('2d')
+
+  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 {
--- a/src/views/PrintStepView.vue
+++ b/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 {
--- a/src/views/ShootingView.vue
+++ b/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
+  }, 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%;
--- a/src/views/UploadView.vue
+++ b/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
-  Array.from(files).forEach(file => {
-    if (uploadedPhotos.value.length >= totalPhotos) return
+  // แปลงไฟล์เป็น base64 และครอบเป็น 3:4
+  for (const file of Array.from(files)) {
+    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 = ''
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -34,6 +34,9 @@ export default defineConfig({
      }
    })
  ],
+  server: {
+    allowedHosts: ['photobooth.lookmeblog.com']
+  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))