Image colour manipulation using JS

[Pulzar]

Hi there,

I want to show a simple image on a web page, and allow the viewer to
select and change one of the colours used in the image, and immediately
preview the result. I'd like to keep the image processing away from the
server to make the colour selection/preview process quicker, and I also
don't want to pre-generate all possible images as there are too many
colours that can be selected.

Does JS (or any JS libraries) provide image manipulation capabilities
where I can search & replace a colour in an image or a portion of the
image?

Thanks,
Stan

[Richard Cornford]

Pulzar wrote:

I want to show a simple image on a web page, ... <snip> Does JS (or any JS libraries) provide image manipulation
capabilities where I can search & replace a colour in an
image or a portion of the image?

You will not be able to do that in a web browser over the Internet.

Richard.

[Martin Honnen]

Pulzar wrote:

Does JS (or any JS libraries) provide image manipulation capabilities
where I can search & replace a colour in an image or a portion of the
image?

There is a specification as part of the canvas element and its two
dimensional graphics context:
<http://whatwg.org/specs/web-apps/current-work/#pixel>
but it looks to me as if neither Firefox 1.5 nor Opera 9 on their canvas
implementation support that getImageData method.
Safari also has canvas support but I can't test now whether it supports
getImageData.

--

Martin Honnen
http://JavaScript.FAQTs.com/

[James Black]

Pulzar wrote:

Does JS (or any JS libraries) provide image manipulation capabilities
where I can search & replace a colour in an image or a portion of the
image?

You may be able to convert the image into an svg file, on the
server-side, then manipulate the svg file.

Manipulating the image on the server should be a quick operation, as
libgd is fast.

[Matt Kruse]

Richard Cornford wrote:

Pulzar wrote:

I want to show a simple image on a web page, ...

<snip>

Does JS (or any JS libraries) provide image manipulation
capabilities where I can search & replace a colour in an
image or a portion of the image?

You will not be able to do that in a web browser over the Internet.

Sure he could. It might require a specific browser like IE and an ActiveX
control, but that can certainly be done in a web browser over the Internet.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com

[James Black]

Matt Kruse wrote:

Sure he could. It might require a specific browser like IE and an ActiveX
control, but that can certainly be done in a web browser over the Internet.

If the server knows which image the browser has, then all it needs to
know is which color to replace by another color, and then just tell the
client to reget the image.

It shouldn't require anything that is browser specific.

[Dag Sunde]

James Black wrote:

Matt Kruse wrote:

Sure he could. It might require a specific browser like IE and an
ActiveX control, but that can certainly be done in a web browser
over the Internet.

If the server knows which image the browser has, then all it needs to
know is which color to replace by another color, and then just tell
the client to reget the image.

It shouldn't require anything that is browser specific.

....or write an Java Applet that does it...

--
Dag.

[Bart Van der Donck]

James Black wrote:

[...]
You may be able to convert the image into an svg file, on the
server-side, then manipulate the svg file.

Manipulating the image on the server should be a quick operation, as
libgd is fast.

Actually, no - image manipulating is among the worst CPU culprits on a
machine.

--
Bart

[news]

Pulzar wrote:

Hi there,

I want to show a simple image on a web page, and allow the viewer to
select and change one of the colours used in the image, and immediately
preview the result. I'd like to keep the image processing away from the
server to make the colour selection/preview process quicker, and I also
don't want to pre-generate all possible images as there are too many
colours that can be selected.

Does JS (or any JS libraries) provide image manipulation capabilities
where I can search & replace a colour in an image or a portion of the
image?

You won't be able to alter the image in Javascript, but you can achieve
what you want with a little lateral thinking.

Make your image a PNG with an alpha channel that masks out the colour
you want to change and use CSS to give the image's container a solid
colour background. If the colour is just a solid colour and doesn't
need mixing with the image, you could use a GIF instead and not have to
bother with the CSS hacks to get IE to display alpha channelled PNGs
properly.

Now use JS to change the colour of the CSS background.

[Bart Van der Donck]

[e-mail] wrote:

[...]
You won't be able to alter the image in Javascript, but you can achieve
what you want with a little lateral thinking.

Make your image a PNG with an alpha channel that masks out the colour
you want to change and use CSS to give the image's container a solid
colour background. If the colour is just a solid colour and doesn't
need mixing with the image, you could use a GIF instead and not have to
bother with the CSS hacks to get IE to display alpha channelled PNGs
properly.

Now use JS to change the colour of the CSS background.

Indeed, also see

http://tinyurl.com/hkvrz

for some ideas that might help...

--
Bart

[Martin Honnen]

Martin Honnen wrote:

There is a specification as part of the canvas element and its two
dimensional graphics context:
<http://whatwg.org/specs/web-apps/current-work/#pixel>
but it looks to me as if neither Firefox 1.5 nor Opera 9 on their canvas
implementation support that getImageData method.

But Opera 9 implements a special canvas graphics context that allows
pixel wise manipulation of images on the client, see
<http://oxine.opera.com/gallery/canvas/2dgame/sepia.html>
<http://my.opera.com/WebApplications/blog/show.dml/200788>

--

Martin Honnen
http://JavaScript.FAQTs.com/