หน้านี้เป็นแค็ตตาล็อกเทคนิค ไม่ใช่เครื่องมือประมวลผลภาพแบบ real-time บนเว็บ — เดิมเราเคยให้อัพโหลดรูปแล้วประมวลผลผ่าน Cloudflare Pages Functions โดยตรง แต่ convolution filter อย่าง edge detection ใช้ CPU มากพอที่จะชนขีดจำกัดเวลาประมวลผลของ serverless function บนภาพความละเอียดสูง (โดยเฉพาะภาพถ่ายจริงจากมือถือ) ทำให้ผลลัพธ์ไม่เสถียร
วิธีที่เหมาะกับการเรียนรู้กว่าคือการรันโค้ดจริงใน Google Colab ซึ่งมี CPU/RAM ให้เต็มที่ไม่มีขีดจำกัดแบบ edge function — ลองรันโค้ด OpenCV/Pillow กับรูปของคุณเองได้ทันที
เบื้องหลัง filter แต่ละแบบ
ภาพดิจิทัลหนึ่งภาพคือ matrix ของตัวเลข — ภาพสี RGB ขนาด W×H คือ array ขนาด W×H×3 ที่แต่ละช่อง (channel) เก็บค่าความเข้มสีระหว่าง 0–255 filter แต่ละแบบคือฟังก์ชันทางคณิตศาสตร์ที่แปลง array นี้ให้เป็น array ใหม่:
ภาพขาวดำ (Grayscale)
ลดข้อมูลสีของแต่ละพิกเซลจาก 3 ช่อง (R, G, B) ให้เหลือค่าความสว่าง (luminance) เพียงค่าเดียว โดยถ่วงน้ำหนักแต่ละช่องสีไม่เท่ากัน เพราะดวงตามนุษย์ไวต่อสีเขียวมากที่สุด รองลงมาคือแดง และไวต่อสีน้ำเงินน้อยที่สุด
Y = 0.299·R + 0.587·G + 0.114·B
(สูตร luma ตามมาตรฐาน ITU-R BT.601 ที่ใช้กันทั่วไปในการแปลงภาพขาวดำ)
ทำไมเรื่องนี้สำคัญ: ในงาน Computer Vision หลายอัลกอริทึม (เช่น edge detection, feature matching) ทำงานกับภาพ grayscale เป็นค่าเริ่มต้น เพราะลดมิติข้อมูลจาก 3 ช่องสีเหลือ 1 ช่อง ทำให้คำนวณเร็วขึ้นโดยยังคงโครงสร้าง (structure) ของภาพไว้
โทนซีเปีย (Sepia)
แปลงสีของแต่ละพิกเซลด้วย color transformation matrix ค่าคงที่ชุดหนึ่ง เพื่อให้ภาพออกโทนน้ำตาลอมส้มคล้ายภาพถ่ายเก่า เป็นตัวอย่างคลาสสิกของการทำ linear color transform บนพิกเซล
R' = 0.393R + 0.769G + 0.189B
G' = 0.349R + 0.686G + 0.168B
B' = 0.272R + 0.534G + 0.131B
(ค่าที่ได้แต่ละช่องจะถูก clamp ไว้ที่ 0–255)
ทำไมเรื่องนี้สำคัญ: เป็นตัวอย่างของ "point operation" หรือ pixel-wise transform — output ของแต่ละพิกเซลขึ้นกับค่าพิกเซลเดิมที่ตำแหน่งเดียวกันเท่านั้น ไม่พึ่งพิกเซลข้างเคียง ต่างจาก blur และ edge detection ที่เป็น neighborhood operation
เบลอภาพ (Gaussian Blur)
ทำ convolution ภาพด้วย Gaussian kernel ซึ่งให้น้ำหนักพิกเซลตรงกลางมากที่สุดแล้วลดหลั่นแบบระฆังคว่ำ (bell curve) ไปยังพิกเซลข้างเคียง ผลคือความเปลี่ยนแปลงของสี/ความสว่างที่ฉับพลันถูกทำให้นุ่มนวลลง
G(x, y) = (1 / 2πσ²) · e^(−(x² + y²) / 2σ²)
(σ คือ standard deviation ที่กำหนดความกว้างของ kernel — ยิ่ง radius มากยิ่งเบลอมาก)
ทำไมเรื่องนี้สำคัญ: Gaussian blur มักถูกใช้เป็นขั้นตอน pre-processing ก่อนทำ edge detection เพื่อลด noise ในภาพ (noise reduction) เนื่องจาก edge detection ไวต่อการเปลี่ยนแปลงเล็กๆ ของค่าพิกเซลมาก หากไม่ลด noise ก่อนอาจตรวจพบ "ขอบ" ปลอมจำนวนมาก
ตรวจจับขอบภาพ (Edge Detection)
ทำ convolution ด้วย kernel ที่ไวต่อการเปลี่ยนแปลงค่าความสว่างอย่างฉับพลัน (high-frequency change) ระหว่างพิกเซลข้างเคียง บริเวณที่ค่าต่างกันมาก (เช่น รอยต่อระหว่างวัตถุกับพื้นหลัง) จะถูกเน้นให้เห็นเป็น "ขอบ" ส่วนบริเวณที่มีสีสม่ำเสมอจะกลายเป็นสีดำ
Laplacian kernel:
[ 0 1 0 ]
[ 1 −4 1 ]
[ 0 1 0 ]
(kernel นี้ประมาณค่าอนุพันธ์อันดับสองของภาพ — บริเวณที่ intensity เปลี่ยนเร็วจะให้ค่าผลลัพธ์สูง)
ทำไมเรื่องนี้สำคัญ: เป็นการคำนวณที่หนักที่สุดในบรรดา filter ทั้ง 4 แบบที่นี่ เพราะต้องสุ่มตัวอย่างพิกเซลข้างเคียงและคูณ-บวกหลายครั้งต่อ 1 พิกเซล (convolution) ต่างจาก grayscale/sepia ที่คำนวณทีละพิกเซลแบบอิสระ — บนภาพความละเอียดสูงอาจใช้เวลาประมวลผลนานกว่าเวลา CPU ที่ serverless function ทั่วไปอนุญาตต่อ 1 request มาก จึงเหมาะกับการรันในสภาพแวดล้อมแบบ notebook (เช่น Colab) มากกว่ารันแบบ real-time บนเว็บ
ไลบรารีที่ใช้ในเดโมเดิม
Photon — image processing library เขียนด้วย Rust คอมไพล์เป็น WebAssembly (แพ็กเกจ @cf-wasm/photon) ส่วนใน Colab Notebook จะใช้ OpenCV และ Pillow ซึ่งเป็นไลบรารีมาตรฐานของวงการ Computer Vision