Radial gradients with opacity in PHP

2019-05-17 16:39发布

I need to create a PNG radial gradient with opacity. I've looked through GDLib but I can't see a way to generate radial gradients. Does anyone know of a way with GDlib or any other graphics library for PHP?

I suppose worst-case I could generate it pixel-by-pixel using GDLib but how does one even start to do the math on that?

The goal is to generate sexy lighting effect background PNGs for web pages. An example of the effect can be seen on the header here which uses this background image. I've tried generic white lighting effect PNGs but it doesn't look anywhere near as good as tinted lighting, so my generated PNGs will take into account the website's color scheme.

I assume server-side is the way to go because browser support for CSS radial gradients is so patchy.

3条回答
做自己的国王
2楼-- · 2019-05-17 16:48

the classic video game trick is to apply a gradient texture, rather than compute the light. this is a perfect use for the technique.

make a grayscale gradient at a large-ish pixel dimension (2048px square is common) and several smaller ones (1024,512,256px etc) pick the closest one for your need (scaling up may exaggerate banding, scaling down may introduce moire).

use php gd function such as imagecopymerge. depending on intent, you could store the result on first use.

查看更多
相关推荐>>
3楼-- · 2019-05-17 16:58

Why not use a combination of imagecolorallocatealpha() and imageellipse() or imagefilledellipse()?

Edit:

See this class for an example of what I mean. You should be able to extend this to support alpha.

Edit2:

I have made some modifications to the class above to yield alpha support. It's not perfect, but it works for ellipses and such:

http://codepad.org/1eZ3Km0J

查看更多
三岁会撩人
4楼-- · 2019-05-17 17:10

I suppose worst-case I could generate it pixel-by-pixel using GDLib but how does one even start to do the math on that?

The math is easy, alpha = max_alpha - (distance_to_center / radius) where the distance is Euclidean, i.e. sqrt( (x1-x2)^2 + (y1-y2)^2 ).

查看更多
登录 后发表回答