PDA

View Full Version : color changer script help



sjames853
Mar 10th, 2013, 06:54 PM
hello all. I am in the process of starting to create a painting website. on the site i would like to have people upload a picture of their home or place that needs to be painted and select a color from a chart that will then fill the color of the house with the selected color.

I would like to know can i do it with javascript and what would it entail i just need some direction to start. thank you all for your help.

Old Pedant
Mar 11th, 2013, 01:43 AM
Good luck.

Even with tools such as Adobe Photoshop, this is not something that you can normally do to the average photo without first "tweaking" the image.

Sure, you can say "replace all the yellow paint with light green". The problem is, in a photo, the variations in "yellow" are *ENORMOUS*. Part of the house that is in bright sunlight will be one shade of yellow and part of the house that in shade will be another shade. In fact, it may not look like yellow, at all. It may look more like gray or perhaps even brown or green. And what about faded spots or shadows?

Sure, a human with some experience with Photoshop can do this in a few minutes of work, but to expect an untrained person to be able to do it? Or expect a program to be able to do it?

Here's an example: The original photo:
http://plopon.com/greenchurch.jpg
And a naive attempt to replace the basic green color of the church with yellow. Note that this is actually the result of 6 separate replacements. After one replacment, only a very small part of the green was converted.
http://plopon.com/yellowchurch.jpg
Doesn't look very good, does it? And this was actually a fairly mono-colored building.

So... Maybe you can get it to work. I'm very skeptical.

sjames853
Mar 11th, 2013, 05:16 PM
thank you. I will definitely take it into account. Do you or anyone else have any idea where to start? Ive seen it before on sites. Im just trying to figure out what would be possible and what would be teh first thing to learn?

Old Pedant
Mar 11th, 2013, 08:03 PM
I really think this is *PROBABLY* better done with server-side code. There must be some server-side components that are capable of Photoshop-like transformations.

If you do it all in JavaScript, you'll pretty much be stuck doing all your own coding.

About the best you will find is something like this:
http://stackoverflow.com/questions/2106995/how-can-i-perform-flood-fill-with-html-canvas

As that author notes, it's slow.

sjames853
Mar 16th, 2013, 08:37 PM
sorry about the delay getting back ive been busy the last couple days.

I wanted to have an upload picture on the webpage and when they upload the pic they can choose from a selection of colors on the webpage and when the hover over it it will change the base color of their house. by base color i mean the whole main house color. not bit and parts. i thought i had seen it on a website before