ทำมุมภาพโค้งมน

คลิกเพื่ออัปโหลดรูปภาพ

JPG / PNG / WEBP

ค่าตั้งต้นมุม

รัศมีมุม

20%
050%

รูปแบบเอาต์พุต

อัปโหลดรูปภาพเพื่อแสดงตัวอย่าง

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

คำแนะนำที่เกี่ยวข้อง

สร้าง ICO

ครอปตัดรูปภาพ

ปรับขนาดรูปภาพ

บีบอัดรูปภาพ

แปลงรูปภาพ

การทำมุมภาพโค้งมนคืออะไร?

การทำมุมภาพโค้งมนคือเทคนิคการแทนที่มุมฉากทั้งสี่ของภาพด้วยส่วนโค้งที่นุ่มนวล เครื่องมือนี้ใช้ arcTo() ของ Canvas เพื่อวาดเส้นทางสี่เหลี่ยมมุมโค้ง แล้วเรียก clip() เพื่อตัดภาพให้อยู่ในบริเวณนั้น พื้นที่ที่อยู่นอกการตัดจะกลายเป็นพิกเซลโปร่งใส (Alpha=0) เมื่อส่งออกเป็น PNG

**ผลทางสายตาของมุมโค้งมนคืออะไร?** มุมโค้งมนดูนุ่มนวลและเป็นมิตรกว่ามุมฉาก ลดความแข็งของภาพ นิยมใช้กับไอคอนแอป ปุ่ม การ์ด และอวาตาร์ Squircle ของ iOS นำแนวคิดนี้ไปไกลขึ้นด้วยเส้นโค้งที่นุ่มนวลยิ่งขึ้น

**ทำไมไอคอนแอปจำนวนมากต้องการมุมโค้งมน?** ตั้งแต่ iOS, iPadOS และ macOS Big Sur ระบบจะใช้มาสก์มุมโค้งกับไอคอนแอปโดยอัตโนมัติ และหากภาพต้นทางมีพื้นหลังสีขาวจะเกิดขอบขาวที่มองเห็นได้ วิธีแก้คือส่งออก PNG มุมโค้งล่วงหน้าจากต้นทางเพื่อไม่ให้ระบบแมสก์ซ้ำ และนั่นคือจุดประสงค์ของเครื่องมือนี้

**พิกเซล vs เปอร์เซ็นต์:** พิกเซลแม่นยำแต่จัดแนวระหว่างภาพได้ยาก เปอร์เซ็นต์ปรับตามขนาดโดยอัตโนมัติ ระบบดีไซน์มักใช้เปอร์เซ็นต์ เช่น 22,37 % สำหรับไอคอน iOS และ 25 % สำหรับ Android Adaptive Icon

**ต่างจาก CSS border-radius อย่างไร:** CSS border-radius เป็นเอฟเฟกต์ที่ชั้นแสดงผล ดังนั้นภาพที่ส่งออกยังคงมีมุมฉาก เครื่องมือนี้สร้าง PNG จริงที่มีช่องสัญญาณ Alpha ซึ่งใช้ได้ในทุกสภาพแวดล้อมที่ไม่รองรับ CSS เช่น PowerPoint, วิดีโอ และงานพิมพ์

กรณีการใช้งาน

  • สร้างรูปโปรไฟล์สำหรับแอปแชทและโซเชียลมีเดีย (LINE, WhatsApp, Telegram, X, Instagram, Facebook) ให้เป็นวงกลมสมบูรณ์ด้วยคลิกเดียว
  • เพิ่มมุมโค้งมนให้ไอคอนแอปอย่างรวดเร็ว (iOS 22–25 %, Android Adaptive Icon 25 %)
  • ทำมุมภาพหลักของสินค้าในอีคอมเมิร์ซให้นุ่มนวลขึ้น เพิ่มอัตราการคลิกและการแปลง
  • ประมวลผลภาพมุมโค้งในเครื่องสำหรับสไลด์ PowerPoint, การตัดต่อวิดีโอ และงานพิมพ์
  • ทำให้ชุดไอคอนและชิ้นงานออกแบบมีขนาดมุมที่สอดคล้องกันในระบบดีไซน์ (ทีละชิ้น)

