javascript - 使用javascript仅将发光/边框添加到图像的非透明部分的边缘

Question

我正在尝试想出一种方法来模仿我们以前在 Adob​​e Flash 中使用某种位图过滤器而不是使用纯 javascript 所做的事情。

之前我们有一组 PNG 图像，核心图像周围有透明度。单击图像时，将在图像的非透明部分周围添加柔和的光晕(ala 边框)，稍微消耗一些透明度，但大部分外部透明部分将保持透明。

W/javascript 我可以轻松地在单击时在整个图像周围添加边框，但这不是我的目标。我只想要图像非透明部分周围的边框。

不幸的是，我对图像处理技术还不够熟悉，所以我很好奇是否有一种方法可以使用各种 JS 图像处理库实现此目的 BitmapData或 Pixastic .看看这两个，我想知道我是否可以通过边缘检测、发光效果和叠加来做些什么...

Answer 1

如果您已经在使用 Raphael(或愿意使用它)，您可以考虑使用 Dmitry 的 blur plugin .基于 this answer ，我能够通过在我想要“发光”的图像后面添加另一张图像来实现我认为您正在寻找的发光效果。背景图像模糊，在顶部的清晰图像周围产生“光晕”或“光晕”。

示例代码:

var img = this.R.image("yourImage.png", 0, 0, 50, 50);
var glow = img.clone().toBack();
glow.blur(5);

该插件包括不支持 WebKit 的警告。现在似乎有一些 WebKit 支持，因为它在 Chrome(我运行的是 18.0)而不是 Safari(我运行的是 5.1.5)中工作。