search

jodhman / react-eyedrop

Seamlessly integrate a static typed, fully-tested color-picking React component/hook!
24 stars 11 forks source link

Option to define a radius when sampling color? #2

Closed gundamftw closed 5 years ago

gundamftw commented 5 years ago

I want to sample color from images so a single-pixel sampling wasn't very useful. It would be better to have an option to define a sampling radius, like 3x3, and then return the averaged color.

jodhman commented 5 years ago

Hmm... Alright! Think I understand what you mean. Only question is what you mean by 'average color'? :slightly_smiling_face:
Up until this point, I've always thought that precision(1x1 pixel) was key in sampling colors.

gundamftw commented 5 years ago

For sampling color on images, 1x1 is not good because of the noise on the image, with single-pixel sampling we'll mostly pick up the color of the noise instead of the image, so the sampling area has to be bigger.

By average color I mean the average of all the rgb value in the sampling area. So with 3x3, the returned color value would be the average of all 9 pixels.

jodhman commented 5 years ago

Working on adding this. Will write here once released. Give me a day or two. :slightly_smiling_face:

jodhman commented 5 years ago

Released a new version with this feature implemented. Let me know if you run into any trouble! :smile:

gundamftw commented 5 years ago

Hi, your radius declaration is kind of wrong. A radius is the length from the center of the square/circle to the side. So the relationship should be like this:

radius of 0 = 1 x 1 radius of 1 = 3 x 3 radius of 2 = 5 x 5 radius of 3 = 7 x 7

jodhman commented 5 years ago

I see! My bad. Will make a fix for it tomorrow. :slightly_smiling_face:

jodhman commented 5 years ago

Added the option to define what unit to use when defining pickRadius. The radius unit now functions the way you'd expect it to.