วิธีการใช้งาน

  1. คลิกพื้นที่อัปโหลดเพื่อเลือกภาพ หรือลากไฟล์ JPG, PNG, WEBP ไปยังพื้นที่นั้นโดยตรง
  2. เลือกค่าตั้งต้น เล็ก (10 %), กลาง (25 %) หรือ ใหญ่ (50 %) เพื่อมุมโค้งทันที หรือเลื่อนแถบเลื่อนไปยังค่าที่ต้องการ (คลิกเพื่อสลับระหว่างเปอร์เซ็นต์กับพิกเซล)
  3. เลือกรูปแบบเอาต์พุต: PNG (พื้นหลังโปร่งใส), WEBP (ขนาดเล็ก) หรือ JPG (พื้นหลังขาว, ไม่โปร่งใส)
  4. ดูตัวอย่างผลทางขวาและคลิก ดาวน์โหลด เพื่อบันทึกไฟล์พร้อมคำต่อท้าย -rounded โดยอัตโนมัติ

คุณสมบัติ

  • สองหน่วย: สลับระหว่างพิกเซล (0–500 px) และเปอร์เซ็นต์ (0–50 %) สำหรับรัศมีมุมได้อย่างอิสระ
  • ค่าตั้งต้น 3 ระดับ: เล็ก (10 %), กลาง (25 %), ใหญ่ (50 %) คลิกเดียวเสร็จ พร้อมแถบเลื่อนปรับเอง
  • รูปแบบเอาต์พุต 3 แบบ: PNG (โปร่งใส), WEBP (ขนาดเล็ก) หรือ JPG (พื้นหลังขาว)
  • พรีวิวเรียลไทม์: ปรับแถบเลื่อนแล้วเห็นผลทันที พื้นหลังหมากรุกช่วยแสดงส่วนโปร่งใส
  • อัปโหลดแบบลากและวาง: คลิกเพื่อเลือก หรือลากไฟล์ JPG, PNG, WEBP ไปยังพื้นที่อัปโหลดโดยตรง
  • ประมวลผลในเครื่อง: ทุกอย่างทำงานใน Canvas ของเบราว์เซอร์ ภาพไม่ออกจากอุปกรณ์ของคุณ

Best Practices

เลือก PNG แทน JPG เมื่อต้องการความโปร่งใส

JPG ไม่รองรับช่องสัญญาณ Alpha หากเลือก JPG มุมจะถูกเติมสีขาวและเกิดบล็อกสีขาวที่ไม่พึงประสงค์ เลือก JPG เมื่อมั่นใจว่าไม่ต้องการความโปร่งใสเท่านั้น นอกนั้นให้ใช้ PNG เป็นค่าเริ่มต้น

เลือก WEBP สำหรับชิ้นงานโปร่งใสที่ต้องการขนาดเล็ก

WEBP รองรับความโปร่งใสและมีขนาดเล็กกว่า PNG 25–35 % เหมาะกับชิ้นงานเว็บเป็นอย่างยิ่ง ซอฟต์แวร์ออกแบบรุ่นเก่าบางตัวไม่รู้จัก WEBP ดังนั้นเมื่อทำงานข้ามเครื่องมือควรเลือก PNG

การเลือกสัดส่วนมุมสำหรับไอคอนแอป

iOS เพิ่มมุมประมาณ 22,37 % ให้ไอคอนแอปโดยอัตโนมัติ แต่พื้นหลังสีขาวในภาพต้นทางจะทำให้เกิดขอบขาวที่มองเห็นได้ วิธีที่ถูกคือสร้าง PNG มุมโค้งล่วงหน้าด้วยเครื่องมือนี้ (แนะนำ 22–25 %) สำหรับ Android Adaptive Icon รัศมีที่ปลอดภัยคือ 25 %

ใช้รัศมี 50 % เพื่ออวาตาร์วงกลมสมบูรณ์

แพลตฟอร์มโซเชียลส่วนใหญ่ (LINE, WhatsApp, X, Instagram ฯลฯ) แสดงอวาตาร์เป็นวงกลมสมบูรณ์ ค่าตั้งต้น 50 % จะสร้าง PNG วงกลมโปร่งใสด้วยคลิกเดียว เข้ากันได้ทั้งธีมสว่างและธีมมืด

แนวทางไอคอนแอป iOS

อย่าซ้อน CSS border-radius บนภาพมุมโค้งที่ส่งออกแล้ว

