javascript - Change the color of similar pixels in an image with canvas and js -
i looking algorithm or code find similar pixels (pixels have similar colors) in client side , change color of pixels. searched lot couldn't find formula finding similar pixels. thing want make magic wand tool in photoshop. tool can colorize part of product make custom color. have color restriction in production , can use colors. tried find logic formula like: finding euclidean distance of each pixel in compare neighbors' pixels canvas , java script , compare amount. not working well. weakness every picture has pixels similar colors different color shades. algorithm not smart in finding different color shades. in photoshop can select area same color magic wand tool , expand area similar color shades "similar" option.
what have far? helpful if shared relevant code you've written far (i.e. searching through pixels, comparing pixel colors...)
if haven't already, may want familiarize floodfill algorithms. basis of traversal algorithm.
color comparison, understand it, not solved problem. 3 dimensional euclidean distance measurement not bad idea , simple solution implement. this article suggests "[computing] absolute difference between each component in chosen color versus current color. difference between 2 colors largest difference between individual color components."
however, humans not perceive color differences differences in red, green , blue features.
another page you'd interested in reading: how compare 2 colors similarity/difference. 1 answer question suggests computing hsl values of color, using formula: avghue = (color1.hue + color2.hue)/2 distance = abs(color1.hue-avghue)
if want color theory, delta-e provide insight color differences.
Comments
Post a Comment