รูปภาพและภาพถ่าย · โปรแกรมแก้ไขรูปภาพและภาพวาดของเบราว์เซอร์
วิธีการครอบตัดในโปรแกรมแก้ไขรูปภาพของเบราว์เซอร์: แคนวาสและพิกเซล
· มันทำงานอย่างไร
การแก้ไขภาพ ผ้าใบ การประมวลผลเบราว์เซอร์
การครอบตัดดูเล็กน้อย แต่โปรแกรมแก้ไขเบราว์เซอร์ต้องถอดรหัสไฟล์ คัดลอกสี่เหลี่ยมพิกเซลลงบนผืนผ้าใบ และเข้ารหัสไฟล์ใหม่ล่าสุด โพสต์นี้จะอธิบายแต่ละขั้นตอนและอธิบายว่ามีการเปลี่ยนแปลงใดบ้างและสิ่งใดยังคงเหมือนเดิม
เหตุใดรูปภาพที่ครอบตัดจึงเป็นไฟล์ใหม่ ไม่ใช่รูปภาพเก่าที่ถูกตัดแต่ง — การครอบตัดไม่สามารถลบไบต์ออกจาก JPEG หรือ PNG ได้ ดังนั้นตัวแก้ไขจะถอดรหัสและเข้ารหัสอีกครั้ง
JPEG จัดเก็บข้อมูลรูปภาพที่ถูกบีบอัด ไม่ใช่ช่วงไบต์ที่สามารถลบได้โดยอิสระต่อแถวที่มองเห็นได้ การตัดไบต์ออกจากส่วนท้ายจะทำให้ไฟล์เสียหาย ไม่ใช่ตัดภาพ โปรแกรมแก้ไขเบราว์เซอร์จึงถอดรหัสรูปภาพ เลือกสี่เหลี่ยม และสร้างไฟล์ที่เข้ารหัสใหม่ ต้นฉบับยังคงอยู่ในดิสก์ของคุณ หากคุณต้องการการแก้ไขแบบย้อนกลับ ให้คงแหล่งที่มาและพิกัดการเลือกไว้: การครอบตัดที่ส่งออกไม่มีพิกเซลที่หายไป
การถอดรหัสรูปภาพเป็นบิตแมป — วิธีที่เบราว์เซอร์เปลี่ยนไบต์ที่บีบอัดให้เป็นตารางความกว้าง × ความสูง RGBA พิกเซล ก่อนที่จะสามารถเลือกสิ่งใดๆ ได้
เบราว์เซอร์จะเปลี่ยน JPEG, PNG หรือ WebP ที่ถูกบีบอัดให้เป็นบิตแมปพร้อมตัวอย่างความกว้าง × ความสูง รูปภาพ 4000×3000 แสดงถึงสิบสองล้านพิกเซลก่อนการครอบตัดใดๆ และหลายไบต์ต่อพิกเซลสามารถทำให้พื้นที่ในหน่วยความจำมีขนาดใหญ่กว่าไฟล์บนดิสก์มาก ToolAcre ตรวจสอบขีดจำกัดของรูปภาพและผืนผ้าใบก่อนจัดสรรพื้นที่ทำงานขนาดใหญ่มาก สิ่งที่คุณเห็นบนหน้าจออาจถูกซูมให้พอดีกับวิวพอร์ต สี่เหลี่ยมครอบตัดจะต้องยังคงถูกแมปกลับไปยังพิกัดรูปภาพก่อนที่จะคัดลอกพิกเซล
การเลือกสี่เหลี่ยมผืนผ้า: พิกัดต้นทางและปลายทาง - วิธีที่ DrawImage คัดลอกขอบเขตที่เลือกลงบนผืนผ้าใบที่มีขนาดเป้าหมาย และการปัดเศษเป็นพิกเซลทั้งหมดหมายถึงอะไร
สี่เหลี่ยมผืนผ้าคือจุดกำเนิด (x,y) บวกกับความกว้างและความสูง วัดเป็นพิกเซลต้นทาง ToolAcre จำกัดสี่เหลี่ยมนั้นไว้ที่ขอบเขตของเอกสาร และครอบตัดทุกเลเยอร์ที่มองเห็นได้ ไม่ใช่แค่ภาพหน้าจอของการแสดงตัวอย่างแบบผสม สำหรับแต่ละเลเยอร์จะสร้างผืนผ้าใบเป้าหมายและเรียก DrawImage พร้อมด้วยอาร์กิวเมนต์เก้าข้อ ได้แก่ ผืนผ้าใบต้นทาง สี่เหลี่ยมต้นทาง ต้นทางปลายทาง และขนาดปลายทาง ด้วยขนาดต้นทางและปลายทางที่เท่ากัน พิกเซลจะถูกเลือกโดยไม่มีขั้นตอนการปรับขนาด ตำแหน่งตัวชี้แบบเศษส่วนจะถูกปัดเศษหรือยึดเข้ากับพิกเซลแคนวาสที่เป็นตัวแทนได้
เข้ารหัสผลลัพธ์กลับไปยังไฟล์ - เหตุใดขั้นตอนการส่งออกจึงตัดสินใจเลือกรูปแบบและคุณภาพ และเหตุใดการครอบตัดเองจึงแม่นยำในขณะที่การเข้ารหัสอาจไม่เป็นเช่นนั้น
การส่งออกเป็นการดำเนินการแยกต่างหากจากการครอบตัด ผืนผ้าใบที่แก้ไขสามารถเข้ารหัสเป็น PNG, JPEG หรือ WebP ขึ้นอยู่กับตัวเลือกและการรองรับเบราว์เซอร์ PNG สามารถรักษาพิกเซลที่จ่ายให้กับตัวเข้ารหัสแบบไม่สูญเสียข้อมูลได้ JPEG ละทิ้งรายละเอียดบางส่วน แม้ว่าสี่เหลี่ยมจะถูกเลือกไว้ทุกประการ และความโปร่งใสจำเป็นต้องมีพื้นหลังโดยเจตนาเมื่อใช้รูปแบบที่ไม่มีอัลฟ่า ไฟล์ใหม่ยังสามารถละเว้นข้อมูลเมตาต้นฉบับหรือข้อมูลสีได้ ดังนั้นอย่าอธิบายว่าเป็นชุดย่อยแบบไบต์ต่อไบต์ของต้นฉบับ
ตัวอย่างการทำงาน: การครอบตัดรูปภาพ 4000×3000 ไปยังแบนเนอร์ 1600×900 — ตามจำนวนพิกเซลผ่านการถอดรหัส คัดลอก และส่งออก
สำหรับบล็อกเกอร์ที่มีรูปภาพ 4000×3000 แบนเนอร์ 1600×900 ตรงกลางจะเริ่มต้นที่ x=1200 และ y=1050 DrawImage คัดลอกคอลัมน์ 1200 ถึง 2799 และแถว 1050 ถึง 1949 ไปยัง 1600×900 เอาต์พุต: 1.44 ล้านพิกเซล แทนที่จะเป็น 12 ล้าน หากคุณขอให้ผู้แก้ไขย่อขนาดภาพเต็มเป็น 1600×900 แทน คุณจะเปลี่ยนอัตราส่วนภาพและสุ่มตัวอย่างใหม่ แทนที่จะทำการครอบตัดนี้ บนโทรศัพท์ที่มีหน่วยความจำจำกัด โปรแกรมแก้ไขอาจลดอินพุตที่มีขนาดใหญ่มากก่อน ดังนั้นควรตรวจสอบขนาดที่แสดงก่อนที่จะทำซ้ำพิกัดเหล่านี้
สิ่งที่พืชที่ส่งออกไม่สามารถกู้คืนจากรูปภาพต้นฉบับได้
นี่ไม่ใช่การครอบตัดบล็อก JPEG แบบไม่สูญเสีย: แอปพลิเคชันดึงพิกเซลและส่งออกคอนเทนเนอร์ใหม่ และไฟล์ 1600×900 ที่ส่งออกก็ไม่สามารถกู้คืนระยะขอบที่ถูกละทิ้งหลังจากที่คุณปิดต้นฉบับได้ เอกสารการแก้ไขแบบเลเยอร์จะแตกต่างออกไปอีกครั้ง: การครอบตัดจะทำหน้าที่ในเลเยอร์เอกสาร ในขณะที่ส่งออกจะรวมเลเยอร์เหล่านั้นลงในรูปภาพที่ดาวน์โหลด สำหรับวัสดุที่ละเอียดอ่อน การครอบตัดระยะขอบออกจะปลอดภัยกว่าการวาดภาพซ้อนทับแบบทึบ แต่ตรวจสอบพิกเซลที่ส่งออกและเก็บต้นฉบับไว้เป็นส่วนตัว
ประเด็นสำคัญ: พิกเซลที่แน่นอน คอนเทนเนอร์ใหม่ — เหตุใดการครอบตัดของเบราว์เซอร์จึงแม่นยำ และวิธีที่ Browser Image & Drawing Editor ทำงานโดยไม่ต้องอัปโหลดไฟล์
การครอบตัดของเบราว์เซอร์จะแม่นยำว่าพิกเซลที่ถอดรหัสตัวไหนที่จะเก็บไว้ ในขณะที่ตัวเข้ารหัสที่เลือกจะควบคุมไฟล์ที่ดาวน์โหลด โปรแกรมแก้ไขรูปภาพและภาพวาดของเบราว์เซอร์ดำเนินการทั้งสองขั้นตอนบนอุปกรณ์ของคุณ: โหลดรูปภาพ เลือกสี่เหลี่ยม ใช้การครอบตัด และส่งออก เครือข่ายไม่ต้องการไบต์รูปภาพสำหรับขั้นตอนใดขั้นตอนหนึ่ง แต่ไม่ควรสับสนระหว่างเนื้อหาของไซต์และคำขอ AdSense/analytics ที่เปิดเผยกับการอัปโหลดไฟล์ใน DevTools