开发者

How to use JavaScript to measure how bright a users monitor is?

开发者 https://www.devze.com 2022-12-31 10:31 出处:网络
I\'ve noticed that the brightness of computer monitors drastically varies between computers. As such, this changes the look of web pages greatly.

I've noticed that the brightness of computer monitors drastically varies between computers.

As such, this changes the look of web pages greatly.

Is there a way to use JavaScript to automatically detect how bright (or dark) a users monitor is so that I can adjust my web page colors accordingly?

UPDATE

Please note that I do not want manual user involvement. I want this detection to be automatic so that users don't realize I dynamically change the color palette automatically ba开发者_StackOverflow社区sed on the brightness/darkness of their monitor.

UPDATE 2

Please also note that I'm not talking about wanting to adjust/calibrate the end users actual monitor but instead, programatically adjust the color selected to be displayed on the web-page itself. Meaning, if the end user has a darker than normal (brightness) display, I'll instead display a version of my web page that uses brighter colors instead.


There's no way to do this programatically. What you'd need to do is write some sort of monitor calibration test, possibly using variations of images like these, showing the user two or more images and asking them to chose the one which looks closer, adjusting colors each time they make a choice, until you feel the changes you've made are accurate.

EDIT: Basically I'm suggesting building something like this.


Most of the brightness/darkness settings are a function of the monitor. Nothing in the computer (let alone JavaScript running in a sandbox) is able to access this kind of information - it's mainly a one-way data flow between computer and monitor. Factors such as brightness of the room, and whether there is light behind the monitor will influence the appearance of the screen just as much.

There's no way to get everyone to see your website the way you see it. The sooner you realise that, the easier your life will be.


What about a flash/silverlight app instead? It can use the user's camera (if they have one). You could then analyze pictures/video from the camera to make inferences about how much monitor light is reflecting off the user's face.

It would be a very very fragile and complicated app.


You can't do that with javascript (and I don't think that you could do that in any other language, at least, without a piece of hardware to help).


No. As a general rule, JavaScript is not allowed to find out a whole lot about your computer for security reasons.


After Update 2 of your question, your requirement is a lot clearer. However, I would suggest you give user a feature to calibrate the brightness in your website. We can achieve that through program.

One way, could be, you can create a Brightness Bar and through the offset value you can update background color of the body.

/*Pure JavaScript code for brightness Calibration*/
let brightnessBar= document.getElementById('brightnessBar');
brightnessBar.addEventListener('mousemove',function(e){
    let blue = 255-`${e.offsetY}`;
    document.body.style.backgroundColor= `rgb(255,255,${blue})`;
}); 

Here default background color of my website is White, so when somebody is trying to decrease the brightness by adjusting the sliding bar, I am taking 'offsetY' since my brightnessBar is vertical.

Another way could be, you can have the brightness bar and have multiple images one slightly darker than the other one. As soon as a user decreases the brightness, you show the darker images and when a user increases the brightness, you show brighter images.

I hope I could answer your question.

0

精彩评论

暂无评论...
验证码 换一张
取 消