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

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 = ''