feat: optimize image handling by reducing canvas size and improving localStorage management

src/views/UploadView.vue

@@ -41,9 +41,9 @@ const cropImageTo34 = (imageSrc: string): Promise<string> => {
         cropY = (imgHeight - cropHeight) / 2
       }
 
-      // ตั้งค่าขนาด canvas เป็น 3:4 (720x960)
-      const finalWidth = 720
-      const finalHeight = 960
+      // ตั้งค่าขนาด canvas เป็น 3:4 (360x480) - ลดขนาดเพื่อป้องกัน localStorage quota exceeded
+      const finalWidth = 360
+      const finalHeight = 480
 
       canvas.width = finalWidth
       canvas.height = finalHeight
@@ -55,8 +55,8 @@ const cropImageTo34 = (imageSrc: string): Promise<string> => {
         0, 0, finalWidth, finalHeight // ตำแหน่งและขนาดใน canvas
       )
 
-      // แปลงเป็น base64
-      const croppedDataUrl = canvas.toDataURL('image/jpeg', 0.9)
+      // แปลงเป็น base64 ด้วย quality 0.7 เพื่อลดขนาด
+      const croppedDataUrl = canvas.toDataURL('image/jpeg', 0.7)
       resolve(croppedDataUrl)
     }
     img.src = imageSrc
@@ -103,9 +103,29 @@ const proceedToNext = () => {
     return
   }
 
-  // เก็บรูปภาพไว้ใน localStorage
-  localStorage.setItem('photobooth-photos', JSON.stringify(uploadedPhotos.value))
-  router.push('/printstep')
+  try {
+    // เคลียร์ cached images ที่เก่าออกก่อนเพื่อให้มีพื้นที่
+    const keysToRemove = []
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i)
+      if (key && (key.startsWith('photobooth-1x4-') || key.startsWith('photobooth-2x2-'))) {
+        keysToRemove.push(key)
+      }
+    }
+    keysToRemove.forEach(key => localStorage.removeItem(key))
+
+    // เก็บรูปภาพไว้ใน localStorage
+    localStorage.setItem('photobooth-photos', JSON.stringify(uploadedPhotos.value))
+    router.push('/printstep')
+  } catch (error) {
+    if (error instanceof DOMException && error.name === 'QuotaExceededError') {
+      alert('รูปภาพมีขนาดใหญ่เกินไป กรุณาเลือกภาพขนาดเล็กลงหรือจำนวนน้อยลง')
+      console.error('localStorage quota exceeded:', error)
+    } else {
+      console.error('Error saving photos:', error)
+      alert('เกิดข้อผิดพลาดในการบันทึกภาพ')
+    }
+  }
 }
 
 const goBack = () => {