树莓派相机夜视模式_为您的网站创建夜视模式，第1部分

最新推荐文章于 2021-05-16 19:44:49 发布

cungui5726

最新推荐文章于 2021-05-16 19:44:49 发布

阅读量409

点赞数

文章标签： java python css 人工智能 html

原文链接：https://thenewcode.com/319/Create-a-Night-Vision-Mode-For-Your-Website-Part-1

版权

树莓派相机夜视模式

If you’re anything like me, you probably use the web long after midnight, or after waking from sleep to check something on your phone. Modern LED screens put out a lot of artificial light, a technology that human perceptual systems have yet to adapt to. In particular, mobile devices pump out blue-tinted light, fooling our eyes (and thus our brains) into believing it is “day”. This suppresses melatonin levels, which in turn makes sleep more difficult.

如果您和我一样，则可能是在午夜之后或从睡眠中醒来检查手机上的东西后很长时间才使用网络。现代的LED屏幕发出了很多人造光，人类的感知系统尚未适应这种技术。特别是，移动设备会发出蓝色的光，使我们的眼睛(进而使我们的大脑)迷惑，以为它是“白日”。这会抑制褪黑激素水平，进而使睡眠更加困难。

As modern web developers it behooves us to make our sites as adaptive as possible to the user’s environment, which includes taking into account late nights, tired eyes, and need for restful sleep. We can do this with a fairly simple alteration to our stylesheets, and a bit of JavaScript.

作为现代Web开发人员，我们应该使我们的网站尽可能适应用户的环境 ，其中包括考虑深夜，疲倦的眼睛和需要睡眠的需求。我们可以通过对样式表进行相当简单的修改以及添加一些JavaScript来实现此目的。

午夜之后 (After Midnight)

First, we need to determine the conditions for a night-adaptive page change. The user could be in one of several possible situations:

首先，我们需要确定适用于夜间的页面更改条件。用户可能处于以下几种情况之一：

Using the web after sunset, or before sunrise
日落之后或日出之前使用网络
Trying to use their screen in a dim environment
尝试在昏暗的环境中使用他们的屏幕
They could be photophobic (sensitive to bright light)
它们可能是憎光的(对强光敏感)

The first two we can know, or at least make educated guesses for, while cues for the latter currently have to come from the user. That means we must have both manual and automatic control over “night vision” mode.

我们可以知道前两个，或者至少可以做一些有根据的猜测，而后者的提示目前必须来自用户。这意味着我们必须同时具有“夜视”模式的手动和自动控制 。

The simplest automatic method is to detect the local time of day, and use that to add a class to the root <html> element:

最简单的自动方法是检测一天中的本地时间，并使用该方法将一个class添加到根<html>元素：

var currentTime = new Date().getHours();

function timeCheck() {
    if (currentTime > 18 || currentTime < 6) {
      document.documentElement.classList.add('night');
    }
}
timeCheck();

This script makes the semi-reasonable assumption that the sun rises at 6am and sets twelve hours later. Of course, this will change depending upon seasonality, daylight savings and the user’s location on the planet; a more thorough script would determine the user’s geolocation, and use this information to calculate the sunrise and sunset for that day.

该脚本做出半合理的假设，即太阳在凌晨6点升起并在12小时后落山。当然，这将根据季节，夏令时和用户在地球上的位置而改变；更全面的脚本将确定用户的地理位置，并使用此信息来计算当天的日出和日落。

昼夜 (Day For Night)

In principle, switching the majority of sites - which feature black text on a white background - into a “night vision” mode would simply be a case of inverting the page colors. We have a CSS filter to do just that:

原则上，将大多数站点(具有白色背景上的黑色文本)切换为“夜视”模式仅是反转页面颜色的情况。我们有一个CSS过滤器可以做到这一点：

.night { filter: invert(100%); }

Unfortunately, the result is not what you might expect: the filter does not change the background color of the page:

不幸的是，结果不是您所期望的：过滤器不会更改页面的背景色：

That means we must treat page elements separately for night vision mode. Thankfully, the job isn’t too hard. We must:

这意味着我们必须为夜视模式单独处理页面元素。幸运的是，这项工作并不困难。我们必须：

