I am facing an issue in which I have to dynamically set the font color regarding the background image brightness.
For instance, if the background image is dark, I would put font color on 'white'.
Is there any tool that can give my the brightness of the image using React-Native?
This seems to be a similar question as mentioned in How to access image pixel data in react-native
Step 1
The marked answer shows a solution in wich create a native (android) function wich returns a object that contains among other things an array filled with the color of every pixel (width, height, hasAlpha and pixels).
Step 2 I am no graphic designer so I am not a 100% sure if this is correct but it sounds ok. As mentioned in the question Image Dark/Light Detection Client Sided Script JavaScript provides a function that converts each color to gray scale and then returns an average pixel. I don't actually know if react-native provides this function - try it and then I will change the answer to this step.
Step 2.1 - Converting to gray scale I my understanding it's just that easy: * Indigo Color Example as you can see in the color detail you have 3 different parts - R (81) G (43) B (219) * Add these three for each pixel and divide them with 3 * 81+43+219 = 343 / 3 = 114,3 -> 114 = grayscale
Step 2.2 - Adding all grayscales together and divide through sum All your pixel should be able to transfaired into grayscale. There you can go and add them together and divide it through the amount of pixels you got
Step 3 There is my most questionable point where you maybe have to try it yourself. I would say if 0 is the minimum (dark) and 255 is the maximum (white) the middle 127 is where you decide if the color is dark or white
Examples for dark or light colors
127 is where we decide to go dark or light
Misty Rose graycolor = 236 = light
Indigo Color Example graycolor = 114 = dark
#46bfb0 graycolor = 145 = light
Misty Rose 4 graycolor = 129 = light
#72632f graycolor = 87 = dark
This short experiment by me showed me that 127 as line is maybe not perfect if you look at #46bfb0 it could be dark instead of light - so test it out and please commend your solutions with this project.
