Trình tạo ảnh gradient xuyên tâm trực tuyến

Tính năng và ví dụ cụ thể

Ví dụ: Tạo ảnh gradient với tâm lệch

Giả sử bạn muốn tạo ảnh 1200x630 px với màu trung tâm xanh dương (#3B82F6), màu viền hồng (#EC4899), tâm ở 0% ngang và 0% dọc (góc trên trái), tỷ lệ 100%. Khi đó, tâm gradient nằm tại điểm (0,0) thay vì giữa ảnh. Bán kính ngoài được tính bằng công thức hypot(width, height)/(2*scale) = hypot(1200,630)/2 ≈ 677.66 px. Vì tâm ở góc, vòng tròn gradient sẽ phủ từ góc trên trái ra ngoài, nhưng phần dưới phải của ảnh sẽ nằm ngoài vòng tròn và được tô bằng màu viền (hồng). Điều này giúp tạo hiệu ứng chuyển màu không đối xứng.

Kiểm soát độ trong suốt

Khi bật tùy chọn trong suốt, mỗi màu có thể có độ mờ riêng. Ví dụ, nếu bạn đặt độ mờ của màu trung tâm là 25%, alpha sẽ là 1 - 25/100 = 0.75. PNG hỗ trợ kênh alpha nên vùng trong suốt sẽ được giữ nguyên khi tải xuống.

Giới hạn và lưu ý

• Không có chế độ gradient hình elip, chỉ có hình tròn.
• Không có thêm điểm dừng màu (color stop) – chỉ có hai màu cố định ở 0 và 1.
• Không có tùy chọn dịch chuyển tiêu điểm, họa tiết, nhiễu hay tải ảnh lên.
• Nếu yêu cầu kích thước quá lớn (vượt 24 triệu pixel), hệ thống sẽ tự giảm tỷ lệ để phù hợp.
• Toàn bộ quá trình chạy trong trình duyệt, không tải dữ liệu lên máy chủ.

Câu hỏi thường gặp

Làm thế nào để gradient phủ kín toàn bộ ảnh khi tâm lệch?

Khi tâm không nằm ở giữa, bán kính gradient không tự động mở rộng để chạm tới góc xa nhất. Nếu bạn muốn gradient phủ kín cả ảnh, hãy đặt tâm ở 50%,50% hoặc tăng tỷ lệ (scale) lên trên 100% để giảm bán kính, nhưng điều đó sẽ làm gradient nhỏ lại. Không có tùy chọn tự động điều chỉnh bán kính theo tâm.

Độ trong suốt ảnh hưởng đến màu sắc như thế nào?

Khi bật tùy chọn trong suốt, mỗi màu có một giá trị phần trăm độ mờ riêng. Giá trị này được chuyển thành alpha = 1 - (phần trăm/100). Ví dụ, độ mờ 0% nghĩa là alpha=1 (hoàn toàn đục), 100% nghĩa là alpha=0 (hoàn toàn trong suốt). Vùng ngoài vòng tròn gradient sẽ dùng màu viền với alpha tương ứng, không lặp lại gradient.

Tôi có thể tạo ảnh với kích thước lớn hơn 10000 px không?

Không, mỗi chiều tối đa 10000 px và tổng số pixel tối đa là 24 triệu. Nếu bạn nhập kích thước vượt quá giới hạn, hệ thống sẽ tự động giảm tỷ lệ để đáp ứng ngân sách pixel, nhưng vẫn giữ tỷ lệ khung hình.