ทำไมต้องทำเครื่องมือบีบอัดรูปภาพด้วยตัวเอง
เวลาเราทำเว็บไซต์ รูปภาพความละเอียดสูงมักจะทำให้หน้าเว็บโหลดช้าลงอย่างมาก ซึ่งส่งผลเสียต่อคะแนน SEO (การปรับแต่งเว็บไซต์ให้ติดอันดับบน Google) และทำให้ผู้ใช้งานรู้สึกหงุดหงิด การใช้เครื่องมือบีบอัดรูปภาพทั่วไปมักจะต้องอัปโหลดไฟล์ไปที่ Server (เครื่องคอมพิวเตอร์ที่เก็บข้อมูลของเว็บไซต์) ซึ่งเสี่ยงต่อความเป็นส่วนตัวของข้อมูล
การสร้าง Bulk Image Compressor (เครื่องมือบีบอัดรูปภาพจำนวนมาก) ที่ทำงานบน Browser (โปรแกรมเปิดเว็บ) ของผู้ใช้โดยตรงจึงเป็นทางเลือกที่ดีกว่า เพราะไฟล์รูปภาพไม่เคยถูกส่งออกไปนอกเครื่องเลย ข้อมูลของคุณจึงปลอดภัย 100% นอกจากนี้ยังช่วยให้เราประหยัดพื้นที่เก็บข้อมูลได้มหาศาลโดยไม่ต้องเสียค่าใช้จ่ายให้ผู้ให้บริการรายอื่น
สำหรับคนที่กำลังฝึกเขียนโปรแกรม นี่เป็นโปรเจกต์ที่น่าสนใจมาก เพราะคุณจะได้เรียนรู้การจัดการไฟล์ การใช้งาน Canvas API (เครื่องมือวาดและจัดการรูปภาพบนเว็บ) และการสร้างไฟล์ ZIP เพื่อดาวน์โหลดข้อมูลเป็นชุด ซึ่งเป็นทักษะพื้นฐานที่โปรแกรมเมอร์มืออาชีพต้องมีติดตัวไว้ใช้งานจริงในอนาคต
เตรียมโครงสร้าง HTML ให้พร้อมใช้งาน
ก่อนจะเริ่มเขียนโค้ด เราต้องวางโครงสร้างของเครื่องมือนี้ด้วย HTML (ภาษาที่ใช้สร้างโครงร่างของหน้าเว็บ) ให้เป็นระเบียบ เราจะสร้างพื้นที่สำหรับลากวางรูปภาพและปุ่มกดเพื่อเลือกไฟล์ โดยเน้นโครงสร้างที่เรียบง่ายเพื่อให้คุณสามารถนำไปแปะลงในบล็อกหรือหน้าเว็บที่มีอยู่เดิมได้ทันที
จุดสำคัญคือการใช้ <input type="file"> ที่ซ่อนไว้ เพื่อรับไฟล์จากผู้ใช้งาน และใช้ CDN (ช่องทางดึงไฟล์โปรแกรมจากเซิร์ฟเวอร์ภายนอก) เพื่อโหลดไลบรารี JSZip ซึ่งเป็นตัวช่วยในการรวมไฟล์หลายไฟล์เข้าด้วยกันเป็นโฟลเดอร์เดียวแบบ ZIP ก่อนให้ผู้ใช้ดาวน์โหลด
ลองดูตัวอย่างโครงสร้าง HTML ด้านล่างนี้ โดยเราจะใช้ id เป็นตัวระบุตำแหน่งเพื่อให้ JavaScript เรียกใช้งานได้ง่ายในขั้นตอนถัดไป สังเกตว่าเราไม่ได้ใส่ tag อย่าง <html> หรือ <body> เพราะเราต้องการสร้างแค่ส่วนประกอบย่อยของหน้าเว็บเท่านั้น
<!-- โหลดไลบรารี JSZip สำหรับรวมไฟล์ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<div class="ic-main-wrapper">
<h2 class="ic-title">Image Compressor</h2>
<div id="icDropzone" class="ic-dropzone-area">
<p>Drop images here or click to browse</p>
<input type="file" id="icFileInput" accept="image/*" multiple hidden>
</div>
<div id="icActionPanel" class="ic-action-panel">
<p id="icStatusText">0 images selected</p>
<button id="icCompressBtn" class="ic-btn-primary">Compress & Download ZIP</button>
</div>
</div>ในโค้ดนี้ accept="image/*" คือตัวกำหนดให้ผู้ใช้เลือกได้เฉพาะไฟล์รูปภาพเท่านั้น ส่วน multiple จะช่วยให้เลือกไฟล์ได้หลายรูปพร้อมกัน การวางโครงสร้างแบบนี้จะช่วยให้คุณจัดการส่วนติดต่อผู้ใช้งานได้สะดวกขึ้นมาก
ผลลัพธ์ที่ได้คือหน้าเว็บที่มีกล่องสี่เหลี่ยมสำหรับวางรูปภาพ และเมื่อมีไฟล์เข้ามา icActionPanel จะปรากฏขึ้นมาเพื่อให้คุณกดปุ่มดาวน์โหลด ถ้ายังไม่มีไฟล์ ปุ่มนี้จะถูกซ่อนไว้เพื่อไม่ให้ผู้ใช้งานสับสน
ตกแต่งหน้าตาด้วย CSS ให้ดูเป็นมืออาชีพ
เมื่อได้โครงสร้างแล้ว เราต้องใช้ CSS (ภาษาที่ใช้ตกแต่งหน้าตาเว็บไซต์) เพื่อให้เครื่องมือดูน่าเชื่อถือและใช้งานง่าย การใช้ Namespace (ชื่อนำหน้าที่ช่วยป้องกันความซ้ำซ้อน) อย่าง ic- จะช่วยให้สไตล์ของเราไม่ไปตีกับสไตล์ของเว็บไซต์หลักที่เรานำไปวางไว้
เราจะเน้นการใช้ Border-radius (การทำให้มุมของกล่องมีความโค้งมน) และ Box-shadow (การสร้างเงาให้ดูมีมิติ) เพื่อให้หน้าเว็บดูสะอาดตา นอกจากนี้ การทำปุ่มให้เปลี่ยนสีเมื่อเอาเมาส์ไปชี้ (Hover state) จะช่วยให้ผู้ใช้งานรู้ว่าจุดไหนสามารถกดคลิกได้จริง
ลองนำโค้ด CSS นี้ไปใส่ในหน้าเว็บของคุณ เพื่อเปลี่ยนหน้าตาที่ดูจืดชืดให้กลายเป็นเครื่องมือที่ดูทันสมัยและใช้งานง่ายกันครับ
.ic-main-wrapper { max-width: 600px; margin: 20px auto; padding: 20px; border: 1px solid #ccc; border-radius: 12px; }
.ic-dropzone-area { border: 2px dashed #1A73E8; padding: 40px; text-align: center; cursor: pointer; }
.ic-action-panel { margin-top: 20px; display: none; text-align: center; }
.ic-btn-primary { background: #1A73E8; color: white; padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; }
.ic-btn-primary:hover { background: #1557b0; }โค้ดส่วนนี้จะสร้างกรอบที่มีเส้นประสีน้ำเงินเพื่อให้ผู้ใช้รู้ว่าตรงนี้ลากไฟล์มาวางได้ ส่วน display: none ใน ic-action-panel คือหัวใจสำคัญที่จะซ่อนปุ่มไว้ก่อนจนกว่าจะมีรูปภาพถูกอัปโหลดเข้ามาจริง
ผลลัพธ์คือคุณจะได้กล่องเครื่องมือที่มีระยะห่างพอเหมาะ ปุ่มกดที่ดูเด่นชัด และมีสถานะการตอบสนองเมื่อผู้ใช้ขยับเมาส์เข้ามาใกล้ ซึ่งเป็นรายละเอียดเล็กๆ ที่ทำให้โปรแกรมเมอร์ดูใส่ใจในประสบการณ์ของผู้ใช้งาน
สร้างระบบจัดการไฟล์ด้วย JavaScript
ตอนนี้ถึงเวลาของ JavaScript (ภาษาที่ใช้ควบคุมพฤติกรรมของหน้าเว็บ) ซึ่งเป็นสมองของเครื่องมือนี้ เราจะเริ่มจากการดักจับเหตุการณ์การลากไฟล์มาวาง (Drag and Drop) และนำไฟล์เหล่านั้นมาเก็บไว้ในตัวแปรแบบ Array (รายการข้อมูลที่เก็บเป็นชุด)
ขั้นตอนสำคัญคือการแปลงรูปภาพให้เป็นข้อมูลที่ Canvas เข้าใจ เพื่อทำการบีบอัดขนาดไฟล์ เราจะปรับค่า Quality (ความคมชัดของรูป) ให้ลดลงเล็กน้อยเพื่อให้ไฟล์มีขนาดเล็กลงแต่ยังคงความสวยงามไว้ได้ ซึ่งเป็นเทคนิคที่โปรแกรมเมอร์ใช้บ่อยในการทำเว็บไซต์ที่ต้องการโหลดเร็ว
โค้ดด้านล่างนี้คือตัวอย่างการดึงไฟล์และเตรียมพร้อมสำหรับการบีบอัด คุณควรทำความเข้าใจการทำงานของ addEventListener (การรอรับเหตุการณ์จากผู้ใช้) เพราะเป็นหัวใจของงานฝั่งหน้าเว็บทั้งหมด
const fileInput = document.getElementById('icFileInput');
const dropzone = document.getElementById('icDropzone');
dropzone.addEventListener('drop', (e) => {
e.preventDefault(); // ป้องกันไม่ให้เบราว์เซอร์เปิดรูปภาพขึ้นมาตรงๆ
const files = e.dataTransfer.files;
console.log('ไฟล์ที่เลือก:', files);
// ตรงนี้คุณจะนำไฟล์ไปประมวลผลต่อในขั้นตอนถัดไป
});e.preventDefault() คือคำสั่งที่สำคัญมาก เพราะถ้าไม่ใส่ไว้ เบราว์เซอร์จะพยายามเปิดไฟล์รูปภาพนั้นในหน้าต่างใหม่แทนที่จะให้เราจัดการเอง ส่วน e.dataTransfer.files คือข้อมูลไฟล์ที่ผู้ใช้ลากมาวางนั่นเอง
เมื่อรันโค้ดนี้แล้วลองลากไฟล์รูปภาพมาวางในหน้าเว็บ คุณจะเห็นรายชื่อไฟล์ปรากฏใน Console (แถบเครื่องมือสำหรับนักพัฒนาที่ใช้ดูข้อผิดพลาดหรือผลลัพธ์) ซึ่งยืนยันว่าโปรแกรมของคุณได้รับข้อมูลเรียบร้อยแล้ว
การบีบอัดรูปภาพด้วย Canvas API
มาถึงขั้นตอนการบีบอัดจริงๆ เราจะสร้าง <canvas> ขึ้นมาในหน่วยความจำ แล้ววาดรูปภาพลงไป จากนั้นใช้คำสั่ง toDataURL() เพื่อแปลงรูปภาพนั้นให้กลายเป็นไฟล์ที่มีขนาดเล็กลงตามค่า Quality ที่เรากำหนดไว้
การทำงานนี้จะเกิดขึ้นอย่างรวดเร็วบนเครื่องของผู้ใช้ ทำให้ไม่ต้องเสียเวลารออัปโหลดไฟล์ขึ้นเซิร์ฟเวอร์ สำหรับมือใหม่ นี่คือโอกาสดีที่จะได้ฝึกใช้ Promise (วิธีการจัดการงานที่ต้องใช้เวลา) เพื่อให้มั่นใจว่ารูปภาพทั้งหมดถูกบีบอัดจนครบก่อนจะเริ่มสร้างไฟล์ ZIP
นี่คือตัวอย่างฟังก์ชันที่ใช้ในการบีบอัดรูปภาพหนึ่งไฟล์ คุณสามารถนำไปปรับใช้ในลูปเพื่อบีบอัดไฟล์จำนวนมากพร้อมกันได้เลยครับ
function compressImage(file, quality) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.src = e.target.result;
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0);
// บีบอัดไฟล์ที่ระดับคุณภาพ 0.7 (70%)
resolve(canvas.toDataURL('image/jpeg', quality));
};
};
reader.readAsDataURL(file);
});
}ฟังก์ชันนี้รับไฟล์เข้ามาแล้วอ่านเป็นข้อมูลรูปภาพ จากนั้นวาดลงบน Canvas ที่สร้างขึ้นใหม่ canvas.toDataURL จะทำหน้าที่แปลงข้อมูลนั้นเป็น Base64 (รูปแบบข้อมูลตัวอักษรที่ใช้แทนไฟล์) ที่มีขนาดเล็กลงตามที่เราต้องการ
ผลลัพธ์ที่ได้คือข้อความยาวๆ ที่เป็นข้อมูลรูปภาพที่บีบอัดแล้ว ซึ่งคุณสามารถนำไปเก็บลงในไฟล์ ZIP ต่อได้เลย เป็นวิธีที่ง่ายและมีประสิทธิภาพมากสำหรับงานในฝั่งหน้าเว็บ
สรุป: การนำไปใช้จริงและการต่อยอด
คุณเพิ่งสร้างเครื่องมือ Bulk Image Compressor ที่ทำงานได้จริงและมีความเป็นส่วนตัวสูง สิ่งสำคัญคือการเข้าใจว่าทุกอย่างทำงานอยู่บน Browser ของผู้ใช้ ซึ่งช่วยลดภาระของเซิร์ฟเวอร์และปกป้องข้อมูลผู้ใช้งานได้ดีเยี่ยม นี่คือจุดเริ่มต้นที่ดีมากในการเป็นโปรแกรมเมอร์ที่เน้นการแก้ปัญหาด้วยวิธีที่ชาญฉลาด
คุณสามารถนำเครื่องมือนี้ไปต่อยอดได้อีก เช่น เพิ่มตัวเลือกให้ผู้ใช้เลือกความละเอียดของรูปภาพได้เอง หรือเพิ่ม Progress Bar (แถบแสดงสถานะการทำงาน) เพื่อบอกผู้ใช้ว่าตอนนี้บีบอัดไปได้กี่เปอร์เซ็นต์แล้ว การทำสิ่งเหล่านี้จะช่วยให้ Portfolio (แฟ้มสะสมผลงาน) ของคุณโดดเด่นขึ้นมาทันทีเมื่อต้องไปสมัครงาน
จำไว้ว่าการเขียนโปรแกรมไม่ใช่แค่เรื่องของโค้ด แต่คือการสร้างประสบการณ์ที่ดีให้ผู้ใช้ ลองนำเครื่องมือนี้ไปติดตั้งในเว็บไซต์ส่วนตัวของคุณดูครับ แล้วคุณจะเห็นว่าทักษะเล็กๆ น้อยๆ แบบนี้แหละที่ทำให้อาชีพโปรแกรมเมอร์ของคุณเติบโตได้อย่างมั่นคงและยั่งยืน
ที่มา: How to Build a Bulk Image Compressor Tool with HTML, CSS, and JavaScript — freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
