ตัวสร้างรูปภาพมุมโค้ง

สิ่งที่ทำให้เครื่องมือทำมุมโค้งนี้ต่างจากที่อื่น: แต่ละมุมมีรัศมีของตัวเองได้ รัศมีสามารถระบุเป็น พิกเซลหรือเป็นเปอร์เซ็นต์ของด้านที่สั้นกว่า และมุมเองอาจเป็นส่วนโค้ง มนโค้ง ธรรมดา เป็น สควิเคิล ที่เรียบ เป็น มุมตัด ตรง หรือเป็น มุมเว้า เข้าด้านใน เครื่องมือยังพิมพ์กฎ CSS border-radius ที่ตรงกัน จึงทำรูปทรงเดิมซ้ำในโค้ดแทนที่จะเป็นไฟล์ได้

ทำไมต้องทำมุมรูปภาพให้โค้ง?

วิธีเพิ่มมุมโค้งให้รูปภาพ

1. โหลดรูปภาพของคุณ ลากไฟล์ไปที่พื้นที่วาง หรือเลือก เลือกรูปภาพ JPG, PNG, WebP, GIF, BMP, AVIF และ SVG ใช้ได้ทั้งหมด ตราบใดที่เบราว์เซอร์ของคุณถอดรหัสได้
2. ตั้งรัศมี ลากจุดจับมุมกลมบนตัวอย่าง เลื่อนแถบ รัศมีมุม หรือพิมพ์ตัวเลขที่แน่นอนแล้วสลับหน่วยระหว่าง px กับ %
3. เลือกรูปแบบมุม มนโค้ง สควิเคิล มุมตัด หรือ มุมเว้า ปิด เชื่อมทุกมุม เพื่อให้แต่ละมุมมีค่าของตัวเอง จัดบนหน้าจอตรงกับมุมที่ควบคุม
4. เพิ่มระยะขอบ พื้นหลัง หรือเส้นขอบ หากต้องการ ระยะขอบขยายแคนวาสรอบภาพ พื้นหลังเติมพื้นที่นั้น และวงขอบตามแนวโค้งแทนสี่เหลี่ยมเดิม
5. ดาวน์โหลด คง PNG สำหรับมุมที่มองทะลุได้ จากนั้นคลิก ดาวน์โหลดรูปภาพ แผงควบคุมรายงานมิติที่ส่งออกและขนาดไฟล์ และกล่อง CSS แสดงกฎสไตล์ชีตที่เทียบเท่า

รัศมีเป็นพิกเซลหรือเป็นเปอร์เซ็นต์

รัศมีเป็น พิกเซล เป็นค่าสัมบูรณ์: 32 px คือ 32 px ไม่ว่ารูปจะกว้าง 400 หรือ 4000 พิกเซล ดังนั้นค่าเดียวกันดูดราม่าบนภาพขนาดย่อเล็ก และแทบมองไม่เห็นบนรูปใหญ่ รัศมีเป็น เปอร์เซ็นต์ วัดจากด้านที่สั้นกว่าของรูป จึงสเกลตามภาพและดูเหมือนกันในทุกการส่งออก 50% คือค่าสูงสุดที่ใช้ได้จริง และให้วงกลมบนรูปสี่เหลี่ยมจัตุรัส และรูปแคปซูลบนสี่เหลี่ยมผืนผ้า

รูปแบบมุมทั้งสี่

• มนโค้ง — ส่วนโค้งหนึ่งในสี่ของวงกลม เรขาคณิตเดียวกับที่เบราว์เซอร์วาดสำหรับ border-radius คาดเดาได้ และเป็นรูปแบบเดียวที่แมปกับ CSS แบบหนึ่งต่อหนึ่ง
• สควิเคิล — มุมแบบซูเปอร์เอลลิปส์ เส้นโค้งเริ่มไกลขึ้นตามแต่ละด้านแล้วไหลเข้าด้านตรงโดยไม่มีการเปลี่ยนความโค้งกะทันหันแบบวงกลม ซึ่งเป็นเหตุผลที่แนวทางไอคอนแอปบน iOS และ Android ใช้รูปนี้
• มุมตัด — มุมถูกตัดด้วยเส้นทแยงตรง คมและดูเทคนิคกว่าเส้นโค้ง และยังคมชัดที่ขนาดเล็ก
• มุมเว้า — ส่วนโค้งเว้าเข้า ตัดมุมให้เว้า มุมเว้าสองมุมด้านตรงข้ามอ่านได้ทันทีว่าเป็นตั๋วหรือแท็ก

การเลือกรูปแบบผลลัพธ์

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

คุณสมบัติหลัก

