How to use JavaScript to get the color depth of the background picture and adjust the text color in black / white?

I am now doing a page, the background picture is randomly obtained from a picture library, some colors are darker, some colors are lighter, I want to use js to automatically judge, when the picture color is dark, set the font color to white, when the picture color is light, set it to black.
just as the color of the iOS lock screen automatically changes according to the color of the wallpaper.
how can I judge the color of a picture?


use canvas to get the pixel value of the picture , and then sample the pixels, and then I don't have to say that, right?

< hr >

then leave the work of calculating the pixels to the back end, and the back end calculates and returns the image and the result to the front end. But then you have to change api, and the former method actually has to change api. You can add the interface without changing the existing interface (but the implementation still needs to be changed). After each random acquisition of images, the backend records the unique id of the last image acquired by this session in session , and then provides an API to obtain the average pixel value of the last random image or the last random picture.

Menu