เครื่องมือสร้างภาพเกรเดียนต์แนวรัศมีออนไลน์

คุณสมบัติและตัวอย่างการใช้งาน

สร้างเกรเดียนต์รัศมีที่แม่นยำสำหรับโซเชียลมีเดีย

สมมติว่าคุณต้องการภาพพื้นหลังสำหรับโพสต์บนโซเชียลขนาด 1200×630 พิกเซล เริ่มจากสีน้ำเงิน #3B82F6 ตรงกลางและสีชมพู #EC4899 ที่ขอบ ตั้งค่าศูนย์กลางที่ 50%, 50% และสเกล 100% เครื่องมือจะสร้างวงกลมศูนย์กลางโดยมีรัศมีภายนอกประมาณ 677.66 พิกเซล ซึ่งยาวพอที่จะถึงมุมทั้งสี่ของภาพ ทำให้ได้เกรเดียนต์ที่สมมาตรเต็มพื้นที่

ปรับตำแหน่งศูนย์กลางและสเกล

คุณสามารถเลื่อนจุดศูนย์กลางไปที่มุมบนซ้ายโดยตั้งค่าแนวนอน 0% และแนวตั้ง 0% จุดศูนย์กลางจะอยู่ที่พิกเซล (0,0) พอดี และรัศมีภายนอกจะยังคงเป็นค่าที่คำนวณจากสูตร sqrt(w² + h²) / (2 × (s / 100)) ซึ่งสำหรับ 1200×630 และสเกล 100% คือประมาณ 677.66 พิกเซล การเลื่อนศูนย์กลางจะไม่ขยายรัศมีไปยังมุมที่ไกลที่สุด ดังนั้นมุมขวาล่างอาจไม่ถูกครอบคลุมด้วยเกรเดียนต์เต็มที่ หากต้องการให้ครอบคลุมมุมทั้งหมดเมื่อเลื่อนศูนย์กลาง ให้ลดสเกลลง เช่น 50% จะเพิ่มรัศมีเป็นสองเท่า

ใช้ความโปร่งใสปลายทาง

เปิดใช้งานตัวเลือก "ความโปร่งใสปลายทาง" เพื่อให้สีตรงกลางและสีขอบจางหายไปบางส่วน ตัวอย่างเช่น ตั้งค่าความโปร่งใสของสีตรงกลางเป็น 25% จะได้ค่า alpha 0.75 ส่วนพื้นที่นอกวงกลมภายนอกจะใช้สีขอบตามที่กำหนด ไม่มีการวนซ้ำหรือทำซ้ำลวดลาย

ข้อจำกัดที่ควรทราบ

• เครื่องมือนี้สร้างเฉพาะเกรเดียนต์แนวรัศมีแบบวงกลม ไม่มีโหมดวงรี จุดโฟกัสเพิ่มเติม พื้นผิว หรือการสุ่มสี
• ขนาดภาพสูงสุดที่ขอได้คือ 10000×10000 พิกเซล แต่หากจำนวนพิกเซลรวมเกิน 24 ล้านพิกเซล ขนาดจะถูกลดตามสัดส่วน โดยอัตโนมัติ
• ผลลัพธ์เป็นไฟล์ PNG เพื่อรองรับความโปร่งใส (alpha channel) ที่คุณตั้งค่าไว้
• การสร้างภาพเกิดขึ้นในเบราว์เซอร์ของคุณเท่านั้น ไม่มีการอัปโหลดไฟล์ไปยังเซิร์ฟเวอร์

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

1. ทำไมเมื่อฉันเลื่อนศูนย์กลางไปที่ 0%, 0% แล้วมุมขวาล่างไม่เปลี่ยนเป็นสีขอบ?

เนื่องจากรัศมีภายนอกคำนวณจากสูตร sqrt(w² + h²) / (2 × (s / 100)) โดยไม่คำนึงถึงตำแหน่งศูนย์กลาง เมื่อศูนย์กลางอยู่ที่มุมบนซ้าย รัศมีจะยาวไม่พอที่จะถึงมุมขวาล่าง (ระยะทางจริงคือ hypot(width, height) แต่มุมที่ไกลที่สุดจากศูนย์กลางคือ hypot(width, height) ซึ่งมากกว่ารัศมีที่คำนวณได้) ดังนั้นมุมขวาล่างจะใช้สีขอบพร้อมค่าความโปร่งใสที่ตั้งไว้ ไม่ได้เว้นว่าง หากต้องการขยายวงกลมให้ถึงมุมนั้น ให้ลดสเกลเป็น 50% เพื่อเพิ่มรัศมีเป็นสองเท่า

2. ความโปร่งใสปลายทางทำงานอย่างไร? ฉันจะได้ภาพโปร่งใสจริงหรือไม่?

เมื่อเปิดใช้งานความโปร่งใสปลายทาง ค่าความโปร่งใสที่คุณตั้งเป็นเปอร์เซ็นต์จะถูกแปลงเป็นค่า alpha โดยใช้สูตร alpha = 1 - (percent/100) เช่น 25% จะได้ alpha 0.75 ไฟล์ PNG ที่ดาวน์โหลดจะเก็บค่า alpha นี้ไว้ ดังนั้นเมื่อนำไปวางบนพื้นหลังอื่น บริเวณที่โปร่งใสจะแสดงพื้นหลังนั้น แต่โปรดทราบว่าพื้นที่นอกวงกลมภายนอกจะใช้สีขอบทึบ (หรือสีขอบที่มี alpha ตามที่ตั้งไว้) ไม่ใช่โปร่งใสเต็มที่

3. ขนาดภาพสูงสุดที่ฉันสามารถสร้างได้คือเท่าไร?

คุณสามารถกำหนดความกว้างและความสูงได้ตั้งแต่ 1 ถึง 10000 พิกเซล แต่จำนวนพิกเซลรวมต้องไม่เกิน 24 ล้านพิกเซล หากคุณป้อนขนาดที่ใหญ่เกินไป เช่น 10000×10000 (100 ล้านพิกเซล) เครื่องมือจะลดขนาดลง proportionally โดยอัตโนมัติเพื่อให้อยู่ในงบประมาณพิกเซลที่กำหนด เพื่อให้การสร้างภาพไม่ใช้หน่วยความจำมากเกินไป

ในสูตร w และ h คือขนาดภาพผลลัพธ์จริง ส่วน s คือเปอร์เซ็นต์สเกลที่ป้อน โดย 100 เท่ากับตัวคูณ 1 ความโปร่งใส 0% คือทึบ และ 100% คือโปร่งใสทั้งหมด ค่าแอลฟาของสีขอบใช้กับพื้นที่นอกวงกลมด้วย

r = sqrt(w² + h²) / (2 × (s / 100))