From 0d6d08f9521cd393e5c921cae2d58225c5e57f76 Mon Sep 17 00:00:00 2001
From: "mrkad@rpi" <mrkad.siri@gmail.com>
Date: Sat, 17 Jan 2026 16:23:06 +0700
Subject: [PATCH] feat: optimize image handling by reducing canvas size and
 improving localStorage management

---
 src/views/PickupView.vue   | 295 +++++++++++++++++--------------------
 src/views/ShootingView.vue |  38 +++--
 src/views/UploadView.vue   |  36 ++++-
 3 files changed, 192 insertions(+), 177 deletions(-)

diff --git a/src/views/PickupView.vue b/src/views/PickupView.vue
index 36e054d..4d6bc4a 100644
--- a/src/views/PickupView.vue
+++ b/src/views/PickupView.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, computed, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
 const photos = ref<string[]>([])
 const layout = ref<'1x4' | '2x2'>('1x4')
 const frame = ref<number>(0)
-const shareUrl = ref('')
-const qrCodeUrl = ref('')
+const cachedImageUrl = ref('')
+const isGeneratingImage = ref(false)
+const hasError = ref(false)
 
 onMounted(() => {
   // โหลดข้อมูลจาก localStorage
@@ -27,8 +28,8 @@ onMounted(() => {
     frame.value = parseInt(savedFrame)
   }
 
-  // สร้าง URL สำหรับแชร์ (ในโปรเจกต์จริงควรอัพโหลดขึ้น cloud)
-  generateShareUrl()
+  // สร้าง PNG และบันทึกใน localStorage (ถ้ายังไม่มี)
+  generateAndCacheImage()
 })
 
 const getGridStyle = computed(() => {
@@ -38,7 +39,7 @@ const getGridStyle = computed(() => {
       gridTemplateColumns: '1fr',
       gridTemplateRows: 'repeat(4, 1fr)',
       gap: '8px',
-      aspectRatio: '1/2' // ทำให้แต่ละภาพยาวขึ้น (1:2 aspect ratio รวม)
+      aspectRatio: '1/1' // ทำให้แต่ละภาพยาวขึ้น (1:2 aspect ratio รวม)
     }
   } else {
     return {
@@ -51,50 +52,50 @@ const getGridStyle = computed(() => {
   }
 })
 
-const generateShareUrl = () => {
-  // ในโปรเจกต์จริง ควรอัพโหลดรูปขึ้น cloud และสร้าง URL
-  // ตัวอย่างนี้ใช้ data URL ชั่วคราว
-  const photoData = {
-    photos: photos.value,
-    layout: layout.value,
-    frame: frame.value,
-    timestamp: Date.now()
-  }
+const generateAndCacheImage = async () => {
+  try {
+    hasError.value = false
+    if (photos.value.length === 0) return
 
-  // เข้ารหัสข้อมูลเป็น base64 และสร้าง URL
-  const encodedData = btoa(JSON.stringify(photoData))
-  shareUrl.value = `${window.location.origin}/share/${encodedData}`
+    isGeneratingImage.value = true
 
-  // สร้าง QR code URL (ใช้ service ภายนอก)
-  qrCodeUrl.value = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(shareUrl.value)}`
-}
+    // สร้าง key สำหรับ localStorage
+    const storageKey = `photobooth-${layout.value}-${frame.value}-${photos.value.length}`
 
-const downloadImage = async () => {
-  if (photos.value.length === 0) return
+    // ตรวจสอบว่ามี PNG ที่สร้างไว้แล้วหรือไม่
+    const cachedImage = localStorage.getItem(storageKey)
+    if (cachedImage) {
+      cachedImageUrl.value = cachedImage
+      await nextTick()
+      return // มีแล้ว ไม่ต้องสร้างใหม่
+    }
 
-  // สร้าง canvas สำหรับรวมรูป
-  const canvas = document.createElement('canvas')
-  const context = canvas.getContext('2d')
+    // สร้าง canvas สำหรับรวมรูป
+    const canvas = document.createElement('canvas')
+    const context = canvas.getContext('2d')
 
-  if (!context) return
+    if (!context) {
+      throw new Error('Could not get canvas context')
+    }
 
-  // ขนาดรูปแต่ละภาพ (720x960 = 3:4)
-  const photoWidth = 720
-  const photoHeight = 960
+  // ขนาดรูปแต่ละภาพ (360x480 = 3:4) - ลดขนาดลงเพื่อป้องกันปัญหา canvas ใหญ่เกินไป
+  const photoWidth = 360
+  const photoHeight = 480
   const gap = 20 // ระยะห่างระหว่างรูป
 
   let canvasWidth, canvasHeight
 
   if (layout.value === '1x4') {
     // 1x4: 1 คอลัมน์ 4 แถว
-    canvasWidth = photoWidth
-    canvasHeight = (photoHeight * 4) + (gap * 3)
+    canvasWidth = photoWidth + 40
+    canvasHeight = (photoHeight * 4) + (gap * 3) + 40
   } else {
     // 2x2: 2 คอลัมน์ 2 แถว
-    canvasWidth = (photoWidth * 2) + gap
-    canvasHeight = (photoHeight * 2) + gap
+    canvasWidth = (photoWidth * 2) + gap + 40
+    canvasHeight = (photoHeight * 2) + gap + 40
   }
 
+  console.log('Canvas dimensions:', canvasWidth, 'x', canvasHeight)
   canvas.width = canvasWidth
   canvas.height = canvasHeight
 
@@ -103,8 +104,11 @@ const downloadImage = async () => {
 
   // วาดรูปภาพ
   for (let i = 0; i < photos.value.length; i++) {
+    const photoSrc = photos.value[i]
+    if (!photoSrc) continue
+
     const img = new Image()
-    img.src = photos.value[i]
+    img.src = photoSrc
 
     await new Promise((resolve) => {
       img.onload = () => {
@@ -126,22 +130,57 @@ const downloadImage = async () => {
         context.drawImage(img, x, y, photoWidth, photoHeight)
         resolve(void 0)
       }
+      img.onerror = () => {
+        console.error(`Failed to load image ${i}`)
+        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()}.png`
-      document.body.appendChild(a)
-      a.click()
-      document.body.removeChild(a)
-      URL.revokeObjectURL(url)
+  // สร้าง PNG data URL และบันทึกใน localStorage
+  const dataUrl = canvas.toDataURL('image/png')
+
+  try {
+    localStorage.setItem(storageKey, dataUrl)
+    cachedImageUrl.value = dataUrl
+    // ให้ Vue reactive update ก่อน
+    await nextTick()
+  } catch (error) {
+    if (error instanceof DOMException && error.name === 'QuotaExceededError') {
+      console.error('localStorage quota exceeded for cached image')
+      alert('ไม่สามารถบันทึกภาพได้เนื่องจากพื้นที่เก็บข้อมูลไม่เพียงพอ')
+    } else {
+      console.error('Error saving cached image:', error)
+      throw error
     }
-  }, 'image/png')
+  }
+  } catch (error) {
+    console.error('Error in generateAndCacheImage:', error)
+    hasError.value = true
+  } finally {
+    isGeneratingImage.value = false
+  }
+}
+
+const downloadImage = async () => {
+  if (photos.value.length === 0) return
+
+  // ตรวจสอบว่า cachedImageUrl มีหรือไม่ ถ้าไม่มีให้สร้างก่อน
+  if (!cachedImageUrl.value) {
+    await generateAndCacheImage()
+  }
+
+  // Download จาก cachedImageUrl
+  downloadFromDataUrl(cachedImageUrl.value, `photobooth-${Date.now()}.png`)
+}
+
+const downloadFromDataUrl = (dataUrl: string, filename: string) => {
+  const a = document.createElement('a')
+  a.href = dataUrl
+  a.download = filename
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
 }
 
 const drawFrameBackground = (context: CanvasRenderingContext2D, width: number, height: number, frameType: number) => {
@@ -178,29 +217,6 @@ const drawFrameBackground = (context: CanvasRenderingContext2D, width: number, h
   context.fillRect(0, 0, width, height)
 }
 
-const shareImage = async () => {
-  if (navigator.share) {
-    try {
-      await navigator.share({
-        title: 'รูปถ่ายจาก DekThai Photobooth',
-        text: 'ดูรูปถ่ายสุดพิเศษที่ฉันสร้าง!',
-        url: shareUrl.value
-      })
-    } catch (error) {
-      console.log('Error sharing:', error)
-      copyToClipboard()
-    }
-  } else {
-    copyToClipboard()
-  }
-}
-
-const copyToClipboard = () => {
-  navigator.clipboard.writeText(shareUrl.value).then(() => {
-    alert('คัดลอกลิงก์แล้ว! สามารถแชร์ให้เพื่อนได้')
-  })
-}
-
 const startOver = () => {
   // เคลียร์ข้อมูลและกลับไปหน้าแรก
   localStorage.removeItem('photobooth-photos')
@@ -220,14 +236,14 @@ const startOver = () => {
     <section class="result-section">
       <div class="photo-result">
         <div class="photo-frame" :class="`frame-${frame}`">
-          <div class="photo-grid" :style="getGridStyle">
-            <div
-              v-for="(photo, index) in photos"
-              :key="index"
-              class="photo-cell"
-            >
-              <img :src="photo" :alt="`Photo ${index + 1}`" />
-            </div>
+          <div v-if="isGeneratingImage && !cachedImageUrl" class="loading-indicator">
+            <div class="spinner"></div>
+            <p>กำลังสร้างภาพ...</p>
+          </div>
+
+          <img v-else-if="cachedImageUrl" :src="cachedImageUrl" alt="Combined Photo" class="combined-image" />
+          <div v-else-if="hasError" class="error-message">
+            <p>ไม่สามารถสร้างภาพได้</p>
           </div>
         </div>
       </div>
@@ -239,22 +255,6 @@ const startOver = () => {
           <span class="button-icon">📥</span>
           ดาวน์โหลด
         </button>
-
-        <button @click="shareImage" class="share-button">
-          <span class="button-icon">📤</span>
-          แชร์
-        </button>
-      </div>
-    </section>
-
-    <section class="qr-section">
-      <h3>สแกน QR Code เพื่อดูรูป</h3>
-      <div class="qr-container">
-        <img :src="qrCodeUrl" alt="QR Code" class="qr-code" />
-        <p class="qr-text">{{ shareUrl }}</p>
-        <button @click="copyToClipboard" class="copy-link-button">
-          คัดลอกลิงก์
-        </button>
       </div>
     </section>
 
@@ -328,6 +328,46 @@ const startOver = () => {
   display: block;
 }
 
+.combined-image {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+  display: block;
+}
+
+.loading-indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  color: #666;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #007bff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 1rem;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.error-message {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  color: #dc3545;
+  text-align: center;
+}
+
 .actions-section {
   margin-bottom: 2rem;
 }
@@ -338,7 +378,7 @@ const startOver = () => {
   justify-content: center;
 }
 
-.download-button, .share-button {
+.download-button {
   background: #007bff;
   color: white;
   border: none;
@@ -354,77 +394,16 @@ const startOver = () => {
   box-shadow: 0 4px 15px rgba(0,123,255,0.3);
 }
 
-.share-button {
-  background: #28a745;
-  box-shadow: 0 4px 15px rgba(40,167,69,0.3);
-}
-
 .download-button:hover {
   background: #0056b3;
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(0,123,255,0.4);
 }
 
-.share-button:hover {
-  background: #218838;
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(40,167,69,0.4);
-}
-
 .button-icon {
   font-size: 1.2rem;
 }
 
-.qr-section {
-  text-align: center;
-  margin-bottom: 2rem;
-}
-
-.qr-section h3 {
-  color: #333;
-  margin-bottom: 1rem;
-}
-
-.qr-container {
-  background: white;
-  padding: 2rem;
-  border-radius: 16px;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-  max-width: 300px;
-  margin: 0 auto;
-}
-
-.qr-code {
-  width: 150px;
-  height: 150px;
-  margin-bottom: 1rem;
-}
-
-.qr-text {
-  font-size: 0.9rem;
-  color: #666;
-  word-break: break-all;
-  margin-bottom: 1rem;
-  padding: 0.5rem;
-  background: #f8f9fa;
-  border-radius: 8px;
-}
-
-.copy-link-button {
-  background: #6c757d;
-  color: white;
-  border: none;
-  padding: 0.5rem 1rem;
-  border-radius: 20px;
-  cursor: pointer;
-  font-size: 0.9rem;
-  transition: all 0.3s ease;
-}
-
-.copy-link-button:hover {
-  background: #5a6268;
-}
-
 .footer-section {
   margin-top: 2rem;
 }
@@ -449,10 +428,6 @@ const startOver = () => {
 }
 
 /* Frame styles */
-.frame-0 {
-  /* Classic frame - default white */
-}
-
 .frame-1 {
   /* Modern frame */
   background: linear-gradient(45deg, #667eea, #764ba2);
diff --git a/src/views/ShootingView.vue b/src/views/ShootingView.vue
index 5939610..af63ad5 100644
--- a/src/views/ShootingView.vue
+++ b/src/views/ShootingView.vue
@@ -81,9 +81,9 @@ const captureSinglePhoto = () => {
     cropY = (videoHeight - 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
@@ -95,8 +95,8 @@ const captureSinglePhoto = () => {
     0, 0, finalWidth, finalHeight // ตำแหน่งและขนาดใน canvas
   )
 
-  // แปลงเป็น base64
-  const photoDataUrl = canvas.toDataURL('image/jpeg', 0.9)
+  // แปลงเป็น base64 ด้วย quality 0.7 เพื่อลดขนาด
+  const photoDataUrl = canvas.toDataURL('image/jpeg', 0.7)
   photos.value.push(photoDataUrl)
   currentPhotoIndex.value++
 
@@ -145,10 +145,30 @@ const startAutoCapture = () => {
 }
 
 const proceedToNext = () => {
-  // เก็บรูปภาพไว้ใน localStorage
-  localStorage.setItem('photobooth-photos', JSON.stringify(photos.value))
-  stopCamera()
-  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(photos.value))
+    stopCamera()
+    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 = () => {
diff --git a/src/views/UploadView.vue b/src/views/UploadView.vue
index 036dac3..2cb3969 100644
--- a/src/views/UploadView.vue
+++ b/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 = () => {