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

Question

我正试图想出一种方法来模仿我们之前在Adobe Flash中使用某种Bitmap Filter进行的操作，而不是纯粹的javascript。

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

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

我很遗憾对图像处理技术不够熟悉，所以我很好奇是否有一种方法可以使用各种JS图像处理库来实现这一点ala 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）。

Answer 2

I only want a border around the non-transparent portion of the image.

用js做这件事是不可能的。仅在已准备好替换图像的情况下。 Canvas并不是一个真正的解决方案（如果你需要兼容性），所有这些'计算'都需要资源和时间。

Answer 3

我不确定它是否完全适合您的情况，但有一些工具可以将Flash转换为HTML（例如Swiffy）。我怀疑它们有时会变得片状，但需要考虑的事情：）