Hello. Engaged in the development of service for the selection of colors for the paint company. Need to repaint the image of the house inside and out.

To repaint the image using multiple canvas. One canvas - the original image and one for each element (for example for the floor, walls, windows, care, etc.) on this canvas is located only part of the image.

Currently developed such an algorithm:

  1. We translate the color in which you want to repaint in HSV.
  2. I take each pixel to the canvas on which a part of the image is located and write the number of “V” * 100 values ​​to the object (in order to round it off and get statistics).
  3. After the previous step, I get an object that contains the number of occurrences of the “V” values. I find the maximum value in this object - thus I get the main color of the image.
  4. I repaint each pixel of a part of the image using “H” and “S” from step 1, and get “V” by the formula (V of step 1 + (V of the original image pixel — V maximum in the part of the image)).

There are several problems in my algorithm:

  1. If the image is not monotonous, then it may turn out that the “V” parameter found in step 3 is not quite the main color of the image due to the fact that there may be several maxima (a good example of a parquet is that light and dark colors are mixed there) - for example V = 10 and V = 90 and 10 is slightly more than 90 and then the output image is faded.
  2. If we repaint for example white, and V = 10, then the texture is very light and vice versa, if the texture is very dark, then the output is black.

At the moment, I set the parameter from 3 points to manual, but I don’t like the selection.

If you have a desire to help with the algorithm, stretch your brains or just suggest a working solution I will be glad to discuss.

Example code: http://kvil.goodsol10.tmweb.ru/repair-school/color-service/color/Test2.php

I can not insert it because of restrictions. There you can see how the image is repainted in purple. The problem area is the baseboard and floor. The problem is that with proper repainting the color of the baseboard and the floor should be more saturated.

  • Not quite clear what is happening. It would be clearer with screenshots - working with graphics after all. In general, a bunch of repainting algorithms - only it is not clear what exactly you need. Add screenshots like "source image" -> "as it should." I would advise the original image to discolor, and then apply a color mask. - Goncharov Alexander
  • @GoncharovAleksandr Added sample code. There you can see how the image is repainted in purple. The problem area is the baseboard and floor. The problem is that with proper repainting the color of the baseboard and the floor should be more saturated. - Mihanik71
  • And by the way, did you not consider the options in advance? In order not to make a bunch of combinations, you can separately save each element in all possible colors (using automation already at the photoshop level). This will get rid of the brakes, and potentially give better quality. - Vladimir Gamalyan
  • @VladimirGamalian several thousand possible colors for repainting. It is unreal to take photoshoot - Mihanik71

1 answer 1

In the simple case - when the textures are tint (and not relief / glare maps) - they are mixed by addition or multiplication (or a combination of addition and multiplication) of the rgba component (where each component is from 0 to 1).

The error in your case (in my opinion) is the calculation of the overall brightness of the object, it should not affect the final image.

If there are difficulties with the selection of the algorithm - you can open a good old photoshop, and emulate what you want to apply to the image, and then transfer it to the algorithm.

In addition, I think - for each of the objects (floor, plinth, etc.) - you should enter the correction parameters: brightness, contrast, saturation. Each object has its own increase / decrease figures. Apply the correction - after applying the color. Here are the relevant postprocessing formulas.

Perhaps the question is - to automatically calculate these correctional parameters (for this you apparently considered the average brightness) - but here I’m afraid I’ll automatically fail, because when I sell paint, the accuracy of applying paint is important, otherwise furious customers will attack :)

And yet - the fact that the example slows down strongly. JS and canvas are not so slow.

  • Brakes JS - it turns out there are 12 passes through the arrays from 1748 * 2400 = 4,200,000 * 4 elements - Mihanik71
  • @ Mihanik71 perhaps more advanced methods of overlay help - shaders for example sitepoint.com/mean-shaders-create-html5-webgl . Then, it is not necessary to overwrite the color in canvas — with such extensions — you can use it as a mask. There are also postprocessing filters in HTML5 developer.mozilla.org/ru/docs/Web/CSS/filter (they keep everything except of course IE, which has its own syntax of these filters) - you could do without canvas — they work quickly. - Goncharov Alexander
  • @ At the moment, the conclusion I am making is 1200 to 960 - a very big performance gain is obtained + I had to abandon the search for color on the fly and I have to specify a parameter when loading. I just wanted to make a universal tool that can be fully prepared and laid out, but for now we are still thinking about the algorithm, and if something happens when loading a slider that can be changed parameters - Mihanik71