ครอปรูปภาพ ฟรี

วิธีการทำงาน

การครอปเกิดขึ้นในเบราว์เซอร์ทั้งหมดด้วย HTML5 Canvas API — ไม่มีการอัปโหลด ไม่มีเซิร์ฟเวอร์ คุณลากพื้นที่เลือกบนองค์ประกอบ canvas โดยตรง และเมื่อใช้การครอป เอนจินเรนเดอร์ 2D ในตัวของเบราว์เซอร์จะอ่านเฉพาะพิกเซลที่เลือกและเข้ารหัสใหม่เป็น JPEG, PNG หรือ WebP

1. 1
   โหลดภาพเข้าหน่วยความจำ

   ไฟล์ของคุณถูกอ่านด้วย URL.createObjectURL() ซึ่งให้ blob URL ในเครื่องแก่เบราว์เซอร์ HTMLImageElement ถอดรหัสไฟล์ในแท็บเบราว์เซอร์ทั้งหมด — ไบต์ของภาพไม่เคยออกจากอุปกรณ์
2. 2
   Pointer Events ขับเคลื่อนการเลือกพื้นที่ครอป

   Pointer Events API ของเบราว์เซอร์ (ซึ่งรวมอินพุตเมาส์ สัมผัส และปากกา) ติดตามการลากบนเลเยอร์ canvas การกดนอกพื้นที่เลือกเริ่มสี่เหลี่ยมใหม่ การกดด้านในจะย้าย การกดใกล้มุมขวาล่างจะปรับขนาด ค่าสำเร็จรูปอัตราส่วนภาพ (1:1, 16:9, 4:3 ฯลฯ) จำกัดรูปทรงระหว่างลาก
3. 3
   Canvas วาดตัวอย่างสด

   ทุกครั้งที่พื้นที่ครอปเปลี่ยน context ของ Canvas 2D จะวาดภาพใหม่ ใส่เลเยอร์มืดนอกพื้นที่เลือก ล้างพื้นที่ครอปเพื่อแสดงภาพต้นฉบับที่ความคมชัดเต็ม และซ้อนตารางกฎสามส่วนและตัวจับปรับขนาดสีเขียวอมฟ้า
4. 4
   toBlob() เข้ารหัสและส่งผลลัพธ์

   เมื่อคุณคลิกครอป canvas นอกจอใหม่จะถูกสร้างตามขนาดครอปที่แน่นอน ctx.drawImage() คัดลอกเฉพาะสี่เหลี่ยมที่เลือก และ canvas.toBlob() เข้ารหัสผลลัพธ์ด้วยตัวเข้ารหัส JPEG, PNG หรือ WebP เนทีฟของเบราว์เซอร์ที่การตั้งค่าคุณภาพที่เลือก ผลลัพธ์ส่งกลับเป็น blob URL ในเครื่องสำหรับดาวน์โหลด

เครื่องมือที่เกี่ยวข้อง