如何动态生成具有 alpha 渐变的图像？

Posted 2023-02-25

【中文标题】如何动态生成具有 alpha 渐变的图像？

【英文标题】：How can I dynamically generate an image with an alpha gradient?

【发布时间】：2011-02-23 01:09:13

【问题描述】：

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

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

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

【问题讨论】：

你可以使用 Imagemagick 吗？

是的，我至少应该能够安装它，尽管除了格式之间的转换之外，我还没有研究过它。你能指出我需要的功能的方向吗？

你也许可以使用 developer.mozilla.org/en/canvas_tutorial

做一些事情

你能举个例子说明你希望它是什么样子吗？

【参考方案1】：

这是一个使用标签的示例，看起来它可能会让你走上正确的道路：

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

这里有一个小提琴，它显示了我认为你可能正在寻找的东西：

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

【讨论】：

这完美地解决了我的问题——我没有意识到画布支持径向渐变——事实上我上次阅读时，只支持线性。

【参考方案2】：

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

用于创建 Alpha 通道：http://us3.php.net/manual/en/function.imagick-getimagealphachannel.php