feat: adjust photo capture effects and improve image quality in ShootingView

README.md

@@ -40,3 +40,9 @@ npm run dev
 ```sh
 npm run build
 ```
+
+### How to Upload to server  
+
+```sh
+scp -r dist/ dekthai:/srv/www/html/dekthai/
+```

docker-compose.yml

@@ -0,0 +1,12 @@
+version: '3.8'
+
+services:
+  photobooth:
+    image: nginx:alpine
+    container_name: photobooth
+    volumes:
+      - ./dist:/usr/share/nginx/html
+      - ./nginx.conf:/etc/nginx/conf.d/default.conf
+    ports:
+      - '8080:80'
+    restart: unless-stopped

nginx.conf

@@ -0,0 +1,51 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Enable gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_types
+        text/plain
+        text/css
+        text/xml
+        text/javascript
+        application/javascript
+        application/xml+rss
+        application/json;
+
+    # Handle static assets with caching
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+        try_files $uri =404;
+    }
+
+    # Handle service worker
+    location /sw.js {
+        add_header Cache-Control "no-cache";
+        try_files $uri =404;
+    }
+
+    # Handle manifest
+    location /manifest.webmanifest {
+        add_header Content-Type "application/manifest+json";
+        try_files $uri =404;
+    }
+
+    # Handle all other routes - fallback to index.html for SPA routing
+    location / {
+        try_files $uri $uri/ /index.html;
+        add_header Cache-Control "no-cache, no-store, must-revalidate";
+        add_header Pragma "no-cache";
+        add_header Expires "0";
+    }
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+}

public/icon-192x192.svg

@@ -1,4 +0,0 @@
-<svg width="192" height="192" xmlns="http://www.w3.org/2000/svg">
-  <rect width="192" height="192" fill="#667eea" rx="24"/>
-  <text x="96" y="120" font-family="Arial" font-size="72" fill="white" text-anchor="middle">📷</text>
-</svg>

src/router/index.ts

@@ -39,6 +39,11 @@ const router = createRouter({
       name: 'pickup',
       component: () => import('../views/PickupView.vue'),
     },
+    {
+      path: '/download',
+      name: 'download',
+      component: () => import('../views/DownloadView.vue'),
+    },
   ],
 })
 

src/views/DownloadView.vue

