สร้างภาพเปรียบเทียบ
Before & After
เปรียบเทียบสองรูปภาพด้วยสไลเดอร์แบบโต้ตอบตามเวลาจริง
ส่งออกผลลัพธ์เป็นไฟล์ PNG — เหมาะสำหรับการแชร์ความคืบหน้า/ผลลัพธ์
📷 ภาพ Before (ก่อน)
✨ ภาพ After (หลัง)
เกี่ยวกับ
เครื่องมือ Before & After Comparison Slider ช่วยให้คุณสามารถเปรียบเทียบสองรูปภาพด้วยสไลเดอร์ลากแบบโต้ตอบ มีประโยชน์อย่างยิ่งสำหรับงานแต่งภาพ ติดตามความคืบหน้าในการก่อสร้าง ฟิตเนส... เครื่องมือทำงานบนเบราว์เซอร์ทั้งหมดโดยใช้ Canvas API
คุณสามารถลากสไลเดอร์ไปที่ตำแหน่งใดก็ได้ และบันทึกสถานะการเปรียบเทียบนั้นเป็นไฟล์ PNG จะไม่มีข้อมูลภาพถูกส่งไปยังเซิร์ฟเวอร์ใด ๆ มั่นใจในความปลอดภัยได้อย่างแน่นอน
วิธีใช้งาน
เลือกภาพ
อัปโหลดภาพก่อน (Before) และหลัง (After) โดยการคลิกหรือลากไฟล์มาวาง
ลากสไลเดอร์
ลากสไลเดอร์ในพื้นที่แสดงผลเพื่อปรับเส้นแบ่งระหว่างสองภาพ
ส่งออกภาพ
คลิก "บันทึกภาพ PNG" เพื่อดาวน์โหลดผลลัพธ์ที่ตำแหน่งสไลเดอร์ที่คุณกำลังหยุดเป๊ะๆ
อภิธานศัพท์
- Before & After (ก่อนและหลัง)
- การนำเสนอด้วยภาพเปรียบเทียบสถานะก่อนและหลังการรักษา การก่อสร้าง หรือการแก้ไข โดยใช้รูปภาพสองรูปเป็นตัวแทนของสองสถานะ
- การเปรียบเทียบด้วยสไลเดอร์
- อินเทอร์เฟซแบบโต้ตอบที่ให้คุณลากสไลเดอร์ไปทางซ้าย/ขวาเพื่อแสดงรูปภาพก่อนหรือหลังในเฟรมเดียวกัน
- Canvas API
- API สำหรับวาดกราฟิก 2D ของ HTML5 ใช้เพื่อเรนเดอร์รูปภาพทั้งสองบนผืนผ้าใบและ "ตัด" (คลิป) ตามตำแหน่งสไลเดอร์เพื่อสร้างอินเทอร์เฟซเปรียบเทียบ
- Pointer Events API
- API ที่จัดการการป้อนข้อมูลด้วยเมาส์ สัมผัส และปากกาอย่างสม่ำเสมอ ช่วยให้ลากสไลเดอร์ได้อย่างราบรื่นบนทุกอุปกรณ์
- การตัด (Clipping)
- การจำกัดพื้นที่วาดภาพให้อยู่ในรูปร่างเฉพาะ ในสไลเดอร์ Before/After ผืนผ้าใบจะถูกตัดที่ตำแหน่งสไลเดอร์
- อัตราส่วนภาพ (Aspect Ratio)
- อัตราส่วนระหว่างความกว้างและความสูงของรูปภาพ รูปภาพทั้งสองควรมีอัตราส่วนภาพเท่ากันเพื่อให้การเปรียบเทียบเป็นธรรมชาติที่สุด
- PNG
- รูปแบบภาพที่ไม่สูญเสียคุณภาพเมื่อบันทึก รองรับพื้นหลังโปร่งใส ใช้เป็นรูปแบบการส่งออกของเครื่องมือนี้
- WebP
- รูปแบบภาพสมัยใหม่ของ Google ที่มีขนาดเล็กกว่า JPEG/PNG แต่มีคุณภาพใกล้เคียงกัน รองรับการใช้งานเป็นไฟล์ต้นฉบับ
FAQ
- Q.จะเกิดอะไรขึ้นหากสองรูปภาพมีขนาดแตกต่างกัน?
- รูปภาพทั้งสองจะถูกปรับขนาดให้เท่ากันโดยอัตโนมัติ (คงอัตราส่วนภาพไว้) เพื่อให้ง่ายต่อการเปรียบเทียบ
- Q.ฉันสามารถส่งออกภาพ PNG ณ ตำแหน่งสไลเดอร์ปัจจุบันได้หรือไม่?
- ได้ กด "บันทึกภาพ PNG" เพื่อบันทึกรูปภาพตามที่แสดงบนหน้าจอเป๊ะๆ
- Q.ฉันสามารถซ่อนป้าย BEFORE/AFTER ได้หรือไม่?
- ได้ เพียงยกเลิกการเลือกช่อง "แสดงป้ายกำกับ" ป้ายเหล่านี้จะหายไปจากภาพที่ส่งออก
- Q.รองรับภาพแนวตั้ง (portrait) หรือแนวนอน (landscape) หรือไม่?
- รองรับ เครื่องมือนี้รองรับภาพทั้งสองแนว และคุณสามารถเปลี่ยนทิศทางสไลเดอร์เป็นแนวนอนหรือแนวตั้งได้ตามต้องการ
- Q.รูปภาพของฉันถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?
- ไม่ การประมวลผลรูปภาพทั้งหมดเกิดขึ้นบนเบราว์เซอร์ของคุณ (โดยใช้ Canvas API) ข้อมูลรูปภาพจะไม่ถูกส่งออกไปภายนอกโดยเด็ดขาด
- Q.รองรับรูปแบบไฟล์ภาพใดบ้าง?
- เครื่องมือนี้รองรับ JPEG, PNG, WebP, GIF (ภาพนิ่ง) และรูปแบบอื่นๆ ที่เบราว์เซอร์ของคุณสามารถอ่านได้
- Q.สามารถใช้สไลเดอร์บนสมาร์ทโฟนได้หรือไม่?
- ได้ รองรับระบบสัมผัสอย่างเต็มที่ — เพียงแค่ปัดนิ้วไปทางซ้ายหรือขวาบนพื้นที่เปรียบเทียบ
- Q.ฉันสามารถเปรียบเทียบรูปภาพหลายคู่พร้อมกันได้หรือไม่?
- ปัจจุบันรองรับเพียงครั้งละหนึ่งคู่ คุณสามารถส่งออกภาพ PNG แล้วกด "รีเซ็ต" เพื่ออัปโหลดคู่ภาพใหม่
กรณีการใช้งาน
แต่งภาพ (Retouch)
เปรียบเทียบก่อนและหลังการแต่งภาพด้วย Photoshop/Lightroom และแชร์ให้ลูกค้าดู
ก่อสร้างและปรับปรุง
แสดงให้เห็นความแตกต่างก่อนและหลังของโครงการก่อสร้างตกแต่งภายในหรือรีโนเวทบ้าน
ฟิตเนสและความงาม
เปรียบเทียบผลลัพธ์ของการลดน้ำหนัก การออกกำลังกาย หรือการศัลยกรรมความงามด้วยภาพที่ชัดเจน
จัดสวนและ DIY
บันทึกและแชร์ขั้นตอนการปรับเปลี่ยนสวนหรือโครงการงานประดิษฐ์ DIY ต่างๆ
ส่งความคิดเห็น
โปรดแจ้งให้เราทราบความคิดเห็นของคุณเพื่อช่วยปรับปรุงเครื่องมือ
การส่งความคิดเห็นถูกระงับชั่วคราว
เซิร์ฟเวอร์ไม่ว่างหรือระบบป้องกันสแปมทำงานอยู่ โปรดลองอีกครั้งในภายหลัง