There is a color selection service for interior and exterior. It selects an image and you can repaint part of the image in the selected color (see how the color will look).

I am engaged in the creation of similar functionality. Initially I wanted to enclose SVG under the texture, but without the blend mode it doesn’t look very much.

There are several canvas layers on the service:

  • layer with the main image, it is slightly lightened - with transparency
  • layer with the mask of the object, initially the mask is black

Dug in obfustsirovannogo code and get about the following algorithm.

  1. User chooses color to repaint object
  2. Make a list of opaque pixels (based on the mask)
  3. Cycle through each pixel of the main image and blend the selected color for recoloring to the pixel color of the main image.
  4. Save the value from the previous item to canvas with mask

The algorithm is simple, but maybe I forgot some function or missed a simpler implementation.

    1 answer 1

    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)).