feat: add filter options for images, including black & white and selfie effects, and enhance UI elements

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 */
+  gap: 1rem; /* Increased gap slightly */
-  margin-bottom: 2rem;
+  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/PrintStepView.vue

@@ -129,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

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

@@ -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,7 +265,16 @@ const captureSinglePhoto = () => {
   )
 
   // Apply film effect with default volume
-  applyFilmEffect(context, finalWidth, finalHeight, 5);
+  // 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, 5); // Default volume = 5
+  }
+
+
   drawDateStamp(context, finalWidth, finalHeight);
 
   // แปลงเป็น base64 ด้วย quality 0.7 เพื่อลดขนาด

src/views/UploadView.vue

@@ -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);