如何动态生成带有 alpha 渐变的图像?

发布于 2024-10-18 16:25:32 字数 387 浏览 8 评论 0原文

我正在寻找一种方法来动态创建具有羽化边缘的椭圆(并且能够控制羽化程度)。理想情况下,这可以通过 Javascript 来实现,因为预期用途是在可以离线使用的应用程序中,但为了简单起见,我对 PHP 解决方案感到满意。

我确实尝试过使用 GD 的解决方案,但是我发现它在处理 alpha 时非常有限。主要问题是使用填充椭圆和分层会抵消透明效果,并且仅使用逐渐变小的椭圆绘制边框会导致椭圆无法完美对齐的问题(见下图)。

Example

有没有一种解决方案可以消除这些问题,而又不会变得太复杂?我知道我可以逐像素创建图像,但这似乎是一个非常复杂的方法,而这应该是一个相对简单的任务。

I'm looking for a way to dynamically create an ellipse with a feathered edge (and be able to control the degree of the feathering). Ideally, this would be achieved through Javascript, as the intended use is in an app which may be made to be available offline, but for simplicity, I'd be happy with a PHP solution in the meantime.

I did attempt a solution using GD, however I found it quite limited when dealing with alpha. The main issues were that using a filled ellipse and layering would cancel out the transparency effect, and that just drawing the border with progressively smaller ellipses caused problems where the ellipses did not perfectly line up (see image below).

Example

Is there a solution I can use that eliminates these issues, without getting too complex? I'm aware I could create an image pixel by pixel, but that seems like a very complex method for what should be a relatively easy task.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

☆獨立☆ 2024-10-25 16:25:32

下面是一个使用标签的示例,看起来它可能会让您走上正确的道路:

http://nixtu.blogspot.com/2010/07/html5-canvas-gradients-radial-gradient.html

这是一个小提琴,显示了我认为您可能正在寻找的内容:

< a href="http://jsfiddle.net/hgZt7/2/" rel="nofollow">http://jsfiddle.net/hgZt7/2/

Here's an example using the tag that looks like it might start you on the right path:

http://nixtu.blogspot.com/2010/07/html5-canvas-gradients-radial-gradient.html

And here's a fiddle that shows what I THINK you might be looking for:

http://jsfiddle.net/hgZt7/2/

陌生 2024-10-25 16:25:32

ImageMagick 是完成任务的最简单方法。完整的函数列表是: https://www.php.net/manual/ en/book.imagick.php

用于创建 Alpha 通道: https://www.php.net/manual/en/function.imagick-getimagealphachannel.php

ImageMagick is the easiest way to complite your task. Full list of functions is: https://www.php.net/manual/en/book.imagick.php

For creating alpha channel: https://www.php.net/manual/en/function.imagick-getimagealphachannel.php

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文