ไม่มีการอัปโหลด, 100% ในเครื่อง, ไม่มีบัญชี

เปรียบเทียบรูปภาพ

โหลดรูปภาพสองรูปและเปรียบเทียบด้วยสไลเดอร์ลากหรือมุมมองเคียงข้างกัน เหมาะสำหรับการแก้ไขก่อน/หลัง ไม่มีการอัปโหลด

เปรียบเทียบรูปภาพด้วยสไลเดอร์ ทำงานอย่างไร

Image Comparison Slider ให้คุณโหลดสองภาพเคียงข้างกันและลาก divider แนวตั้งเพื่อเปิดเผยภาพหนึ่งมากขึ้นและอีกภาพหนึ่งน้อยลง เลย์เอาต์ก่อนและหลังนี้เป็นวิธีที่ตรงไปตรงมาในการแสดงความแตกต่างระหว่างสองเวอร์ชันของภาพ ทั้งสองภาพถูกโหลดจากดิสก์ในเครื่องโดยใช้ File API และแสดงผลบนหน้าจอโดยเบราว์เซอร์ ไม่มีสิ่งใดถูกอัปโหลดไปยังเซิร์ฟเวอร์

แถบเลื่อนใช้ CSS clip-path ดังนั้นการเปลี่ยนแปลงระหว่างสองภาพจึงจัดตำแหน่งพิกเซลตลอดเวลาและไม่มีการผสมหรือ interpolation ที่ขอบเขต คุณยังสามารถสลับเป็นมุมมองแบบ split-screen ที่แสดงสองภาพในแผงซ้ายและขวาที่กำหนด เครื่องมือมีประโยชน์สำหรับการเปรียบเทียบการแก้ไขภาพ ผลการบีบอัด การวนซ้ำการออกแบบ หรือสองภาพใดก็ตามที่คุณต้องการเห็นความแตกต่างอย่างชัดเจน

วิธีใช้ เปรียบเทียบรูปภาพด้วยสไลเดอร์ ทีละขั้นตอน

  1. วางภาพแรก (เวอร์ชัน 'ก่อน') ลงบนพื้นที่อัปโหลดด้านซ้าย
  2. วางภาพที่สอง (เวอร์ชัน 'หลัง') ลงบนพื้นที่อัปโหลดด้านขวา
  3. ลาก divider ซ้ายและขวาเพื่อเปิดเผยภาพหนึ่งมากขึ้นในแต่ละครั้ง
  4. สลับเป็น split view เพื่อดูทั้งสองภาพในแผงที่กำหนดหากต้องการการเปรียบเทียบแบบ static
  5. ใช้ปุ่มเต็มจอเพื่อขยายการเปรียบเทียบสำหรับการตรวจสอบโดยละเอียด

กรณีการใช้งานที่พบบ่อย

  • ช่างภาพเปรียบเทียบการส่งออก RAW ต้นฉบับกับเวอร์ชันที่รีทัชแล้วเพื่อประเมินว่าการแก้ไขเปลี่ยนภาพไปมากเพียงใด
  • นักพัฒนาตรวจสอบคู่ภาพก่อนและหลังการบีบอัดเพื่อประเมินว่าการสูญเสียคุณภาพที่ระดับการบีบอัดที่กำหนดเป็นที่ยอมรับได้หรือไม่
  • นักออกแบบ UX นำเสนอการออกแบบ UI ใหม่โดยวางภาพหน้าจออินเทอร์เฟซเก่าด้านซ้ายและใหม่ด้านขวาสำหรับการตรวจสอบของผู้มีส่วนได้ส่วนเสีย
  • บรรณาธิการเนื้อหาตรวจสอบว่าการจัดการภาพ (การปรับสี การตัด) สอดคล้องกันระหว่างภาพขนาดย่อและเวอร์ชันเต็มขนาด

คำถามที่พบบ่อย

สองภาพต้องมีขนาดเท่ากันหรือไม่?

เครื่องมือทำงานได้ดีที่สุดเมื่อทั้งสองภาพมีขนาดเท่ากัน เนื่องจากแถบเลื่อนซ้อนทับกันอย่างแม่นยำ หากภาพมีขนาดต่างกัน เครื่องมือจะปรับขนาดให้เป็นขนาดแสดงผลทั่วไป อาจมีการไม่จัดตำแหน่งที่ขอบหากอัตราส่วนภาพต่างกัน

ภาพถูกส่งไปที่ใดเพื่อให้การเปรียบเทียบทำงานหรือไม่?

ไม่ ทั้งสองภาพถูกโหลดจากระบบไฟล์ของคุณผ่าน File API และวาดลงในองค์ประกอบ Canvas ในเบราว์เซอร์ของคุณ การเปรียบเทียบเป็นการดำเนินการแสดงผลฝั่งไคลเอนต์ ทั้งสองภาพไม่ออกจากอุปกรณ์ของคุณ

ฉันสามารถเปรียบเทียบภาพจากสอง URL แทนไฟล์ในเครื่องได้หรือไม่?

เครื่องมือปัจจุบันรับเฉพาะไฟล์ในเครื่อง การโหลดภาพจาก URL ระยะไกลจะต้องให้เบราว์เซอร์ดึงข้อมูลและอาจมีข้อจำกัด CORS ที่โฮสต์ภาพหลายแห่งไม่อนุญาต

มีขนาดภาพสูงสุดที่การเปรียบเทียบสามารถจัดการได้หรือไม่?

ขีดจำกัดคือหน่วยความจำ Canvas ของเบราว์เซอร์ ภาพที่มีขนาดสูงสุดประมาณ 20 เมกะพิกเซลแต่ละภาพจัดการได้โดยไม่มีปัญหาบนอุปกรณ์เดสก์ท็อปส่วนใหญ่ ภาพขนาดใหญ่มากอาจทำให้การแสดงผลช้าหรือเกิดข้อผิดพลาดหน่วยความจำบน hardware ระดับต่ำ

ฉันสามารถบันทึกภาพหน้าจอของตำแหน่งแถบเลื่อนที่เฉพาะเจาะจงได้หรือไม่?

เครื่องมือจับภาพหน้าจอของระบบปฏิบัติการ (หรือฟีเจอร์ภาพหน้าจอของเบราว์เซอร์ใน DevTools) เป็นวิธีที่ตรงไปตรงมาในการจับภาพตำแหน่งแถบเลื่อนที่เฉพาะเจาะจง มุมมองการเปรียบเทียบเองไม่มีปุ่มส่งออก built-in สำหรับภาพที่รวมกัน