เมื่อส่งออก PNG มุมโค้งจากเครื่องมือนี้แล้ว อย่าใส่ไว้ในคอนเทนเนอร์ที่มี CSS border-radius + overflow:hidden เพราะขอบจะถูกประมวลผลซ้ำและเบลอ ให้แสดงภาพมุมโค้งด้วยแท็ก img ปกติ

ต้องการรูปทรงที่ซับซ้อนกว่า (รัศมีต่างกันต่อมุม, เฉพาะด้านบน)?

เครื่องมือนี้รองรับเฉพาะมุมที่เท่ากันทั้งสี่ด้าน หากต้องการโค้งเฉพาะด้านบน ด้านล่าง หรือรัศมีต่างกันในแต่ละมุม (TabBar, หน้าจอเปิดแอป) ให้ใช้โปรแกรมตกแต่งภาพหรือเครื่องมือออกแบบเช่น Figma

คำถามที่พบบ่อย

จะเพิ่มมุมโค้งมนให้ภาพได้อย่างไร?

หลังจากอัปโหลด คลิกค่าตั้งต้น เล็ก, กลาง หรือ ใหญ่ เพื่อทำมุมโค้งอย่างรวดเร็ว หรือเลื่อนแถบเลื่อนเพื่อตั้งค่าพิกเซล (0–500 px) หรือเปอร์เซ็นต์ (0–50 %) ตามต้องการ แผงด้านขวาแสดงผลแบบเรียลไทม์ เมื่อพอใจแล้ว คลิก ดาวน์โหลด ไฟล์จะถูกบันทึกพร้อมคำต่อท้าย -rounded โดยอัตโนมัติ

ควรใช้พิกเซลหรือเปอร์เซ็นต์สำหรับรัศมีมุม?

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

บริเวณที่โค้งมนจะเป็นอย่างไร?

เมื่อเลือก PNG หรือ WEBP บริเวณมุมจะโปร่งใสสมบูรณ์ (Alpha=0) และกลมกลืนกับทุกพื้นหลัง เมื่อเลือก JPG บริเวณนั้นจะถูกเติมสีขาว (อินเทอร์เฟซจะแสดงคำเตือนสีเหลือง) ใช้ JPG เมื่อไม่ต้องการความโปร่งใสเท่านั้น

รองรับรูปแบบภาพใดบ้าง?

อินพุตรองรับ JPG, PNG และ WEBP เอาต์พุตสามารถเลือกเป็น PNG (โปร่งใส), WEBP (ขนาดเล็กลง) หรือ JPG (พื้นหลังขาว) ไฟล์ที่ดาวน์โหลดจะมีคำต่อท้าย -rounded ติดมาให้อัตโนมัติเพื่อไม่ให้สับสนกับต้นฉบับ

ขอบเขตของรัศมีมุมเป็นอย่างไร?

โหมดเปอร์เซ็นต์อยู่ที่ 0 ถึง 50 % (50 % ได้วงกลมสมบูรณ์) โหมดพิกเซลอยู่ที่ 0 ถึง 500 px ยิ่งค่ามาก มุมยิ่งโค้งมน เครื่องมือใช้ Canvas arcTo + clip สำหรับมุมโค้งวงกลมมาตรฐาน ไม่รองรับซูเปอร์เอลลิป Squircle

สร้างอวาตาร์หรือไอคอนแอปได้หรือไม่?

ได้ สำหรับอวาตาร์วงกลมสมบูรณ์ให้ใช้ค่าตั้งต้น 50 % สำหรับไอคอน iOS แนะนำ 22–25 % (ใช้ค่าตั้งต้น 25 % ให้ตรงในคลิกเดียว) สำหรับ Android Adaptive Icon รัศมีที่ปลอดภัยคือ 25 % เอาต์พุต PNG แบบโปร่งใสใช้ได้กับทุกธีม

การทำมุมโค้งทำให้ภาพเบลอหรือไม่?

ไม่ เครื่องมือทำงานที่ความละเอียดเดิมด้วยการตัดตามเส้นทางใน Canvas โดยไม่มีการสุ่มตัวอย่างใหม่หรือบีบอัด คุณภาพเอาต์พุตเท่ากับต้นฉบับพอดี เพียงแค่ตัดมุมออก ขอบยังคงคมชัด

ภาพของฉันถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?

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

