ตัดภาพ _

การตัดภาพในเบราว์เซอร์ทำงานอย่างไร

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

1. โหลดภาพลงในองค์ประกอบ <img> เพื่อให้เบราว์เซอร์ถอดรหัสในเครื่อง ชั้น Canvas จะแสดงภาพที่ปรับขนาดให้พอดีกับวิวพอร์ต ในขณะที่สี่เหลี่ยมเลือกที่ลากได้แสดงพื้นที่ตัดปัจจุบัน
2. ลากสี่เหลี่ยมตามขอบหรือมุมเพื่อปรับพื้นที่ตัด สี่เหลี่ยมจะถูกจำกัดอยู่ภายในขอบภาพเพื่อให้คุณไม่สามารถเลือกพื้นที่นอกภาพได้ เมื่ออัตราส่วนภาพคงที่ทำงานอยู่ (1:1, 16:9, 4:3) การปรับขนาดจะรักษาอัตราส่วนนั้นโดยอัตโนมัติ
3. การอ่านค่าพิกเซลจะอัปเดตแบบเรียลไทม์ขณะที่คุณลาก โดยแสดงความกว้าง ความสูง ตำแหน่ง X และ Y ของการตัดในพิกัดพิกเซลภาพ ซึ่งช่วยให้คุณกำหนดขนาดที่แน่นอนได้โดยไม่ต้องเดา
4. เมื่อคุณคลิกตัดและดาวน์โหลด หน้าจะวาดเฉพาะพื้นที่ที่เลือกของภาพต้นฉบับลงบน Canvas นอกหน้าจอที่ความละเอียดพิกเซลเดิม จากนั้นส่งออกผลลัพธ์ผ่าน canvas.toBlob() ในรูปแบบเดียวกับไฟล์ต้นฉบับ URL Blob จะถูกสร้างขึ้นสำหรับการดาวน์โหลด

ทำไมต้องตัดภาพออนไลน์?

• การตัดช่วยกำจัดขอบที่ไม่ต้องการ พื้นที่ว่าง หรือความรกทางสายตา การตัดเพียงครั้งเดียวมักจะปรับปรุงองค์ประกอบของภาพได้มากกว่าฟิลเตอร์หรือการปรับสีใดๆ
• การควบคุมอัตราส่วนภาพเป็นสิ่งจำเป็นสำหรับแพลตฟอร์มการเผยแพร่ ฟีดโซเชียลมีเดียต้องการอัตราส่วน 1:1 สำหรับโปรไฟล์ 16:9 สำหรับภาพขนาดย่อวิดีโอ และ 4:3 สำหรับภาพถ่ายมาตรฐาน การตัดให้ได้อัตราส่วนที่ถูกต้องช่วยหลีกเลี่ยงการเกิด letterboxing หรือการถูกตัดออกเมื่ออัปโหลด
• การตัดฝั่งไคลเอ็นต์เป็นตัวเลือกเดียวบนอุปกรณ์องค์กรที่ถูกจำกัดซึ่งไม่มีโปรแกรมแก้ไขภาพ เนื่องจากไม่มีการอัปโหลดใดๆ จึงไม่มีความเสี่ยงในการรั่วไหลของข้อมูลและไม่จำเป็นต้องตรวจสอบการปฏิบัติตามข้อกำหนดสำหรับภาพที่ละเอียดอ่อน
• การแสดงขนาดแบบเรียลไทม์ช่วยขจัดการเดา คุณเห็นพิกัดพิกเซลและขนาดที่เลือกขณะที่คุณลาก ดังนั้นคุณจึงสามารถตัดให้ได้ความกว้างและความสูงที่แน่นอนโดยไม่ต้องเปลี่ยนไปใช้เครื่องมือวัดพิกเซล

การใช้งานตัดภาพทั่วไป

การตัดภาพเป็นการปรับแต่งภาพที่พบบ่อยที่สุดอย่างหนึ่งในการเผยแพร่เว็บ โซเชียลมีเดีย และการพัฒนาซอฟต์แวร์ นี่คือสามรูปแบบที่เครื่องมือตัดบนเบราว์เซอร์ช่วยประหยัดเวลา

• เตรียมภาพสินค้าสำหรับร้านค้าออนไลน์ ตัดให้มีอัตราส่วน 1:1 หรือ 4:5 ที่สม่ำเสมอเพื่อให้ภาพขนาดย่อทุกรายการเรียงตัวกันในกริด การส่งออกจะรักษารูปแบบต้นฉบับไว้ ดังนั้นภาพสินค้า JPEG จะยังคงเป็น JPEG
• ตัดภาพหน้าจอสำหรับเอกสารหรือรายงานบั๊ก ตัดแถบเครื่องมือเบราว์เซอร์ แถบงาน Windows หรือการแจ้งเตือนที่ละเอียดอ่อนออกก่อนแนบภาพกับตั๋วหรือ pull request
• จัดกรอบภาพหลักหรือแบนเนอร์สำหรับหน้าแลนดิ้ง ล็อกค่าที่ตั้งไว้ 16:9 วางส่วนสำคัญที่สุดของภาพไว้ตรงกลางสี่เหลี่ยมตัด และส่งออกที่ความละเอียดเดิมเพื่อคุณภาพที่ดีที่สุดบนจอภาพ retina

