How to color image pixel in JavaScript?

Question

I'm looking for the way to color image pixel by some rule. Lets say I have some image:

<div id="static">
  <img border="0" src="some/image.png">
</div>

I want to color pixel to black based on RGB (or other way).

enter image description here

to

enter image description here

I know how to do that in Java

and found source how to do that on C++ (example)

but JavaScript ... hmmm

Please, help me.

And you also want to anti-alias it like in the example? – Mr Lister Mar 03 '13 at 08:38 — Mr Lister, Mar 03 '13 at 08:38

score 1 · Accepted Answer · edited May 23 '17 at 12:21

You should be able to do something similar to this, albeit probably quite slowly using canvas.

See this post for how to grab the pixel colour after converting your image to a canvas representation: How to get a pixel's x,y coordinate color from an image?.

You would have to replace event.OffsetX and event.OffsetY with the coordinate of each individual pixel using a for loop to retrieve the RGB of each pixel. Then, if it doesn't match the blue's RGB values, replace the pixel colour with black, and if it is the blue, replace it with white.

It would be pretty damn slow, borderline probably not doable without locking up the browser (I haven't personally worked with canvas yet to know its performance), unless you offload it to a web worker so it happens in another thread.

How to color image pixel in JavaScript?

1 Answers1