ทำไมเอฟเฟกต์มุมโค้งไม่ปรากฏ?

โปรดตรวจสอบ: ① ค่ารัศมีมากกว่า 0 (แถบเลื่อนไม่อยู่ซ้ายสุด) ② ภาพถูกโหลดสำเร็จ (ต้องเป็น JPG, PNG หรือ WEBP) ③ เบราว์เซอร์รองรับ HTML5 Canvas (เบราว์เซอร์สมัยใหม่ทั้งหมดรองรับ) หากยังมีปัญหา ให้รีเฟรชหน้าและอัปโหลดใหม่

ต่างจาก CSS border-radius อย่างไร?

CSS border-radius ทำงานเฉพาะในชั้นแสดงผลของเบราว์เซอร์และไม่อบมุมลงในไฟล์ภาพ เครื่องมือนี้ส่งออกไฟล์ PNG จริงที่มีช่องสัญญาณ Alpha ทำให้ภาพมุมโค้งใช้งานได้ใน PowerPoint, การตัดต่อวิดีโอ, การพิมพ์ และทุกสภาพแวดล้อมที่ไม่รองรับ CSS

อภิธานศัพท์

รัศมีมุม (Border Radius)
รัศมีของส่วนโค้งของมุมโค้งมน ค่ามากขึ้นจะทำให้มุมโค้งมากขึ้น ค่าสูงสุดคือครึ่งหนึ่งของด้านสั้นของภาพ ซึ่งจะได้วงกลมสมบูรณ์ เครื่องมือนี้รองรับหน่วยพิกเซล (0–500 px) และเปอร์เซ็นต์ (0–50 %)
ช่องสัญญาณ Alpha
ช่องสัญญาณความโปร่งใสที่ฝังอยู่ใน PNG และ WEBP โดยมีค่า 0–255 ต่อพิกเซล เครื่องมือตั้งค่าพิกเซลของมุมโค้งเป็น Alpha=0 ทำให้เอาต์พุตโปร่งใสสมบูรณ์และกลมกลืนกับทุกพื้นหลัง
Squircle (ซูเปอร์เอลลิป)
รูปทรงมุมโค้งที่เริ่มใช้ตั้งแต่ iOS 7+ นุ่มนวลกว่ามุมมาตรฐาน อยู่ภายใต้สมการ x⁴+y⁴=r⁴ เครื่องมือนี้สร้างส่วนโค้งมาตรฐาน หากต้องการ Squircle ให้ใช้ Figma หรือ Sketch
Adaptive Icon
รูปแบบไอคอน Android 8.0+ ที่มีเลเยอร์พื้นหน้าและพื้นหลังแยกกัน รัศมี 25 % เป็นพื้นที่ปลอดภัย และตัวเรียกใช้งานของ OEM จะใช้มาสก์ของตัวเอง (วงกลม, Squircle ฯลฯ)
Canvas arcTo
เมธอดของ Canvas 2D API สำหรับวาดส่วนโค้ง เครื่องมือนี้ใช้ arcTo + clip ร่วมกันเพื่อสร้างเส้นทางสี่เหลี่ยมมุมโค้ง ตัดภาพให้อยู่ภายใน และทำให้พื้นที่ภายนอกเป็นพิกเซลโปร่งใสเมื่อส่งออก

ตารางอ้างอิงรัศมีมุมตามแพลตฟอร์ม

แพลตฟอร์ม / องค์ประกอบขนาดอ้างอิงสัดส่วนแนะนำโดยประมาณ (px)
ไอคอนแอป iOS / iPadOS1024 × 1024ประมาณ 22,37 %≈ 229 px
Android Adaptive Icon108 × 108ประมาณ 25 %≈ 27 px
ไอคอนแอป macOS Sonoma1024 × 1024ซูเปอร์เอลลิป Squircleไม่มีค่า px ตายตัว
การ์ด Windows 11—ประมาณ 8 px8 px
Material Design 3 Large—ประมาณ 28 px28 px
อวาตาร์ LINE / WhatsApp640 × 64050 % (วงกลมสมบูรณ์)320 px
อวาตาร์ Twitter / Instagram400 × 40050 % (วงกลมสมบูรณ์)200 px
ภาพหลักอีคอมเมิร์ซ800 × 800แนะนำ 16–24 px16-24 px

Authoritative References