3

I'm trying to come up with a way to mimik something we were previously doing in Adobe Flash using some sort of Bitmap Filter but instead with pure javascript.

Previously we had a set of PNG images w/ transparency around the core image. When an image was clicked, a soft glow (ala border) would be added around the non-transparent portion of the image, slightly consuming some of the transparency but the majority of the outer transparent portion would remain transparent.

W/ javascript I can easily add a border around the entire image when clicked, but that is not what I am aiming for. I only want a border around the non-transparent portion of the image.

I'm unfortunately not familiar enough with image manipulation techniques, so I'm curious if there is a way I could achieve this using the various JS image manipulation libs out there ala BitmapData or Pixastic. Taking a look at both of these I wonder if there is something I could do w/ edge detection, glowing effects, and overlays...

James
  • 1,391
  • 2
  • 14
  • 20
  • 1
    `I only want a border around the non-transparent portion of the image.` It is impossible to do it with js. Only if a replacement image is already prepared. Canvas is not really a solution (if you need compatibility) and all these 'calculations' will take resources and time. – Cheery Feb 15 '12 at 04:21
  • Thanks Cheery, this is what I feared. Canvas "could" be a future possibility. Sounds like I'll be better off either using replacement images or using vector variants of my images (which makes pretty much anything possible). – James Mar 02 '12 at 17:06
  • BTW, if you'd change your comment to an "Answer" I'd be glad to mark it as correct :) – James Mar 02 '12 at 17:06

3 Answers3

1

If you're already using Raphael (or are willing to use it), you might consider using Dmitry's blur plugin. Building on this answer, I was able to achieve the glow effect I think you're looking for by adding another image behind the one I'd like "glowed". The background image is blurred, giving a "glow" or "halo" around the crisp image on top.

Sample code:

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

The plugin includes the caveat that there's no WebKit support. It seems that there is now some WebKit support as it works in Chrome (I'm running 18.0) but not Safari (I'm running 5.1.5).

Community
  • 1
  • 1
ebakke
  • 26
  • 2
  • Also FYI, Safari 6+ now correctly supports SVG filters (which is what Raphael's blur uses) so this is supported in all the major browsers, including IE8. – James Dec 28 '12 at 21:44
0

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

It is impossible to do it with js. Only if a replacement image is already prepared. Canvas is not really a solution (if you need compatibility) and all these 'calculations' will take resources and time.

Cheery
  • 16,063
  • 42
  • 57
0

I'm not sure it's entirely suitable for your situation, but there are tools out there to convert Flash to HTML (e.g. Swiffy). I suspect they can be flaky at times, but it's something to consider :)

c24w
  • 7,421
  • 7
  • 39
  • 47