กลไกทางเทคนิคของการเพิ่มมุมมน ให้กับรูปภาพภายในเบราว์เซอร์
เมื่อคุณใช้โปรแกรมแก้ไขรูปภาพออนไลน์แบบดั้งเดิม ขั้นตอนมาตรฐานคือการอัปโหลดไฟล์ของคุณไปยังเซิร์ฟเวอร์ปลายทาง ซึ่งสคริปต์แบ็กเอนด์ (มักใช้ไลบรารีอย่าง ImageMagick หรือ FFmpeg) จะประมวลผลรูปภาพแล้วส่งกลับมาให้คุณ วิธีนี้เชื่องช้า สิ้นเปลืองทรัพยากร และเสี่ยงต่อเรื่องความเป็นส่วนตัว เครื่องมือทำรูปมุมมนของเราเปลี่ยนรูปแบบนี้อย่างสิ้นเชิง โดยการใช้พลังของเว็บเบราว์เซอร์สมัยใหม่ในการคำนวณ กราฟิกทั้งหมดภายในเครื่องของคุณเอง
หัวใจหลักของเทคโนโลยีของเราพึ่งพา HTML5 Canvas API ซึ่งเป็นชุดฟังก์ชันทรงพลังที่ช่วยให้สามารถเรนเดอร์รูปทรง 2D และภาพบิตแมปได้อย่างยืดหยุ่น เมื่อคุณลากและวางรูปภาพลงในเครื่องมือ เราจะใช้ File API Native และ URL.createObjectURL() เพื่อโหลดรูปภาพเข้าสู่หน่วยความจำของเบราว์เซอร์โดยตรง โดยไม่มีการส่งข้อมูลแม้แต่ไบต์เดียวผ่านอินเทอร์เน็ต ทำให้เราบรรลุสัญญาว่าจะไม่มีการอัปโหลดไฟล์ลงเซิร์ฟเวอร์
เมื่อรูปภาพถูกโหลดเข้าสู่หน่วยความจำแล้ว ระบบจะสร้าง HTML5 Canvas เบื้องหลังที่มีขนาดตรงกับไฟล์ต้นฉบับของคุณ ในการสร้างมุมมน เอ็นจิ้น JavaScript ของเราจะสร้างเส้นทางตัดขอบ (clipping path) ที่ซับซ้อน โดยใช้เมธอด arcTo และ bezierCurveTo ของ canvas เพื่อกำหนดรัศมีขอบที่คุณเลือกผ่านแถบเลื่อน จากนั้นคอนเทกซ์ของ canvas จะถูกตัดตามรูปทรงนี้ และภาพต้นฉบับจะถูกวาดลงไป พิกเซลที่อยู่นอกพื้นที่ตัดขอบจะถูกลบทิ้ง ส่งผลให้ได้ขอบที่โค้งมนเรียบเนียน สุดท้าย ข้อมูลบน canvas จะถูกแปลงกลับเป็นวัตถุ Blob โดยใช้ฟอร์แมต PNG เพื่อรักษาความโปร่งใสของมุมภาพ และพร้อมให้คุณดาวน์โหลด ทั้งหมดนี้เกิดขึ้นในเวลาเพียงเสี้ยววินาที ปลอดภัยและเป็นส่วนตัว 100%