ImageCropper - ตัดรูปภาพในเบราว์เซอร์

โหลดเมื่อใช้ — อยู่ใน feature bundle now.imagecrop.min.js (+ .css) ไม่ได้อยู่ใน now.core.min.js: ช่องไฟล์ data-crop="true" โหลดให้เอง ส่วนโค้ดที่เรียก ImageCropper ตรง ๆ ให้ await Now.require('ImageCropper') ก่อน — ดู Feature bundle

ImageCropper เปิดรูปหนึ่งรูปในหน้าต่างครอป ให้ผู้ใช้เลื่อน ซูม และหมุนรูปใต้กรอบ แล้วคืนผลเป็น File ใหม่
กรอบคงที่ตามสัดส่วนที่กำหนด รูปเป็นฝ่ายเคลื่อนที่ และต้องคลุมกรอบเต็มเสมอ ผลที่ได้จึงไม่มีขอบว่าง

ทางที่ใช้บ่อยที่สุดคือให้ FileElementFactory เปิดให้ ด้วย data-crop="true" บนช่องไฟล์
หน้านี้อธิบายตัวครอปเอง สำหรับเรียกจากโค้ดโดยตรง

สารบัญ

1. การใช้งาน
2. ตัวเลือก
3. การควบคุมในหน้าต่างครอป
4. ไฟล์ที่ได้
5. ครอปซ้ำจากต้นฉบับ
6. CSS

การใช้งาน

await Now.require('ImageCropper');

const file = await ImageCropper.open(input.files[0], {aspect: '3/4', width: 600});
if (file) {
  // File ที่ครอปแล้ว
} else {
  // ผู้ใช้กดยกเลิก ปุ่มปิด หรือ Escape
}

ImageCropper.open(source, options)

คืน Promise<File|null> — null เมื่อผู้ใช้ยกเลิก
reject ด้วย Error (ข้อความแปลแล้ว "Unable to open this image") เมื่อเปิดรูปไม่ได้ เช่นไม่ใช่รูป หรือเป็นชนิดที่เบราว์เซอร์อ่านไม่ได้

หน้าต่างครอปแสดงทีละรูป เรียก open() ซ้อนกันได้ รูปถัดไปจะรอจนหน้าต่างก่อนหน้าปิดเสร็จ

ตัวเลือก

ทุกตัวรับได้ทั้งตัวเลขและสตริงแบบที่ data attribute ส่งมา

การควบคุมในหน้าต่างครอป

การซูมด้วยล้อเมาส์และสองนิ้วยึดจุดที่ชี้อยู่ไว้กับที่ · Escape ปิดเฉพาะหน้าต่างครอป ไม่ปิด modal ที่เปิดอยู่ข้างใต้
พื้นที่ครอปปรับกรอบตามขนาดหน้าต่างเสมอ (หมุนมือถือหรือย่อหน้าต่างแล้วส่วนที่เลือกไว้ไม่เปลี่ยน)

ไฟล์ที่ได้

• ขนาด width × round(width / aspect) px (หรือขนาดจริงของส่วนที่ครอปเมื่อ width เป็น 0)
• ชื่อเดิมของต้นฉบับเมื่อชนิดไม่เปลี่ยน · เปลี่ยนชนิดแล้วนามสกุลเปลี่ยนตาม (photo.png + format: 'jpeg' = photo.jpg)
• ต้นฉบับที่ไม่มีชื่อ (Blob, data: URL) ได้ชื่อ image + นามสกุล
• เบราว์เซอร์ที่เขียน WebP ไม่ได้ (Safari) ได้ JPEG แทน
• JPEG ไม่มีความโปร่งใส ส่วนที่โปร่งใสของต้นฉบับเป็นสีขาว
• การหมุนของรูปจากกล้อง (EXIF) ถูกนำมาใช้แล้วตั้งแต่ตอนเปิดรูป

การครอปในเบราว์เซอร์ไม่ใช่ด่านความปลอดภัย เซิร์ฟเวอร์ต้องตรวจชนิดไฟล์และบันทึกรูปใหม่เองเสมอ
(เช่น UploadedFile::cropImage() / resizeImage() ของ Kotchasan)

ครอปซ้ำจากต้นฉบับ

File ที่ ImageCropper สร้างจำต้นฉบับและการครอปของมันไว้
ส่ง File นั้นให้ open() อีกครั้งจะเปิดต้นฉบับที่ตำแหน่ง ระดับซูม และการหมุนเดิม รูปจึงไม่ถูกย่อซ้ำทุกครั้งที่แก้

let photo = await ImageCropper.open(original, {aspect: 1, width: 400});
// ภายหลัง: แก้การครอป
photo = await ImageCropper.open(photo, {aspect: 1, width: 400}) || photo;

CSS

ไฟล์ Now/css/image-cropper.css (อยู่ใน now.imagecrop.min.css)