Swap the background of the page to something dark.
将页面背景换成深色。
Switch the text to an appropriate light color, making sure that it keeps an appropriate contrast ratio.
将文本切换为适当的浅色，并确保其保持适当的对比度。
Black-and-white images should probably be inverted, but others (such as color photographs) should be left alone.
黑白图像可能应该倒置，但其他图像(例如彩色照片)应该留空。

I’ll write the new styles in Sass for clarity, but it could be done in vanilla CSS almost as easily:

为了清楚起见，我将在Sass中编写新样式，但可以在原始CSS中几乎轻松地完成：

.night {
    body { 
        background: #000; 
        color: #fff;
    }
}

Don’t forget to also change the color of links! This is where using inherit or currentColor in your stylesheets can be very useful: if you style your links using those properties, they will automatically change with the above CSS.

别忘了还要更改链接的颜色！这是在样式表中使用inherit或currentColor很有用的地方：如果使用这些属性设置链接的样式，它们将随上述CSS自动更改。

For images, you have one of two choices. If a minority of images on the page need to be color-inverted, you could provide them with a special class. For example, this SVG autograph of Jules Verne would look correct when inverted, as shown in the demo:

对于图像，您有两个选择之一。如果页面上的少数图像需要颜色反转，则可以为它们提供特殊的类。例如，这张儒勒·凡尔纳(Jules Verne)的SVG签名倒置后看起来会正确，如演示所示：

Adding the class to the code:

将类添加到代码中：

<img src="jules-verne-autograph.svg" alt="Jules Verne" class="switch">

And the SASS is added to:

SASS已添加到：

.night {
    body { 
        background: #000; 
        color: #fff;
    }
    img.switch { 
        filter: invert(100%);
    }
}

Diagram of Earth-Moon-Sun system — Inverting this picture would make the sun black, so it must be shielded from any change

Note that filter still requires a vendor prefix in Webkit-based browsers.

请注意，在基于Webkit的浏览器中， filter仍需要供应商前缀。

Alternatively, if the majority of your images needed to be switched, you could protect those that should not be affected, like this picture:

此外，必要时您的大部分图像进行切换，你可以保护那些不应受到影响，像这样的画面：

Adding a class of protected:

添加一类protected ：

<img src="earth-moon-sun-system.png" class="protected" 
alt="Diagram of Earth-Moon-Sun system">

And then using the :not pseudo-selector to only change those images that were not protected by the class:

然后使用:not伪选择只改变那些没有被保护类图片：

img:not(.protected) { 
    filter: invert(100%);
}

To smooth out the color shift when the time changes, add a transition to the body in the base CSS, restricted to the properties that are modified during the transition to night mode:

要在时间变化时平滑颜色偏移，请在基本CSS中向body添加一个transition ，仅限于过渡到夜间模式期间修改的属性：

body { 
        transition: 2s background, color;
}

美好的一天，阳光 (Good Day, Sunshine)

Right now the time detection script runs just once: that is, if the user opens the page at 1am, it will always remain that time to the script.

现在，时间检测脚本仅运行一次：也就是说，如果用户在凌晨1点打开页面，则该时间将始终保留到脚本中。

If it was reasonable to assume that the page might be left open in a tab all night, you might want to recheck the time every hour, and reset the page mode then:

如果合理地认为该页面可能会在一个选项卡中整夜保持打开状态，则您可能希望每小时重新检查一次时间，然后重置页面模式，然后：

function callEveryHour() {
    setInterval(timeCheck(), 1000 * 60 * 60);
}

晚安 (Good Night)

This takes care of simple automatic changes to site styles, at least at a basic level. You may have noticed that I did not employ this particular set of techniques in this article, to avoid confusion; in addition, the color changes are not persistant as you navigate across the site. I’ll be talking about the manual method, and making the color changes stick, in the next articles.

至少在基本级别上，这需要对网站样式进行简单的自动更改。您可能已经注意到，为了避免混淆，我在本文中并未采用这套特定的技术。此外，在网站上浏览时，颜色变化不会持久。在下一篇文章中，我将讨论手动方法，并使颜色变化保持不变。

翻译自: https://thenewcode.com/319/Create-a-Night-Vision-Mode-For-Your-Website-Part-1

树莓派相机夜视模式

cungui5726

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
树莓派相机夜视模式_为您的网站创建夜视模式，第1部分

树莓派相机夜视模式If you’re anything like me, you probably use the web long after midnight, or after waking from sleep to check something on your phone. Modern LED screens put out a lot of artificial light, a ...
复制链接

扫一扫