CODEWITHSUNDEEP
javascriptphpjqueryhtml
Norman V
Norman V

Reputation: 25

Change object colors inside an image

I would like to know the best web technology/js library to achieve this functionality. I need to change the colors of specific objects inside an image. I need to develop a tool where they can choose a color and the objects inside the image will turn into that color.

This is a very close example of what I need. I've been reading about canvas but I haven't been able to find anything close.

www.msistone.com/virtual-kitchen-designer

Thanks in advance!

Upvotes: 0

Views: 185

Answers (2)

basement
basement

Reputation: 718

The simplest way to target specific objects ( wall tiles, tables, floors, etc. ) within an image is in post production with an image editing application such as Photoshop, Artweaver, Paint.net, Inkscape, etc. and switch out images upon user selection using CSS or JavaScript. You replace the entire image this way and the minor changes show through when the image is switched.

If you don't want to do this manually there is no easy programmatic approach. For more information on coding applications to recognize objects look into machine learning and shape recognition algorithms but I suspect that is beyond the scope of a simple web app.

Upvotes: 0

AngeLOL
AngeLOL

Reputation: 116

There are no magic or elaborated algorithm on it. They simply are using some PNG images and then they put the style tiles images before, so it looks like a texture changed or like if they uses a filter. You can realize of how it works watching the source code PNG image of Virtual Kitchen Designer

Upvotes: 1

Related Questions