Is it possible to swap colours in an image?

JavaScript
1

A client has approached me to build a website which allows visitors to display a rug, select different parts of the rug and change it’s colour.

I’ve come across a website that does exactly this, it displays a photo of the rug, you select a colour and then click the part of the image you want to be that colour, and it changes it.

Does anyone know how 1) to pick a colour from an image, and then to 2) change it.

Is this possible with javascript, or will I need to use javascript to select the colour from the image, and then some server side PHP to manipulate and reload the image?

2

Presuming that you are working with solid colors (and not gradients) then I would imagine that you could use the imagecolorat function once you have transmitted the color data from the client side to the server to find the color at the specified x,y coords.

Then you could use a php GD method ( see http://php.net/manual/en/book.image.php ) to replace the color in the image.

3

This might be easily done by using a series of tiles. That way changing the colour of parts of the rug would involve just changing the image of pieces of tile.

Another possible way is to use images with transparent sections, so that a backgound colour can be set that shows through the transparent parts.

4

Easiest bet would be to use flash have this type of interactivity…

Otherwise if that is not an option you could use javascript to get the x,y coordinates of the users click when they click on the image and send that information back to the server to process.

Another option if you want to get tricky is you could use an image-map or set of divs/elements and upon clicking on a certain element, show/hide an appropriate element with the corresponding color.

Good luck

5

I don’t suppose you know how to change colours server side do you? I am assuming it’ll be using something like GD?