• เป็นส่วนตัวตั้งแต่ต้นทาง: ไฟล์ถูกอ่านด้วย FileReader API ของเบราว์เซอร์แล้ววาดบนแคนวาสในเครื่อง ไม่ถูกอัปโหลดเลย
• แก้ไขด้วยการลากมุม: ดึงจุดจับทแยงบนตัวอย่าง แล้วดูรัศมีตามนิ้วหรือเคอร์เซอร์
• ควบคุมทีละมุม: ทำโค้งเฉพาะสองมุมบน หรือเว้าด้านเดียวแล้วเหลือที่เหลือเป็นเหลี่ยม
• พื้นหลังตัวอย่าง: สลับระหว่างตารางหมากรุกความโปร่งใส สีขาว สีเข้ม และไล่สี เพื่อตรวจขอบอัลฟาก่อนดาวน์โหลด
• ระยะขอบ การเติมพื้นหลัง และวงขอบ ที่ตามแนวโค้งเดียวกันทั้งหมด
• มาตราส่วนผลลัพธ์: ส่งออกที่ความละเอียดต้นฉบับ หรือย่อเป็น 75%, 50% หรือ 25% ในรอบเดียวกัน
• CSS ที่คัดลอกได้: กฎ border-radius ที่สร้างขึ้นทำรูปทรงเดิมซ้ำในสไตล์ชีต เมื่อไฟล์ไม่ใช่คำตอบที่ถูก
• ขอบลดรอยหยัก: มุมถูกวาดเป็นคลิปพาธ ดังนั้นเส้นโค้งเรียบ แทนที่จะเป็นขอบหยักแบบขั้นบันได

ไฟล์รูปภาพหรือ CSS?

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

การแก้ปัญหา

• มุมดูหยัก: ต้นฉบับน่าจะเล็กอยู่แล้ว ทำมุมโค้งที่ความละเอียดใหญ่ที่สุดที่มี แล้วย่อลง แทนที่จะทำมุมโค้งกับรูปที่ถูกขยายแล้ว
• มีวงแสงบาง ๆ บนพื้นหลังเข้ม: รูปมีแมตต์ขาวฝังอยู่ เพิ่มระยะขอบหนึ่งหรือสองพิกเซลด้วยสีที่เข้ากัน หรือเพิ่มรัศมีเล็กน้อยเพื่อตัดวงแสงออก
• การดาวน์โหลดเปิดเป็นสี่เหลี่ยมขาว: รูปแบบเป็น JPG หรือพื้นหลังไม่ได้ตั้งเป็น โปร่งใส สลับรูปแบบผลลัพธ์เป็น PNG
• รูปใหญ่มากรู้สึกช้า: แคนวาสวาดรูปความละเอียดเต็มในทุกครั้งที่เลื่อนแถบ ปล่อยแถบแล้วให้เบราว์เซอร์สักครู่ หรือลดมาตราส่วนผลลัพธ์
• GIF เคลื่อนไหวเสียแอนิเมชัน: แคนวาสส่งออกเพียงเฟรมเดียว มีเพียงเฟรมแรกที่ถูกทำมุมโค้งและบันทึก

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

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

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

ทำไมมุมโค้งของฉันดูเป็นสีขาวหรือสีดำแทนที่จะโปร่งใส?

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

จะทำรูปภาพเป็นวงกลมสมบูรณ์ได้อย่างไร?

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

มนโค้ง สควิเคิล มุมตัด และมุมเว้าต่างกันอย่างไร?

มนโค้งคือส่วนโค้งหนึ่งในสี่ของวงกลม รูปทรงเดียวกับที่ CSS border-radius วาด สควิเคิลกระจายเส้นโค้งต่อไปตามแต่ละด้านให้รอยต่อเรียบและต่อเนื่อง ซึ่งเป็นลักษณะที่ไอคอนแอป iOS และ Android ใช้ มุมตัดตัดมุมออกด้วยเส้นทแยงตรง มุมเว้าโค้งเข้าแทนที่จะโค้งออก และเซาะมุมแต่ละมุมให้เว้า ซึ่งเหมาะกับตั๋ว คูปอง และป้าย

รัศมีเป็นพิกเซลตรงกับ CSS border-radius บนเว็บไซต์ของฉันหรือไม่?

รัศมีถูกใช้ในพิกเซลของรูปภาพเอง จึงตรงกับ CSS เฉพาะเมื่อแสดงรูปที่ขนาดธรรมชาติ การส่งออกกว้าง 1200 พิกเซลที่แสดงในคอลัมน์กว้าง 600 พิกเซลจะถูกย่อครึ่งหนึ่ง ดังนั้นรัศมี 48 พิกเซลจะดูเหมือน 24 พิกเซลบนหน้าจอ ใช้หน่วยเปอร์เซ็นต์เพื่อผลลัพธ์ที่ไม่ขึ้นกับขนาด หรือคัดลอกโค้ด CSS ที่เครื่องมือสร้าง ซึ่งรายงานค่าเทียบเท่าที่สเกลแล้วอยู่แล้ว

ฉันสามารถคงคุณภาพรูปและความละเอียดต้นฉบับได้หรือไม่?

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