ตัวอย่างการใช้งาน: ตัดภาพ 4000×3000 เป็น 1200×675 สำหรับแบนเนอร์หลัก

ภาพถ่าย 4000×3000 พิกเซลจากกล้องดิจิทัลมีขนาดใหญ่เกินไปสำหรับแบนเนอร์หลักของเว็บทั่วไป พื้นที่แบนเนอร์อาจเป็น 1200×675 (กรอบ 16:9)

วางภาพลงในโซนอัปโหลด ภาพจะโหลดที่ความละเอียดเต็มแต่ปรับขนาดให้พอดีกับวิวพอร์ตเพื่อการลากที่สะดวกสบาย เลือกค่าที่ตั้งไว้ล่วงหน้าอัตราส่วน 16:9 สี่เหลี่ยมตัดจะยึดติดกับพื้นที่ 16:9 ที่กว้างที่สุดที่พอดีกับภาพทันที ลากสี่เหลี่ยมเพื่อวางจุดโฟกัส — ยอดเขา สินค้า ใบหน้าของบุคคล — ในกรอบ การอ่านค่าแบบสดแสดงการเลือกปัจจุบันที่ 4000×2250 (หน้าต่าง 16:9 เต็มภาพ) จับที่จับมุมแล้วลากเข้าด้านในจนกว่าการอ่านค่าความกว้างถึง 1200 px ความสูงจะตามมาโดยอัตโนมัติเนื่องจากอัตราส่วนถูกล็อก คลิก ตัดและดาวน์โหลด หน้าจะแยกพื้นที่ 1200×675 ที่เลือกจากพิกเซลต้นฉบับและส่งมอบไฟล์ที่ตัดแล้วในรูปแบบต้นฉบับ กระบวนการทั้งหมดใช้เวลาหนึ่งหรือสองวินาทีและไม่ใช้แบนด์วิดท์เครือข่ายนอกเหนือจากการโหลดหน้าแรก

รูปแบบภาพใดบ้างที่รองรับสำหรับการตัด

เครื่องมือยอมรับทุกรูปแบบที่เบราว์เซอร์สามารถถอดรหัสได้: PNG, JPEG และ WebP ครอบคลุมเกือบทุกกรณีการใช้งานจริง ผลลัพธ์ที่ตัดแล้วจะถูกบันทึกในรูปแบบเดียวกับไฟล์ต้นฉบับ PNG คงคุณภาพแบบไม่สูญเสียข้อมูล JPEG รักษาระดับคุณภาพเดิม และ WebP ยังคงเป็น WebP รูปแบบจะถูกตรวจพบจากชนิด MIME ของไฟล์ต้นฉบับ

การตัดช่วยลดขนาดไฟล์ภาพหรือไม่

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

ค่าที่ตั้งไว้ล่วงหน้าอัตราส่วนภาพทำอะไร

ค่าที่ตั้งไว้ล่วงหน้า (1:1, 16:9, 4:3, 3:2, 9:16) ล็อกอัตราส่วนความกว้างต่อความสูงของสี่เหลี่ยมตัด เมื่อค่าที่ตั้งไว้ทำงานอยู่ การลากที่จับมุมหรือขอบจะปรับขนาดที่เลือกในขณะที่รักษาอัตราส่วนให้คงที่ การเปลี่ยนไปใช้โหมดอิสระจะลบข้อจำกัดเพื่อให้คุณปรับขนาดสี่เหลี่ยมได้ตามต้องการ อัตราส่วนถูกบังคับใช้บนพิกัดพิกเซลภาพ ดังนั้นผลลัพธ์ที่ส่งออกจะมีอัตราส่วนภาพที่คุณเลือกอย่างแน่นอน

ภาพถูกอัปโหลดไปยังเซิร์ฟเวอร์หรือไม่

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

ฉันสามารถตัดพื้นที่เฉพาะโดยป้อนพิกัดพิกเซลที่แน่นอนได้หรือไม่

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

เกิดอะไรขึ้นกับภาพต้นฉบับ

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

มีขีดจำกัดขนาดไฟล์สำหรับการตัดหรือไม่

เครื่องมือปฏิบัติตามขีดจำกัด 30 MB ต่อไฟล์ในโซนอัปโหลดเพื่อควบคุมหน่วยความจำเบราว์เซอร์บนอุปกรณ์ระดับล่าง หากภาพของคุณใหญ่กว่า 30 MB คุณสามารถปรับขนาดก่อนโดยใช้เครื่องมือปรับขนาดภาพโดยเฉพาะก่อนโหลดที่นี่เพื่อตัด

การตัดทำงานบนมือถือและแท็บเล็ตหรือไม่

ใช่ ที่จับตัดถูกออกแบบโดยคำนึงถึงเป้าหมายการสัมผัส และการโต้ตอบใช้ pointer events ที่ทำงานได้ทั้งคลิกเมาส์และแตะนิ้ว บนหน้าจอมือถือ ตัวอย่างภาพจะปรับตามความกว้างที่มีอยู่ และส่วนควบคุมจะเรียงซ้อนในแนวตั้งเพื่อการใช้งานมือเดียวที่สะดวก