By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,370 Members | 1,574 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,370 IT Pros & Developers. It's quick & easy.

Image colour manipulation using JS

P: n/a
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

Jun 21 '06 #1
Share this Question
Share on Google+
10 Replies


P: n/a
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.
Jun 21 '06 #2

P: n/a


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/
Jun 21 '06 #3

P: n/a

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.

Jun 21 '06 #4

P: n/a
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
Jun 21 '06 #5

P: n/a

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.

Jun 22 '06 #6

P: n/a
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.
Jun 22 '06 #7

P: n/a
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

Jun 22 '06 #8

P: n/a
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.

Jun 22 '06 #9

P: n/a
n...@chthonic.f9.co.uk 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

Jun 22 '06 #10

P: n/a


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/
Jun 24 '06 #11

This discussion thread is closed

Replies have been disabled for this discussion.