@@ -0,0 +1,310 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+const imageParam = ref('')
+const hasError = ref(false)
+const isDownloading = ref(false)
+const downloadSuccess = ref(false)
+
+const imageUrl = computed(() => {
+  if (imageParam.value) {
+    return `https://assets.dekthai-online.com/static/photobooth/${imageParam.value}`
+  }
+  return ''
+})
+
+const downloadImage = async () => {
+  if (!imageUrl.value || isDownloading.value) return
+
+  isDownloading.value = true
+  downloadSuccess.value = false
+
+  try {
+    // Create a temporary link element for download
+    const link = document.createElement('a')
+    link.href = imageUrl.value
+    link.download = imageParam.value || 'photobooth-image.jpg'
+    link.style.display = 'none'
+
+    // Add to DOM, click, and remove
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+
+    // Show success message
+    downloadSuccess.value = true
+
+    // Hide success message after 3 seconds
+    setTimeout(() => {
+      downloadSuccess.value = false
+    }, 3000)
+
+  } catch (error) {
+    console.error('Download failed:', error)
+    hasError.value = true
+  } finally {
+    isDownloading.value = false
+  }
+}
+
+const startOver = () => {
+  // เคลียร์ข้อมูลและกลับไปหน้าแรก
+  localStorage.removeItem('photobooth-photos')
+  localStorage.removeItem('photobooth-layout')
+  localStorage.removeItem('photobooth-frame')
+  localStorage.removeItem('photobooth-uploaded-filename')
+  router.push('/')
+}
+
+onMounted(() => {
+  // Get image parameter from URL query
+  const image = route.query.image as string
+  if (image) {
+    imageParam.value = image
+  } else {
+    hasError.value = true
+  }
+})
+</script>
+
+<template>
+  <div class="download-container">
+    <header class="header">
+      <h1>ดาวน์โหลดรูปภาพ</h1>
+      <p>รูปภาพของคุณพร้อมให้ดาวน์โหลด</p>
+    </header>
+
+    <section v-if="!hasError && imageUrl" class="download-section">
+        <div class="download-actions">
+
+        <button @click="downloadImage" :disabled="isDownloading" class="start-over-button">
+          <span v-if="isDownloading" class="button-icon">⏳</span>
+          <span v-else class="button-icon">📥</span>
+          {{ isDownloading ? 'กำลังดาวน์โหลด...' : 'ดาวน์โหลดรูปภาพ' }}
+        </button>
+        &emsp;
+        <button @click="startOver" class="start-over-button">
+          เริ่มใหม่
+        </button>
+        
+        <div v-if="downloadSuccess" class="success-message">
+          ✅ ดาวน์โหลดสำเร็จ! ไฟล์ได้บันทึกในเครื่องของคุณแล้ว
+        </div>
+      </div>
+
+      <div class="additional-actions">
+        
+      </div>
+
+      <div class="image-display">
+        <img :src="imageUrl" alt="Photo for download" class="download-image" @error="hasError = true" />
+      </div>
+
+
+    </section>
+
+    <section v-else class="error-section">
+      <div class="error-message">
+        <h2>ไม่พบรูปภาพ</h2>
+        <p>ไม่สามารถโหลดรูปภาพได้ กรุณาตรวจสอบลิงก์อีกครั้ง</p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+@import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Old+Standard+TT&display=swap');
+
+.download-container {
+  min-height: 100vh;
+  padding: 1.5rem;
+  background: #fdfaf6;
+  color: #3e2723;
+  font-family: 'Old Standard TT', serif;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 2.5rem;
+}
+
+.header h1 {
+  font-size: 2.5rem;
+  color: #5d4037;
+  margin-bottom: 0.5rem;
+  font-family: 'Crete Round', serif;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+}
+
+.header p {
+  color: #6d4c41;
+  font-size: 1.1rem;
+}
+
+.download-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+}
+
+.image-display {
+  background: #e0d8cf;
+  padding: 15px;
+  border-radius: 8px;
+  box-shadow: 0 5px 20px rgba(0,0,0,0.15);
+  border: 4px solid #a1887f;
+}
+
+.download-image {
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+  display: block;
+  filter: sepia(0.1) brightness(0.95);
+  max-height: 70vh;
+}
+
+.download-actions {
+  text-align: center;
+}
+
+.download-button {
+  background: #8d6e63;
+  color: #fdfaf6;
+  border: 2px solid #795548;
+  padding: 1rem 2.5rem;
+  font-size: 1.2rem;
+  font-weight: bold;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+  font-family: 'Crete Round', serif;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.download-button:hover {
+  background: #795548;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
+}
+
+.button-icon {
+  font-size: 1.5rem;
+}
+
+.error-section {
+  text-align: center;
+  background: #e0d8cf;
+  padding: 2rem;
+  border-radius: 12px;
+  box-shadow: 0 5px 20px rgba(0,0,0,0.15);
+  border: 2px solid #bcaaa4;
+  max-width: 500px;
+}
+
+.error-message h2 {
+  color: #d32f2f;
+  font-size: 2rem;
+  margin-bottom: 1rem;
+  font-family: 'Crete Round', serif;
+}
+
+.error-message p {
+  color: #6d4c41;
+  font-size: 1.1rem;
+}
+
+.download-button:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.download-button:disabled:hover {
+  transform: none;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+}
+
+.success-message {
+  margin-top: 1rem;
+  padding: 1rem;
+  background: #d4edda;
+  color: #155724;
+  border: 1px solid #c3e6cb;
+  border-radius: 8px;
+  text-align: center;
+  font-weight: bold;
+  animation: fadeIn 0.5s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.download-actions {
+  text-align: center;
+}
+
+.additional-actions {
+  margin-top: 2rem;
+  text-align: center;
+}
+
+.start-over-button {
+  background: #6d4c41;
+  color: #fdfaf6;
+  border: 1px solid #5d4037;
+  padding: 0.8rem 1.8rem;
+  font-size: 1rem;
+  font-weight: bold;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+  font-family: 'Old Standard TT', serif;
+}
+
+.start-over-button:hover {
+  background: #5d4037;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+}
+
+@media (max-width: 768px) {
+  .download-image {
+    max-height: 50vh;
+  }
+
+  .download-button {
+    width: 280px;
+    justify-content: center;
+    font-size: 1.1rem;
+    padding: 0.8rem 1.5rem;
+  }
+
+  .button-icon {
+    font-size: 1.3rem;
+  }
+
+  .header h1 {
+    font-size: 2rem;
+  }
+
+  .error-message h2 {
+    font-size: 1.5rem;
+  }
+}
+</style>

src/views/FrameView.vue

@@ -5,6 +5,7 @@ import { useRouter } from 'vue-router'
 const router = useRouter()
 const selectedLayout = ref<'1x4' | '2x2'>('1x4')
 const selectedFrame = ref<number>(0)
+const selectedFilter = ref<'normal' | 'black&white'>('normal')
 
 const layouts = [
   { id: '1x4', name: '1x4 แนวตั้ง', cols: 1, rows: 4 },
@@ -19,6 +20,11 @@ const frames = [
   { id: 4, name: 'กรอบมินิมอล', preview: '/frame-minimal.svg' }
 ]
 
+const filters = [
+  { id: 'normal', name: '🎨Color' },
+  { id: 'black&white', name: '🐈‍⬛Black & White' }
+]
+
 const selectLayout = (layoutId: string) => {
   selectedLayout.value = layoutId as '1x4' | '2x2'
 }
@@ -27,11 +33,17 @@ const selectFrame = (frameId: number) => {
   selectedFrame.value = frameId
 }
 
+const selectFilter = (filterId: string) => {
+
+  selectedFilter.value = filterId as 'normal' | 'black&white'
+
+}
+
 const proceedToSource = () => {
   // เก็บข้อมูล layout และ frame ที่เลือกไว้ใน localStorage หรือ state management
   localStorage.setItem('photobooth-layout', selectedLayout.value)
   localStorage.setItem('photobooth-frame', selectedFrame.value.toString())
-
+  localStorage.setItem('photobooth-filter', selectedFilter.value)
   router.push('/selectsource')
 }
 
@@ -70,6 +82,32 @@ const goBack = () => {
       </div>
     </section>
 
+    <section class="filter-section">
+
+      <!-- <h2>เลือกฟิลเตอร์</h2> -->
+
+      <div class="filter-options">
+
+        <div
+
+          v-for="filter in filters"
+
+          :key="filter.id"
+
+          :class="['filter-option', { selected: selectedFilter === filter.id }]"
+
+          @click="selectFilter(filter.id)"
+
+        >
+
+          <span>{{ filter.name }}</span>
+
+        </div>
+
+      </div>
+
+    </section>
+
     <section class="action-section">
       <button @click="proceedToSource" class="next-button">
         ถัดไป
@@ -145,7 +183,7 @@ const goBack = () => {
   text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
 }
 
-.layout-section, .frame-section {
+.layout-section, .frame-section, .filter-section {
   margin-bottom: 2rem;
 }
 
@@ -157,14 +195,14 @@ h2 {
   text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
 }
 
-.layout-options, .frame-options {
+.layout-options, .frame-options, .filter-options {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1.5rem; /* Increased gap slightly */
-  margin-bottom: 2rem;
+  gap: 1rem; /* Increased gap slightly */
+  margin-bottom: 1rem;
 }
 
-.layout-option, .frame-option {
+.layout-option, .frame-option, .filter-option {
   background: #fdfaf6; /* Vintage paper background */
   border: 2px solid #bcaaa4; /* Muted border */
   border-radius: 5px; /* Softer border-radius */
@@ -175,12 +213,12 @@ h2 {
   box-shadow: 0 2px 5px rgba(0,0,0,0.08);
 }
 
-.layout-option:hover, .frame-option:hover {
+.layout-option:hover, .frame-option:hover, .filter-option:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 10px rgba(0,0,0,0.15);
 }
 
-.layout-option.selected, .frame-option.selected {
+.layout-option.selected, .frame-option.selected, .filter-option.selected {
   border-color: #5d4037; /* Darker brown for selection */
   box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.2);
 }
@@ -196,7 +234,7 @@ h2 {
   padding: 6px; /* Reduced padding */
   border-radius: 4px;
   aspect-ratio: 3/4;
-  max-width: 120px;
+  max-width: 100px;
   margin: 0 auto;
   border: 1px dashed #bcaaa4; /* Dashed border for a sketched look */
 }
@@ -247,7 +285,7 @@ h2 {
 }
 
 @media (max-width: 768px) {
-  .layout-options, .frame-options {
+  .layout-options, .frame-options, .filter-options {
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   }
   h1 {

src/views/HomeView.vue

@@ -33,7 +33,7 @@ const examplePhotos = ref([
       </button>
     </section>
 
-    <section class="examples-section" style="margin-top: 1rem;">
+    <section class="examples-section" style="margin-top: 1rem; display: none;">
       <!-- <h2>ตัวอย่างผลงาน</h2> -->
       <div class="photo-examples">
         <div class="example-strip">

src/views/PickupView.vue

@@ -10,6 +10,20 @@ const cachedImageUrl = ref('')
 const isGeneratingImage = ref(false)
 const hasError = ref(false)
 
+const qrCodeUrl = computed(() => {
+  const filename = localStorage.getItem('photobooth-uploaded-filename')
+  if (filename) {
+    return `https://api.dekthai-online.com/apu-school/qrcode/photobooth.php?key=${filename}`
+  }
+  return ''
+})
+const downloadPageUrl = computed(() => {
+  const filename = localStorage.getItem('photobooth-uploaded-filename')
+  if (filename) {
+    return `${window.location.origin}/download?image=${filename}`
+  }
+  return ''
+})
 onMounted(() => {
   // โหลดข้อมูลจาก localStorage
   const savedPhotos = localStorage.getItem('photobooth-photos')
@@ -281,7 +295,22 @@ const startOver = () => {
           <span class="button-icon">📥</span>
           ดาวน์โหลด
         </button>
+
+        <button @click="startOver" class="start-over-button">
+        เริ่มใหม่
+      </button>
+      
       </div>
+      
+      <!-- QR Code สำหรับ download รูปถ่าย -->
+      <div v-if="qrCodeUrl" class="qr-code-section">
+        <h3>สแกน QR Code เพื่อดาวน์โหลด</h3>
+        <a :href="downloadPageUrl" target="_blank" class="qr-code-link">
+          <img :src="qrCodeUrl" alt="QR Code for downloading photo" class="qr-code-image" />
+        </a>
+        <p class="qr-hint">หรือ <a :href="downloadPageUrl" target="_blank" class="download-link">คลิกที่นี่</a> เพื่อเปิดในแท็บใหม่</p>
+      </div>
+
     </section>
 
     <section class="result-section">
@@ -293,6 +322,7 @@ const startOver = () => {
           </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>
@@ -302,11 +332,9 @@ const startOver = () => {
 
 
 
-    <section class="footer-section">
-      <button @click="startOver" class="start-over-button">
-        เริ่มใหม่
-      </button>
-    </section>
+    <!-- <section class="footer-section">
+      
+    </section> -->
   </div>
 </template>
 
@@ -408,6 +436,47 @@ const startOver = () => {
   margin-bottom: 2rem;
 }
 
+.qr-code-section {
+  margin-top: 2rem;
+  text-align: center;
+}
+
+.qr-code-section h3 {
+  color: #5d4037;
+  font-size: 1.2rem;
+  margin-bottom: 1rem;
+  font-family: 'Crete Round', serif;
+}
+
+.qr-code-image {
+  width: 150px;
+  height: 150px;
+  border: 2px solid #a1887f;
+  border-radius: 8px;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+  transition: transform 0.2s ease;
+}
+
+.qr-code-link:hover .qr-code-image {
+  transform: scale(1.05);
+}
+
+.qr-hint {
+  margin-top: 1rem;
+  font-size: 0.9rem;
+  color: #6d4c41;
+}
+
+.download-link {
+  color: #8d6e63;
+  text-decoration: underline;
+  font-weight: bold;
+}
+
+.download-link:hover {
+  color: #795548;
+}
+
 .action-buttons {
   display: flex;
   gap: 1.5rem; /* Increased gap */
@@ -421,7 +490,7 @@ const startOver = () => {
   padding: 1rem 2.5rem; /* Larger padding */
   font-size: 1.2rem; /* Slightly larger font */
   font-weight: bold;
-  border-radius: 8px; /* Softer border-radius */
+  border-radius: 20px; /* Softer border-radius */
   cursor: pointer;
   transition: all 0.3s ease;
   display: flex;
@@ -454,7 +523,7 @@ const startOver = () => {
   padding: 0.8rem 1.8rem; /* Adjusted padding */
   font-size: 1rem; /* Slightly smaller font */
   font-weight: bold;
-  border-radius: 5px; /* Softer border-radius */
+  border-radius: 20px; /* Softer border-radius */
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 2px 5px rgba(0,0,0,0.1);

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--
@@ -83,7 +129,7 @@ const drawFrameBackground = (context: CanvasRenderingContext2D, width: number, h
 
   switch (frameType) {
     case 0: // Classic frame
-      context.fillStyle = '#000000';
+      context.fillStyle = '#ffffff';
       context.fillRect(0, 0, width, height);
       break;
     case 1: // Modern frame
@@ -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">
-        <img :src="finalImage" alt="Final Combined Image" />
-      </div>
+      <!-- <div class="final-image-display">
+        <img v-if="finalImage" :src="finalImage" alt="Final Combined Image" />
+      </div> -->
 
 
       <div class="loading-indicator">

src/views/SelectSourceView.vue

@@ -14,6 +14,10 @@ const goToUpload = () => {
 const goBack = () => {
   router.push('/frame')
 }
+
+const goToHome = () => {
+  router.push('/frame')
+}
 </script>
 
 <template>
@@ -43,6 +47,19 @@ const goBack = () => {
         <!-- <div class="arrow">→</div> -->
       </div>
     </section>
+
+
+    <section class="options-fillter">
+      <!-- switch filter black&white -->
+
+    </section>
+
+
+
+    <footer class="footer-actions">      
+      <button @click="goToHome" class="start-button">กลับหน้าแรก</button>
+    </footer>
+
   </div>
 </template>
 
@@ -138,6 +155,32 @@ const goBack = () => {
   box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* Inner shadow for depth */
 }
 
+.start-button {
+  background: #8d6e63; /* Vintage brown button */
+  margin-top: 2rem;
+  color: #fdfaf6;
+  border: none;
+  padding: 1.2rem 2.5rem;
+  font-size: 1.1rem;
+  font-weight: bold;
+  border-radius: 15px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  display: flex;
+  align-items: center;
+}
+
+.start-button:hover {
+  background: #795548;
+  margin-right: 0.5rem;
+  transform: translateY(-1px);
+  font-size: 1.2rem;
+  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
+}
+
 .option-card h3 {
   margin: 0 0 0.5rem 0;
   color: #5d4037; /* Darker brown for heading */
@@ -159,7 +202,11 @@ const goBack = () => {
   font-weight: bold;
 }
 
-@media (max-width: 768px) {
+.footer-actions {
+  display: flex;
+  justify-content: center;
+  margin-top: 2rem;
+}
   .option-card {
     flex-direction: column;
     text-align: center;
@@ -175,5 +222,5 @@ const goBack = () => {
   .header h1 {
     font-size: 1.8rem;
   }
-}
+
 </style>

src/views/ShootingView.vue

@@ -67,9 +67,9 @@ const applyFilmEffect = (context: CanvasRenderingContext2D, width: number, heigh
   const grainStrength = volume * 1.5;
 
   for (let i = 0; i < data.length; i += 4) {
-    let r = data[i];
-    let g = data[i + 1];
-    let b = data[i + 2];
+    let r = data[i]!;
+    let g = data[i + 1]!;
+    let b = data[i + 2]!;
 
     // --- STEP 1: Apply Contrast (ทำให้ภาพไม่แบน) ---
     // สูตร Contrast มาตรฐาน
@@ -123,6 +123,65 @@ const addVignette = (ctx: CanvasRenderingContext2D, w: number, h: number, streng
     ctx.fillRect(0, 0, w, h);
 };
 
+const applyBlackAndWhite = (context: CanvasRenderingContext2D, width: number, height: number, volume: number = 5) => {
+  const imageData = context.getImageData(0, 0, width, height);
+  const data = imageData.data;
+
+  // 1. คำนวณ Contrast ตาม Volume (ยิ่งเยอะ ยิ่งตัดกันเข้ม)
+  const contrast = (volume / 10) * 80; // ปรับความเข้มข้น (0-80)
+  const contrastFactor = (259 * (contrast + 255)) / (255 * (259 - contrast));
+
+  // 2. ปรับ Brightness (Exposure) ชดเชยเวลา Contrast สูงๆ แล้วภาพมืด
+  const brightness = volume * 2; 
+
+  for (let i = 0; i < data.length; i += 4) {
+    const r = data[i]!;
+    const g = data[i + 1]!;
+    const b = data[i + 2]!;
+
+    // --- STEP 1: Grayscale Conversion (สูตร Portrait) ---
+    // ปกติ: r*0.3, g*0.59, b*0.11
+    // สูตรนี้: เพิ่มน้ำหนัก Red เป็น 0.4 เพื่อให้ "ผิวคน" ดูสว่างขึ้น (Skin Tone Brightening)
+    let gray = (r * 0.4) + (g * 0.5) + (b * 0.1);
+
+    // --- STEP 2: Apply Contrast & Brightness ---
+    gray = contrastFactor * (gray - 128) + 128 + brightness;
+
+    // --- STEP 3: Clamp Values ---
+    // บังคับค่าให้อยู่ในช่วง 0-255 และกำหนดให้ทั้ง R, G, B เท่ากัน (เพื่อเป็นสีเทา)
+    const finalGray = Math.max(0, Math.min(255, gray));
+
+    data[i] = finalGray;     // R
+    data[i + 1] = finalGray; // G
+    data[i + 2] = finalGray; // B
+    // data[i+3] คือ Alpha ไม่ต้องยุ่ง
+  }
+
+  context.putImageData(imageData, 0, 0);
+
+  // --- STEP 4: Noir Effect (แสงฟุ้ง + ขอบมืด) ---
+  // ถ้าปรับ volume เยอะๆ ให้เติมขอบดำ เพื่อให้ดูเป็นสไตล์ Noir/Classic
+  if (volume > 3) {
+      addNoirVignette(context, width, height, volume);
+  }
+};
+// ฟังก์ชันสร้างขอบดำสำหรับขาวดำโดยเฉพาะ
+const addNoirVignette = (ctx: CanvasRenderingContext2D, w: number, h: number, strength: number) => {
+    // ความเข้มของขอบดำ
+    const opacity = (strength / 10) * 0.8; // สูงสุด 0.8 (เข้มกว่าแบบฟิล์ม)
+    const radius = Math.max(w, h) * 0.7; // วงแคบกว่าฟิล์มหน่อย เพื่อเน้นหน้าคนตรงกลาง
+
+    const gradient = ctx.createRadialGradient(w/2, h/2, w/4, w/2, h/2, radius);
+    gradient.addColorStop(0, "rgba(0,0,0,0)"); 
+    gradient.addColorStop(1, `rgba(0,0,0,${opacity})`);
+
+    ctx.save();
+    ctx.globalCompositeOperation = 'multiply'; // ใช้ Multiply ให้เงามันซึมลงไปในภาพ
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, w, h);
+    ctx.restore();
+};
+
 const drawDateStamp = (context: CanvasRenderingContext2D, width: number, height: number) => {
   const now = new Date();
 
@@ -206,11 +265,20 @@ const captureSinglePhoto = () => {
   )
 
   // Apply film effect with default volume
-  applyFilmEffect(context, finalWidth, finalHeight, 5);
-  drawDateStamp(context, finalWidth, finalHeight);
+  // applyFilmEffect(context, finalWidth, finalHeight, 2);
+
+    const filter = localStorage.getItem('photobooth-filter') || 'normal'
+  if (filter === 'black&white') {
+    applyBlackAndWhite(context, finalWidth, finalHeight, 3);
+  } else {
+    applyFilmEffect(context, finalWidth, finalHeight, 2); // Default volume = 5
+  }
+
+
+  // drawDateStamp(context, finalWidth, finalHeight);
 
   // แปลงเป็น base64 ด้วย quality 0.7 เพื่อลดขนาด
-  const photoDataUrl = canvas.toDataURL('image/jpeg', 0.7)
+  const photoDataUrl = canvas.toDataURL('image/jpeg', 0.8)
   photos.value.push(photoDataUrl)
   currentPhotoIndex.value++
 
@@ -457,6 +525,7 @@ const retakePhoto = () => {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  transform: scaleX(-1);
 }
 
 .hidden-canvas {

src/views/UploadView.vue

@@ -26,9 +26,9 @@ const applyFilmEffect = (context: CanvasRenderingContext2D, width: number, heigh
   const grainStrength = volume * 1.5;
 
   for (let i = 0; i < data.length; i += 4) {
-    let r = data[i];
-    let g = data[i + 1];
-    let b = data[i + 2];
+    let r = data[i]!;
+    let g = data[i + 1]!;
+    let b = data[i + 2]!;
 
     // --- STEP 1: Apply Contrast (ทำให้ภาพไม่แบน) ---
     // สูตร Contrast มาตรฐาน
@@ -66,7 +66,6 @@ const applyFilmEffect = (context: CanvasRenderingContext2D, width: number, heigh
       addVignette(context, width, height, volume);
   }
 };
-
 // ฟังก์ชันเสริมสำหรับทำขอบมืด (Vignette)
 const addVignette = (ctx: CanvasRenderingContext2D, w: number, h: number, strength: number) => {
     const opacity = (strength / 10) * 0.6; // สูงสุดที่ 0.6 opacity
@@ -82,6 +81,143 @@ const addVignette = (ctx: CanvasRenderingContext2D, w: number, h: number, streng
     ctx.fillRect(0, 0, w, h);
 };
 
+const applySelfieFilter = (context: CanvasRenderingContext2D, width: number, height: number, volume: number = 5) => {
+  const imageData = context.getImageData(0, 0, width, height);
+  const data = imageData.data;
+
+  // แปลง Volume เป็นค่า Config
+  const brightness = (volume / 10) * 40; // เพิ่มความสว่าง (0 - 40)
+  const contrast = 1.05 + (volume / 100); // เพิ่ม Contrast นิดเดียวให้ภาพไม่จม (1.05 - 1.15)
+  
+  // Factor สำหรับลดความเหลือง (Desaturation) ยิ่งเยอะผิวยิ่งดูขาวซีด
+  const saturationFactor = 1 - (volume / 50); // ลดความสดสีลงนิดหน่อย
+
+  const contrastFactor = (259 * (contrast * 255 + 255)) / (255 * (259 - contrast * 255));
+
+  for (let i = 0; i < data.length; i += 4) {
+    let r = data[i]!;
+    let g = data[i + 1]!;
+    let b = data[i + 2]!;
+
+    // --- STEP 1: Brightness & Contrast ---
+    // ปรับ Contrast และ Brightness พื้นฐาน
+    r = contrastFactor * (r - 128) + 128 + brightness;
+    g = contrastFactor * (g - 128) + 128 + brightness;
+    b = contrastFactor * (b - 128) + 128 + brightness;
+
+    // --- STEP 2: Skin Whitening Logic (Desaturation) ---
+    // คำนวณค่าสีเทา (Luminance)
+    const gray = r * 0.3 + g * 0.59 + b * 0.11;
+    
+    // ผสมสีเดิมเข้ากับสีเทา เพื่อลดความสดของสีผิว (ทำให้ผิวที่เหลือง/คล้ำ ดูขาวขึ้น)
+    r = r * saturationFactor + gray * (1 - saturationFactor);
+    g = g * saturationFactor + gray * (1 - saturationFactor);
+    b = b * saturationFactor + gray * (1 - saturationFactor);
+
+    // --- STEP 3: Tone Tuning (อมชมพูระเรื่อ) ---
+    // เพิ่มสีแดงและฟ้านิดๆ ให้ดูขาวอมชมพู (ไม่เหลือง)
+    r += volume * 1.5; // เพิ่มแดง
+    b += volume * 0.5; // เพิ่มฟ้านิดเดียว (Cool tone)
+
+    // Clamp values
+    data[i] = Math.max(0, Math.min(255, r));
+    data[i + 1] = Math.max(0, Math.min(255, g));
+    data[i + 2] = Math.max(0, Math.min(255, b));
+  }
+
+  context.putImageData(imageData, 0, 0);
+
+  // --- STEP 4: Soft Focus (หน้าเนียน) ---
+  // ใช้เทคนิค Screen Layer สีขาวจางๆ ทำให้รูขุมขนหายไป หน้าดูฟุ้ง
+  if (volume > 0) {
+      addSoftGlow(context, width, height, volume);
+  }
+};
+// ฟังก์ชันทำหน้าเนียน (Soft Glow)
+const addSoftGlow = (ctx: CanvasRenderingContext2D, w: number, h: number, strength: number) => {
+    ctx.save();
+    
+    // ใช้โหมด Screen หรือ Overlay เพื่อให้ความสว่างกลืนไปกับภาพ
+    ctx.globalCompositeOperation = 'screen'; 
+    
+    // สีขาวจางๆ ตามระดับความแรง
+    const opacity = (strength / 10) * 0.15; // สูงสุด 15% (ถ้าเยอะไปหน้าจะวอก)
+    ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`;
+    
+    ctx.fillRect(0, 0, w, h);
+    
+    // (Optional) เพิ่มสีชมพูจางๆ ตรงกลางแก้ม (Blush Effect)
+    // ถ้าต้องการให้กดแล้วดูแก้มชมพูด้วย
+    /*
+    const gradient = ctx.createRadialGradient(w/2, h/2, w/4, w/2, h/2, w);
+    gradient.addColorStop(0, `rgba(255, 200, 200, ${opacity * 0.5})`);
+    gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, w, h);
+    */
+
+    ctx.restore();
+};
+
+const applyBlackAndWhite = (context: CanvasRenderingContext2D, width: number, height: number, volume: number = 5) => {
+  const imageData = context.getImageData(0, 0, width, height);
+  const data = imageData.data;
+
+  // 1. คำนวณ Contrast ตาม Volume (ยิ่งเยอะ ยิ่งตัดกันเข้ม)
+  const contrast = (volume / 10) * 80; // ปรับความเข้มข้น (0-80)
+  const contrastFactor = (259 * (contrast + 255)) / (255 * (259 - contrast));
+
+  // 2. ปรับ Brightness (Exposure) ชดเชยเวลา Contrast สูงๆ แล้วภาพมืด
+  const brightness = volume * 2; 
+
+  for (let i = 0; i < data.length; i += 4) {
+    const r = data[i]!;
+    const g = data[i + 1]!;
+    const b = data[i + 2]!;
+
+    // --- STEP 1: Grayscale Conversion (สูตร Portrait) ---
+    // ปกติ: r*0.3, g*0.59, b*0.11
+    // สูตรนี้: เพิ่มน้ำหนัก Red เป็น 0.4 เพื่อให้ "ผิวคน" ดูสว่างขึ้น (Skin Tone Brightening)
+    let gray = (r * 0.4) + (g * 0.5) + (b * 0.1);
+
+    // --- STEP 2: Apply Contrast & Brightness ---
+    gray = contrastFactor * (gray - 128) + 128 + brightness;
+
+    // --- STEP 3: Clamp Values ---
+    // บังคับค่าให้อยู่ในช่วง 0-255 และกำหนดให้ทั้ง R, G, B เท่ากัน (เพื่อเป็นสีเทา)
+    const finalGray = Math.max(0, Math.min(255, gray));
+
+    data[i] = finalGray;     // R
+    data[i + 1] = finalGray; // G
+    data[i + 2] = finalGray; // B
+    // data[i+3] คือ Alpha ไม่ต้องยุ่ง
+  }
+
+  context.putImageData(imageData, 0, 0);
+
+  // --- STEP 4: Noir Effect (แสงฟุ้ง + ขอบมืด) ---
+  // ถ้าปรับ volume เยอะๆ ให้เติมขอบดำ เพื่อให้ดูเป็นสไตล์ Noir/Classic
+  if (volume > 3) {
+      addNoirVignette(context, width, height, volume);
+  }
+};
+// ฟังก์ชันสร้างขอบดำสำหรับขาวดำโดยเฉพาะ
+const addNoirVignette = (ctx: CanvasRenderingContext2D, w: number, h: number, strength: number) => {
+    // ความเข้มของขอบดำ
+    const opacity = (strength / 10) * 0.8; // สูงสุด 0.8 (เข้มกว่าแบบฟิล์ม)
+    const radius = Math.max(w, h) * 0.7; // วงแคบกว่าฟิล์มหน่อย เพื่อเน้นหน้าคนตรงกลาง
+
+    const gradient = ctx.createRadialGradient(w/2, h/2, w/4, w/2, h/2, radius);
+    gradient.addColorStop(0, "rgba(0,0,0,0)"); 
+    gradient.addColorStop(1, `rgba(0,0,0,${opacity})`);
+
+    ctx.save();
+    ctx.globalCompositeOperation = 'multiply'; // ใช้ Multiply ให้เงามันซึมลงไปในภาพ
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, w, h);
+    ctx.restore();
+};
+
 const drawDateStamp = (context: CanvasRenderingContext2D, width: number, height: number) => {
   const now = new Date();
 
@@ -118,6 +254,72 @@ const drawDateStamp = (context: CanvasRenderingContext2D, width: number, height:
   context.shadowBlur = 0;
 };
 
+const applyRetroPop = (context: CanvasRenderingContext2D, width: number, height: number, volume: number = 5) => {
+  const imageData = context.getImageData(0, 0, width, height);
+  const data = imageData.data;
+
+  // 1. Saturation Factor (ความสด)
+  // volume 5 = สดขึ้น 50%, volume 10 = สดขึ้น 100% (2 เท่า)
+  const saturation = 1 + (volume / 10); 
+
+  // 2. Contrast Factor (ความคมเข้ม)
+  const contrast = (volume / 10) * 30; // 0-30
+  const contrastFactor = (259 * (contrast + 255)) / (255 * (259 - contrast));
+
+  for (let i = 0; i < data.length; i += 4) {
+    let r = data[i]!;
+    let g = data[i + 1]!;
+    let b = data[i + 2]!;
+
+    // --- STEP 1: Apply Contrast First ---
+    r = contrastFactor * (r - 128) + 128;
+    g = contrastFactor * (g - 128) + 128;
+    b = contrastFactor * (b - 128) + 128;
+
+    // --- STEP 2: Boost Saturation (หัวใจหลักของฟิลเตอร์นี้) ---
+    // คำนวณความสว่าง (Luminance) ของ Pixel นั้น
+    const gray = 0.2989 * r + 0.5870 * g + 0.1140 * b;
+
+    // สูตรเร่งสี: สีใหม่ = สีเทา + (สีเดิม - สีเทา) * ความแรง
+    // ยิ่งค่า Saturation มาก สีจะยิ่งดีดตัวออกจากสีเทา
+    r = gray + (r - gray) * saturation;
+    g = gray + (g - gray) * saturation;
+    b = gray + (b - gray) * saturation;
+
+    // --- STEP 3: Color Grading (Retro Vibe) ---
+    // เพิ่มสี Magenta (แดง+น้ำเงิน) นิดๆ ให้ดูเหมือนนิตยสารยุคเก่า
+    r *= 1.1; // Boost Red
+    g *= 0.95; // Reduce Green slightly
+    b *= 1.05; // Boost Blue slightly
+
+    // Clamp values
+    data[i] = Math.max(0, Math.min(255, r));
+    data[i + 1] = Math.max(0, Math.min(255, g));
+    data[i + 2] = Math.max(0, Math.min(255, b));
+  }
+
+  context.putImageData(imageData, 0, 0);
+
+  // --- STEP 4: Add Scanlines (Optional) ---
+  // เพิ่มเส้นขีดๆ เหมือนทีวีรุ่นเก่า (TV Scanlines) เพื่อความ Retro
+  if (volume > 2) {
+      addScanlines(context, width, height);
+  }
+};
+
+// ฟังก์ชันวาดเส้นทีวี (ทำให้ดู Retro ยิ่งขึ้น)
+const addScanlines = (ctx: CanvasRenderingContext2D, w: number, h: number) => {
+    ctx.save();
+    ctx.globalCompositeOperation = "overlay"; // โหมด Overlay ทำให้เส้นกลืนไปกับภาพ
+    ctx.fillStyle = "rgba(0, 0, 0, 0.1)"; // สีดำจางๆ (ปรับความเข้มที่ 0.1 - 0.3)
+
+    // วาดเส้นแนวนอนสลับฟันปลา
+    for (let y = 0; y < h; y += 4) { // วาดทุกๆ 4 pixel
+        ctx.fillRect(0, y, w, 2); // ความหนาเส้น 2 pixel
+    }
+    ctx.restore();
+};
+
 const cropImageTo34 = (imageSrc: string): Promise<string> => {
   return new Promise((resolve) => {
     const img = new Image();
@@ -172,9 +374,20 @@ const cropImageTo34 = (imageSrc: string): Promise<string> => {
       );
 
       // Apply film effect with adjustable volume
-      applyFilmEffect(context, finalWidth, finalHeight, 7); // Default volume = 5
-      drawDateStamp(context, finalWidth, finalHeight);
+      
+      //check local storage name "photobooth-filter"
+      const filter = localStorage.getItem('photobooth-filter') || 'normal'
+      if (filter === 'black&white') {
+        applyBlackAndWhite(context, finalWidth, finalHeight, 3);
+      } else {
+        applyFilmEffect(context, finalWidth, finalHeight, 5); // Default volume = 5
+      }
+      // applySelfieFilter(context, finalWidth, finalHeight, 10); // Default volume = 5
+      // applyRetroPop(context, finalWidth, finalHeight, 7);
 
+
+
+      drawDateStamp(context, finalWidth, finalHeight);
       // แปลงเป็น base64 ด้วย quality 0.7 เพื่อลดขนาด
       const croppedDataUrl = canvas.toDataURL('image/jpeg', 0.7);
       resolve(croppedDataUrl);

vite.config.ts

@@ -13,7 +13,7 @@ export default defineConfig({
     VitePWA({
       registerType: 'autoUpdate',
       manifest: {
-        name: 'DekThai Photobooth',
+        name: 'Photobooth-APU',
         short_name: 'Photobooth',
         description: 'Create beautiful photo strips with frames',
         theme_color: '#ffffff',
@@ -35,7 +35,7 @@ export default defineConfig({
     })
   ],
   server: {
-    allowedHosts: ['photobooth.lookmeblog.com']
+    allowedHosts: ['photobooth.lookmeblog.com', 'photobooth.dekthai-online.com']
   },
   resolve: {
     alias: {