ครอปรูปเป็นวงกลม

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

ทุกอย่างทำงานในเบราว์เซอร์ของคุณด้วยองค์ประกอบ HTML canvas รูปถ่ายถูกถอดรหัสในเครื่อง ใส่มาสก์ในเครื่อง และส่งออกในเครื่อง จึงไม่ถูกอัปโหลดไปยัง miniwebtool และไม่มีคิว ไม่มีลายน้ำ และไม่มีขีดจำกัดการอัปโหลดนอกเหนือจากหน่วยความจำของอุปกรณ์คุณเอง

สิ่งที่ทำได้ด้วยเครื่องมือนี้

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

• ลากเพื่อจัดกรอบ เลื่อนหรือหยิกเพื่อซูม: มาสก์อยู่กับที่ขณะรูปเลื่อนอยู่ด้านหลัง ซึ่งเป็นการโต้ตอบเดียวกับตัวแก้ไขอวาตาร์
• แสดงพื้นที่ที่ตัด: เงาของพิกเซลที่ทิ้งยังเห็นในตัวอย่าง จึงบอกได้ว่าคุณครอปหูหรือไหล่ออกไปหรือไม่
• วงกลมหรือวงรี: แถบความสูงต่อความกว้างเปลี่ยนวงกลมเป็นวงรีแนวนอนหรือแนวตั้ง และแคนวาสส่งออกตามรูปเดียวกัน
• หมุนและพลิกกระจก: ขั้นละ 90 องศาแก้รูปจากโทรศัพท์ที่ตะแคง และการพลิกกระจกพลิกรูปเซลฟีกลับด้านที่ถูก
• วงขอบและขอบละลาย: เพิ่มวงขอบสีเป็นพิกเซลผลลัพธ์ หรือทำขอบนุ่มให้อวาตาร์กลืนเข้ากับพื้นหลัง
• PNG, WebP หรือ JPG โปร่งใส: คงมุมว่างสำหรับ PNG และ WebP หรือเติมด้วยสีที่เลือกสำหรับ JPG
• ค่าล่วงหน้าขนาดอวาตาร์: คลิกครั้งเดียวสำหรับขนาดรูปโปรไฟล์ 320, 400, 512, 640 และ 800 พิกเซลที่ใช้บ่อย
• CSS ที่คัดลอกได้: โค้ดทำอวาตาร์กลมเดิมซ้ำบนหน้าเว็บด้วย border-radius และ object-fit

วิธีครอปรูปเป็นวงกลม

1. โหลดรูปถ่าย: ลากไฟล์ไปที่พื้นที่วาง เลือก เลือกรูปภาพ หรือวางรูปที่คัดลอกด้วย Ctrl+V
2. จัดกรอบตัวแบบ: ลากภายในพื้นที่ตัวอย่างเพื่อเลื่อนรูป และใช้แถบ ซูม ล้อเลื่อน หรือท่าทางหยิกเพื่อปรับขนาด เติมเต็มมาสก์ รีเซ็ตเป็นครอปแน่นที่สุดที่คลุมมาสก์ และ พอดีทั้งรูป แสดงรูปทั้งภาพภายในมาสก์
3. เลือกรูปทรง: คง วงกลม หรือสลับเป็น วงรี แล้วตั้งอัตราส่วนความสูงต่อความกว้าง
4. จัดสไตล์ขอบ: ตั้ง วงขอบ และสี ทำให้ขอบนุ่มด้วย ละลายขอบ แล้วเลือก โปร่งใส หรือ พื้นหลัง สีทึบ
5. ตรวจตัวอย่างขนาดเล็ก: ดูเวอร์ชัน 128, 64 และ 32 พิกเซลใต้พื้นที่ตัวอย่าง แล้วซูมเข้าเพิ่มหากใบหน้าหายไป
6. ส่งออก: เลือกขนาดและรูปแบบผลลัพธ์ แล้วเลือก ดาวน์โหลดรูปวงกลม

ขนาดรูปโปรไฟล์ที่แสดงเป็นวงกลม

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

มาสก์วงกลมถูกวาดอย่างไร

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

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

เคล็ดลับครอปที่ยังใช้ได้ที่ 32 พิกเซล

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

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

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

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

จะให้พื้นที่นอกวงกลมโปร่งใสได้อย่างไร?

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

ทำไมอวาตาร์กลมของฉันยังดูเป็นสี่เหลี่ยมหลังอัปโหลด?

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

รูปโปรไฟล์วงกลมควรมีขนาดเท่าใด?

512 คูณ 512 พิกเซลเหมาะกับโปรไฟล์เกือบทุกแบบ เพราะไซต์จะย่อภาพที่ใหญ่กว่า แต่ไม่เคยเพิ่มรายละเอียดให้ภาพเล็ก เป้าหมายที่ใช้บ่อยคือ 400 พิกเซลสำหรับ X และ LinkedIn, 320 สำหรับ Instagram, 512 สำหรับ Discord, 640 สำหรับ WhatsApp และ 800 สำหรับ YouTube ใช้ค่าล่วงหน้าขนาดในส่วน ผลลัพธ์ แล้วให้ไซต์ย่อเอง

ครอปเป็นวงรีแทนวงกลมที่สมบูรณ์แบบได้หรือไม่?

ได้ สลับรูปทรงเป็น วงรี แล้วเลื่อนแถบความสูงต่อความกว้าง อัตราส่วนต่ำกว่า 100 เปอร์เซ็นต์ให้วงรีกว้างแนวนอน และอัตราส่วนสูงกว่า 100 เปอร์เซ็นต์ให้วงรีสูงแนวตั้งที่เหมาะกับภาพหัวและไหล่ แคนวาสผลลัพธ์เปลี่ยนรูปตาม ดังนั้นวงรีกว้าง 512 พิกเซลที่ 130 เปอร์เซ็นต์จะส่งออกเป็น 512 คูณ 666 พิกเซล

การครอปวงกลมลดคุณภาพรูปถ่ายหรือไม่?

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

เปิดและบันทึกไฟล์ประเภทใดได้บ้าง?

คุณเปิดได้ทุกอย่างที่เบราว์เซอร์ถอดรหัสเป็นรูปภาพได้ ซึ่งโดยปกติครอบคลุม JPG, PNG, WebP, GIF, BMP, AVIF และ SVG GIF เคลื่อนไหวถูกครอปเป็นเฟรมนิ่งเดี่ยว การดาวน์โหลดเป็น PNG ตามค่าเริ่มต้น โดยมี WebP และ JPG ในรายการรูปแบบ