feat: add download route and view, implement image download functionality, and enhance QR code sharing in PickupView

src/views/PrintStepView.vue

@@ -31,10 +31,56 @@ onMounted(() => {
   // เริ่มนับถอยหลัง
   startCountdown()
 
-  // Load the final image from localStorage
-  finalImage.value = localStorage.getItem('photobooth-final-image');
+  // // Load the final image from localStorage
+  // finalImage.value = localStorage.getItem('photobooth-final-image');
+
+  // // Upload the final image to the server
+  // if (finalImage.value) {
+  //   uploadFinalImage(finalImage.value);
+  // }
 })
 
+const uploadFinalImage = async (imageDataUrl: string) => {
+  try {
+    // Compress the image first to reduce size
+    console.log('Original image size:', imageDataUrl.length);
+    const compressedImage = await compressImage(imageDataUrl, 0.8); // 80% quality
+    console.log('Compressed image size:', compressedImage.length);
+
+    // Convert compressed base64 data URL to Blob
+    const response = await fetch(compressedImage);
+    const blob = await response.blob();
+
+    // Create FormData
+    const formData = new FormData();
+    const file = new File([blob], 'photobooth-final.jpg', { type: 'image/jpeg' });
+    formData.append('profile_image', file, file.name);
+
+    // Upload to API
+    const uploadResponse = await fetch('https://api2.dekthai-online.com/g/upload/photobooth', {
+      method: 'POST',
+      body: formData
+    });
+
+    if (uploadResponse.ok) {
+      const result = await uploadResponse.json();
+      console.log('Upload successful:', result);
+
+      // Save the filename to localStorage
+      if (result.filename) {
+        localStorage.setItem('photobooth-uploaded-filename', result.filename);
+        console.log('Filename saved to localStorage:', result.filename);
+      }
+
+    } else {
+      console.error('Upload failed:', uploadResponse.status, uploadResponse.statusText);
+    }
+  } catch (error) {
+    console.error('Error uploading image:', error);
+  }
+};
+
+
 const startCountdown = () => {
   const timer = setInterval(() => {
     countdown.value--
@@ -232,12 +278,24 @@ const generateAndCacheImage = async () => {
     })
   }
 
-  // สร้าง PNG data URL และบันทึกใน localStorage
-  const dataUrl = canvas.toDataURL('image/png')
+  // สร้าง compressed JPEG data URL และบันทึกใน localStorage
+  const dataUrl = canvas.toDataURL('image/jpeg', 0.8) // 80% quality JPEG
 
   try {
     saveToLocalStorage('photobooth-final-image', dataUrl);
     finalImage.value = dataUrl;
+
+
+    // Load the final image from localStorage
+    finalImage.value = localStorage.getItem('photobooth-final-image');
+
+    // Upload the final image to the server
+    if (finalImage.value) {
+      uploadFinalImage(dataUrl);
+    }
+
+
+
   } catch (error) {
     if (error instanceof DOMException && error.name === 'QuotaExceededError') {
       console.error('localStorage quota exceeded for cached image')
@@ -311,9 +369,9 @@ onMounted(() => {
         <p>กำลังเตรียมไฟล์สำหรับดาวน์โหลด...</p>
       </div>
 
-      <div class="final-image-display">
+      <!-- <div class="final-image-display">
         <img v-if="finalImage" :src="finalImage" alt="Final Combined Image" />
-      </div>
+      </div> -->
 
 
       <div class="loading-indicator">