CN112364282A - 网页暗黑模式实现方法、装置、介质及电子设备 - Google Patents

Abstract

本申请涉及网页配置领域，揭示了一种网页暗黑模式实现方法、装置、介质及电子设备。该方法包括：获取目标页面中各像素点的颜色值；向所述目标页面插入矩形元素以覆盖所述目标页面的至少一部分，其中，所述矩形元素中的每个像素点均显示预定颜色值；分别计算所述矩形元素中各像素点的预定颜色值与所述目标页面中相应像素点的颜色值之间的颜色差值，并将所述颜色差值作为所述目标页面中像素点的颜色值；按照计算的每个像素点的颜色值对所述目标页面中的像素点进行渲染。此方法下，可以自动将网页从普通模式转换为暗黑模式，降低了暗黑模式的实现成本，提高了暗黑模式的实现效率。

Description

网页暗黑模式实现方法、装置、介质及电子设备

技术领域

本申请涉及网页配置技术领域，特别涉及一种网页暗黑模式实现方法、装置、介质及电子设备。

背景技术

当前出于业务全面覆盖的需要，很多网站都要在多平台上开发和维护页面。因此，为了在多个平台上对页面的暗黑模式进行适配，往往需要由设计师提供多份设计稿件，再由开发进行编码实现，测试人员验证，最终才能发布上线。整个过程对于产品、设计、开发、测试等人员来说，工作量可以说是加倍的。另外，随着产品不断迭代，往往这些人员还得在迭代需求中不断维护两套暗黑模式的风格。因此，目前对页面采用的暗黑模式的实现方式成本高，效率低。

发明内容

在网页配置技术领域，为了解决上述技术问题，本申请的目的在于提供一种网页暗黑模式实现方法、装置、介质及电子设备。

根据本申请的一方面，提供了一种网页暗黑模式实现方法，所述方法包括：

获取目标页面中各像素点的颜色值；

向所述目标页面插入矩形元素以覆盖所述目标页面的至少一部分，其中，所述矩形元素中的每个像素点均显示预定颜色值；

分别计算所述矩形元素中各像素点的预定颜色值与所述目标页面中相应像素点的颜色值之间的颜色差值，并将所述颜色差值作为所述目标页面中像素点的颜色值；

按照计算的每个像素点的颜色值对所述目标页面中的像素点进行渲染。

根据本申请的另一方面，提供了一种网页暗黑模式实现装置，所述装置包括：

获取模块，被配置为获取目标页面中各像素点的颜色值；

插入模块，被配置为向所述目标页面插入矩形元素以覆盖所述目标页面的至少一部分，其中，所述矩形元素中的每个像素点均显示预定颜色值；

计算模块，被配置为分别计算所述矩形元素中各像素点的预定颜色值与所述目标页面中相应像素点的颜色值之间的颜色差值，并将所述颜色差值作为所述目标页面中像素点的颜色值；

渲染模块，被配置为按照计算的每个像素点的颜色值对所述目标页面中的像素点进行渲染。

根据本申请的另一方面，提供了一种计算机可读程序介质，其存储有计算机程序指令，当所述计算机程序指令被计算机执行时，使计算机执行如前所述的方法。

根据本申请的另一方面，提供了一种电子设备，所述电子设备包括：

处理器；

存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时，实现如前所述的方法。

本申请的实施例提供的技术方案可以包括以下有益效果：

对于本申请所提供的网页暗黑模式实现方法、装置、介质及电子设备，该方法包括如下步骤：获取模块，被配置为获取目标页面中各像素点的颜色值；插入模块，被配置为向所述目标页面插入矩形元素以覆盖所述目标页面的至少一部分，其中，所述矩形元素中的每个像素点均显示预定颜色值；计算模块，被配置为分别计算所述矩形元素中各像素点的预定颜色值与所述目标页面中相应像素点的颜色值之间的颜色差值，并将所述颜色差值作为所述目标页面中像素点的颜色值；渲染模块，被配置为按照计算的每个像素点的颜色值对所述目标页面中的像素点进行渲染。

此方法下，通过向目标页面插入预定颜色的矩形元素，基于矩形元素中像素点的颜色值和目标页面中相应像素点的颜色值进行像素点颜色值的计算，最后按照计算出的像素点的颜色值对目标页面进行渲染，因此，可以自动将网页从普通模式转换为暗黑模式，降低了暗黑模式的实现成本，提高了暗黑模式的实现效率。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性的，并不能限制本申请。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。

图1是根据一示例性实施例示出的一种网页暗黑模式实现方法的系统架构示意图；

图2是根据一示例性实施例示出的一种网页暗黑模式实现方法的流程图；

图3是根据图2对应实施例示出的一实施例的步骤220的细节的流程图；

图4是根据图2对应实施例示出的一实施例的步骤240之后步骤的流程图；

图5是根据一示例性实施例示出的一种网页暗黑模式实现装置的框图；

图6是根据一示例性实施例示出的一种实现上述网页暗黑模式实现方法的电子设备示例框图；

图7是根据一示例性实施例示出的一种实现上述网页暗黑模式实现方法的程序产品。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

此外，附图仅为本申请的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。

本申请首先提供了一种网页暗黑模式实现方法。网页的暗黑模式是指将网页渲染的颜色转换为黑色或者接近黑色。这里的网页可以是各种终端所能显示的网页，比如可以是智能手机、平板电脑等移动终端所能显示的网页，也可以是笔记本电脑、台式计算机等PC(Personal Computer)端显示的网页。本申请提供的网页暗黑模式实现方法可以高效地实现网页的暗黑模式。

本申请的实施终端可以是任何具有运算、处理以及通信功能的设备，该设备可以与外部设备相连，用于接收或者发送数据，具体可以是便携移动设备，例如智能手机、平板电脑、笔记本电脑、PDA(Personal Digital Assistant)等，也可以是固定式设备，例如，计算机设备、现场终端、台式电脑、服务器、工作站等，还可以是多个设备的集合，比如云计算的物理基础设施或者服务器集群。

可选地，本申请的实施终端可以为服务器或者云计算的物理基础设施。

图1是根据一示例性实施例示出的一种网页暗黑模式实现方法的系统架构示意图。如图1所示，该系统架构包括智能手机110和服务器120，智能手机110和服务器120之间通过通信链路相连，可以用于发送或接收数据。智能手机110为本实施例中的实施终端，智能手机110上运行有Web浏览器，而服务器120运行有Web服务器。当本申请提供的一种网页暗黑模式实现方法应用于图1所示的系统架构中时，一个过程可以是这样的：首先，用户通过操作智能手机110上的Web浏览器向服务器120发起页面访问请求；接着，服务器120上的Web服务器根据该页面访问请求向智能手机110返回相应的页面，Web浏览器将该页面进行显示，该页面中包括一个可用于切换至暗黑模式的按钮元素以及用于执行暗黑模式的切换的脚本文件。最后，当用户在Web浏览器中显示的该页面中触发按钮元素后，Web浏览器会通过执行该脚本文件，将该页面渲染和切换至暗黑模式。

值得一提的是，图1仅为本申请的一个实施例。虽然在本实施例中的实施终端为智能手机，但在其他实施例中，实施终端可以为台式电脑等各种如前所述的终端或设备；虽然在本实施例中，Web浏览器和Web服务器分别位于不同的终端上，页面也从本申请实施终端之外的终端发送至本申请的实施终端进行渲染，但在其他实施例或者具体应用中，Web浏览器和Web服务器可以位于同一终端上，即页面可以从实施终端获得并在实施终端进行渲染，本申请对此不作任何限定，本申请的保护范围也不应因此而受到任何限制。

图2是根据一示例性实施例示出的一种网页暗黑模式实现方法的流程图。本实施例提供的网页暗黑模式实现方法可以由台式电脑执行，如图2所示，包括以下步骤：

步骤210，获取目标页面中各像素点的颜色值。

此处的颜色值可以利用十六进制的颜色值来表示，也可以利用RGB颜色值来表示。

目标页面可以是各种平台或者操作系统上的页面，比如可以是移动端的页面，因此，本实施例提供的网页暗黑模式实现方法可以在移动端实现，由于移动端的页面通常比较简单，因此可以获得较好的暗黑模式效果。当然，目标页面也可以是PC端的页面。

在一个实施例中，所述目标页面包括按钮元素，所述获取目标页面中各像素点的颜色值，包括：

响应于目标页面中按钮元素被触发，获取所述目标页面中各像素点的颜色值。

换而言之，在本实施例中，网页暗黑模式是通过用户在目标页面中触发按钮来实现的。这种触发操作可以通过在目标页面中嵌入脚本，如Javascript脚本来实现。

在本实施例中，用户在目标页面中触发按钮即可进行网页暗黑模式的切换，操作便捷，提高了用户体验。

在一个实施例中，所述获取目标页面中各像素点的颜色值，包括：

获取来自用户的暗黑时间设置指令，所述暗黑时间设置指令包括暗黑时间范围；

提取所述暗黑时间设置指令中的暗黑时间范围；

若当前时间在所述暗黑时间范围内，则获取目标页面中各像素点的颜色值。

也就是说，实现网页暗黑模式可以是定期自动执行的，比如，可以在每天的18:00至第二天的6:00自动执行暗黑模式，可以提供护眼效果，保证用户体验。

当然，预定时间范围也可以不是固定的，可以是根据用户行为动态调整的，比如可以利用机器学习算法对用户行为习惯进行学习，从而在每天最合适的时间段切换至暗黑模式。

在一个实施例中，所述网页暗黑模式实现方法是以插件的方式运行在所述目标页面中的。

具体来说，可通过在目标页面中嵌入脚本，如Javascript脚本来实现本实施例提供的网页暗黑模式实现方法。

步骤220，向所述目标页面插入矩形元素以覆盖所述目标页面的至少一部分，其中，所述矩形元素中的每个像素点均显示预定颜色值。

目标页面的至少一部分，即可以是目标页面中的一部分区域，也可以是目标页面在窗口中显示出的整体区域。

在一个实施例中，所述矩形元素覆盖了目标页面的一部分。

目标页面的一部分小于目标页面的整体区域，在本实施例中，最终将在目标页面中的一部分区域实现暗黑模式。

在一个实施例中，在向所述目标页面插入矩形元素以覆盖所述目标页面的至少一部分之前，所述方法还包括：

获取用户在所述目标页面选择的目标区域，其中，所述目标区域的高度小于所述目标页面所在浏览器的窗口的内高度，所述目标区域的宽度小于所述目标页面所在浏览器的窗口的内宽度；

所述向所述目标页面插入矩形元素以覆盖所述目标页面的至少一部分，包括：

确定所述目标区域的位置、高度及宽度；

向所述目标页面插入矩形元素以覆盖所述目标区域，其中，所述矩形元素的位置与所述目标区域相同，所述矩形元素的高度属性值等于所述目标区域的高度，所述矩形元素的宽度属性值等于所述目标区域的宽度。

目标区域可以是用户通过一个可缩放和拖拽位移的矩形框在目标页面中选择的矩形区域，目标区域的位置和大小可以任意选择。比如，目标区域可以是目标页面中的某个菜单控件或者按钮控件对应的区域。

在本实施例中，可以让用户自主定义在目标页面中的哪个区域实现暗黑模型，能够满足用户的个性化需求，提高用户体验。

在一个实施例中，步骤220的具体步骤可以如图3所示。图3是根据图2对应实施例示出的一实施例的步骤220的细节的流程图，如图3所示，包括以下步骤：

步骤221，确定所述目标页面所在浏览器的窗口的内高度和内宽度。

具体来说，可以利用Javascript调用由浏览器提供的window.innerHeight方法来获得浏览器窗口的以像素计算的内高度，调用由浏览器提供的window.innerWidth方法来获得浏览器窗口的以像素计算的内宽度。

步骤222，分别以所述内高度和所述内宽度作为高度属性值和宽度属性值以建立div元素。

步骤223，将所述div元素作为矩形元素覆盖所述窗口中的目标页面，其中，所述div元素的左外边距边界与所述窗口的左边界之间的偏移为0，所述div元素的上外边距边界与所述窗口的上边界之间的偏移为0，所述div元素的位置相对于所述窗口是固定位置，所述div元素堆叠在所述目标页面的最高层，所述div元素的内容为空，所述div元素以预定颜色值为背景色。

div元素是基于HTML(HyperText Markup Language，超文本标记语言)技术建立的，div元素的各种属性是利用CSS(Cascading Style Sheets，层叠样式表)建立的。比如，div元素的左外边距边界与所述窗口的左边界之间的偏移可以利用css中的left属性的属性值来确定，div元素的上外边距边界与所述窗口的上边界之间的偏移可以利用css中的height属性的属性值来确定，div元素的位置相对于所述窗口是固定位置可以通过将css中的position属性的属性值设置为fixed来设定，div元素堆叠在目标页面的最高层可以通过将css中的z-index属性的属性值设置为99999来设定。

假如矩形元素的预定颜色值以RGB颜色值表示，那么，矩形元素对应的RGB颜色值通常均大于200，使得该矩形元素接近甚至等于白色，当然，预定颜色值也可以设置为其他颜色值，以提供不同的暗黑模式效果。矩形元素中的各像素点所显示的预定颜色值也可以不同。

步骤230，分别计算所述矩形元素中各像素点的预定颜色值与所述目标页面中相应像素点的颜色值之间的颜色差值，并将所述颜色差值作为所述目标页面中像素点的颜色值。

对于矩形元素中的一个像素点而言，目标页面中相应像素点是指该矩形元素插入目标页面之后被该像素点所覆盖的像素点。

在一个实施例中，所述预定颜色值为白色，步骤230进一步包括：

分别计算所述矩形元素中各白色的像素点对应的颜色值与所述目标页面中相应像素点的颜色值之间的颜色差值，并将所述颜色差值作为所述目标页面中像素点的颜色值，使所述目标页面中至少一个像素点对应的所述颜色值为黑色。

具体来说，将矩形元素或者div元素的颜色值设置为白色可以通过将css中的background-color属性的属性值设置为white，#fff或者rgb(255,255,255)来实现。

为了实现不同风格的暗黑模式，预定颜色值也可以为其他颜色，并且矩形元素中各像素点的颜色值也可以不是单一的，即矩形元素中各像素点可以对应不同的颜色值，从而实现更独特的暗黑模式。在一个实施例中，所述将所述颜色差值作为所述目标页面中像素点的颜色值，包括：

将所述颜色差值与预设的颜色值之差作为所述目标页面中像素点的颜色值。

在本实施例中，在颜色差值的基础上减少了颜色值，使得计算出的目标页面中像素点的颜色值更浅，从而实现较浅的暗黑模式。

可以采用多种方式确定颜色差值。

在一个实施例中，所述分别计算所述矩形元素中各像素点的预定颜色值与所述目标页面中相应像素点的颜色值之间的颜色差值，包括：

分别计算所述矩形元素中各像素点的预定颜色值与所述目标页面中相应像素点的颜色值之差的绝对值，作为颜色差值。

在一个实施例中，所述分别计算所述矩形元素中各像素点的预定颜色值与所述目标页面中相应像素点的颜色值之间的颜色差值，包括：

分别计算所述矩形元素中各像素点的预定颜色值与所述目标页面中相应像素点的颜色值之差；

若所述差为负数，则将所述负数的绝对值作为颜色差值；

若所述差为非负数，则将所述差作为颜色差值。

确定矩形元素中各像素点的预定颜色值与目标页面中相应像素点的颜色值之差，可以利用difference算法实现，difference算法将两个RGB颜色值中对应通道的颜色值相减，具体计算方式为如下表达式：

difference(rgb(a,b,c)，rgb(x,y,z))＝rgb(a-x,b-y,c-z)，

其中，rgb(a,b,c)和rgb(x,y,z)为两个RGB颜色值，rgb(a-x,b-y,c-z)为这两个RGB颜色值之差。

假如矩形元素中一个像素点的预定颜色值为rgb(255,255,255)，目标页面中相应像素点的颜色值为rgb(0,100,200)，那么这两个像素点颜色值之差可以利用如下的方式计算得到：

difference(rgb(255,255,255)，rgb(0,100,200))＝rgb(255,155,55)。

假如目标页面包括黑色的文字和白色的背景，即文字的RGB颜色值为rgb(0,0,0)，背景的RGB颜色值为rgb(255,255,255)，那么利用difference算法针对文字的像素点利用如下表达式计算出对应的颜色差值：

difference(rgb(255,255,255),rgb(0,0,0))＝rgb(255,255,255)，

可见，通过计算可以确定文字的像素点对应的颜色差值为rgb(255,255,255)，即文字要渲染为白色；

利用difference算法针对背景的像素点利用如下表达式计算出对应的颜色差值：

difference(rgb(255,255,255),rgb(255,255,255))＝rgb(0,0,0)，

可见，通过计算可以确定背景的像素点对应的颜色差值为rgb(0,0,0)，即背景要渲染为黑色。

步骤240，按照计算的每个像素点的颜色值对所述目标页面中的像素点进行渲染。

将各像素点渲染为对应的计算出的颜色值即可实现暗黑模式的效果。

在一个实施例中，所述目标页面包括按钮元素，在按照计算的每个像素点的颜色值对所述目标页面中的像素点进行渲染之前，所述方法还包括：

存储所述目标页面；

在按照计算的每个像素点的颜色值对所述目标页面中的像素点进行渲染之后，所述方法还包括：

当所述目标页面中的按钮元素被触发，将渲染后的所述目标页面恢复为已存储的目标页面。

按钮元素再次被触发相当于暗黑模式被关闭，在本实施例中，通过在切换至暗黑模式之前，将目标页面进行存储，在从暗黑模式还原至正常模式时，将渲染后的目标页面恢复为已存储的目标页面即可，无需再次计算RGB颜色值，因此节约了计算资源，提高了页面的恢复效率。

在一个实施例中，在按照计算的每个像素点的颜色值对所述目标页面中的像素点进行渲染之后，所述方法还包括：

响应于监听到的所述目标页面被重新绘制的事件，执行所述获取目标页面中各像素点的颜色值的步骤及之后的步骤。

具体来说，监听到目标页面被重新绘制的事件可以通过监听浏览器的requestAnimationFrame事件来实现，其中，requestAnimationFrame为浏览器提供的webAPI接口。

在本实施例中，实现了目标页面进行重新绘制时暗黑模式的实时更新，保证了暗黑模式的持续性。

在一个实施例中，步骤240之后的步骤可以如图4所示。图4是根据图2对应实施例示出的一实施例的步骤240之后步骤的流程图。如图4所示，在步骤240之后，所述方法还包括：

步骤250，将所述目标页面和渲染后的所述目标页面分别进行存储。

本步骤可以在服务端执行。此时，目标页面以及渲染后的目标页面都已经生成，可以以文件的方式进行存储。

步骤260，根据用户端的请求将所述目标页面或者渲染后的所述目标页面发送至用户端。

用户端的请求可以为网页访问请求。

在本实施例中，暗黑模式的页面不是在用户端实现的，而是直接在服务端实现的，因此，通过在服务端自动实现暗黑模式，同样能够提高效率并降低暗黑模式的实现成本，还减少了用户端的计算量。

综上所述，根据图2实施例提供的网页暗黑模式实现方法，通过向目标页面插入预定颜色的矩形元素，基于矩形元素中像素点的颜色值和目标页面中相应像素点的颜色值进行像素点颜色值的计算，最后按照计算出的像素点的颜色值对目标页面进行渲染，因此，可以自动将网页从普通模式转换为暗黑模式，降低了暗黑模式的实现成本，提高了暗黑模式的实现效率。

本申请还提供了一种网页暗黑模式实现装置，以下是本申请的装置实施例。

图5是根据一示例性实施例示出的一种网页暗黑模式实现装置的框图。如图5所示，装置500包括：

获取模块510，被配置为获取目标页面中各像素点的颜色值；

插入模块520，被配置为向所述目标页面插入矩形元素以覆盖所述目标页面的至少一部分，其中，所述矩形元素中的每个像素点均显示预定颜色值；

计算模块530，被配置为分别计算所述矩形元素中各像素点的预定颜色值与所述目标页面中相应像素点的颜色值之间的颜色差值，并将所述颜色差值作为所述目标页面中像素点的颜色值；

渲染模块540，被配置为按照计算的每个像素点的颜色值对所述目标页面中的像素点进行渲染。

根据本申请的第三方面，还提供了一种能够实现上述方法的电子设备。

所属技术领域的技术人员能够理解，本申请的各个方面可以实现为系统、方法或程序产品。因此，本申请的各个方面可以具体实现为以下形式，即：完全的硬件实施方式、完全的软件实施方式(包括固件、微代码等)，或硬件和软件方面结合的实施方式，这里可以统称为“电路”、“模块”或“系统”。

下面参照图6来描述根据本申请的这种实施方式的电子设备600。图6显示的电子设备600仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图6所示，电子设备600以通用计算设备的形式表现。电子设备600的组件可以包括但不限于：上述至少一个处理单元610、上述至少一个存储单元620、连接不同系统组件(包括存储单元620和处理单元610)的总线630。

其中，所述存储单元存储有程序代码，所述程序代码可以被所述处理单元610执行，使得所述处理单元610执行本说明书上述“实施例方法”部分中描述的根据本申请各种示例性实施方式的步骤。

存储单元620可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)621和/或高速缓存存储单元622，还可以进一步包括只读存储单元(ROM)623。

存储单元620还可以包括具有一组(至少一个)程序模块625的程序/实用工具624，这样的程序模块625包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线630可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备600也可以与一个或多个外部设备800(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备600交互的设备通信，和/或与使得该电子设备600能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口650进行，比如与显示单元640通信。并且，电子设备600还可以通过网络适配器660与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器660通过总线630与电子设备600的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备600使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本申请实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、终端装置、或者网络设备等)执行根据本申请实施方式的方法。

根据本申请的第四方面，还提供了一种计算机可读存储介质，其上存储有能够实现本说明书上述方法的程序产品。在一些可能的实施方式中，本申请的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在终端设备上运行时，所述程序代码用于使所述终端设备执行本说明书上述“示例性方法”部分中描述的根据本申请各种示例性实施方式的步骤。

参考图7所示，描述了根据本申请的实施方式的用于实现上述方法的程序产品700，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本申请的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本申请操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

此外，上述附图仅是根据本申请示例性实施例的方法所包括的处理的示意性说明，而不是限制目的。易于理解，上述附图所示的处理并不表明或限制这些处理的时间顺序。另外，也易于理解，这些处理可以是例如在多个模块中同步或异步执行的。

应当理解的是，本申请并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围执行各种修改和改变。本申请的范围仅由所附的权利要求来限制。

Claims (10)

1.一种网页暗黑模式实现方法，其特征在于，所述方法包括：

获取目标页面中各像素点的颜色值；

向所述目标页面插入矩形元素以覆盖所述目标页面的至少一部分，其中，所述矩形元素中的每个像素点均显示预定颜色值；

分别计算所述矩形元素中各像素点的预定颜色值与所述目标页面中相应像素点的颜色值之间的颜色差值，并将所述颜色差值作为所述目标页面中像素点的颜色值；

按照计算的每个像素点的颜色值对所述目标页面中的像素点进行渲染。

2.根据权利要求1所述的方法，其特征在于，在向所述目标页面插入矩形元素以覆盖所述目标页面的至少一部分之前，所述方法还包括：

获取用户在所述目标页面选择的目标区域，其中，所述目标区域的高度小于所述目标页面所在浏览器的窗口的内高度，所述目标区域的宽度小于所述目标页面所在浏览器的窗口的内宽度；

所述向所述目标页面插入矩形元素以覆盖所述目标页面的至少一部分，包括：

确定所述目标区域的位置、高度及宽度；

向所述目标页面插入矩形元素以覆盖所述目标区域，其中，所述矩形元素的位置与所述目标区域相同，所述矩形元素的高度属性值等于所述目标区域的高度，所述矩形元素的宽度属性值等于所述目标区域的宽度。

3.根据权利要求1所述的方法，其特征在于，所述预定颜色值为白色，所述分别计算所述矩形元素中各像素点的预定颜色值与所述目标页面中相应像素点的颜色值之间的颜色差值，并将所述颜色差值作为所述目标页面中像素点的颜色值，包括：

分别计算所述矩形元素中各白色的像素点对应的颜色值与所述目标页面中相应像素点的颜色值之间的颜色差值，并将所述颜色差值作为所述目标页面中像素点的颜色值，使所述目标页面中至少一个像素点对应的所述颜色值为黑色。

4.根据权利要求1所述的方法，其特征在于，所述向所述目标页面插入矩形元素以覆盖所述目标页面的至少一部分，包括：

确定所述目标页面所在浏览器的窗口的内高度和内宽度；

分别以所述内高度和所述内宽度作为高度属性值和宽度属性值以建立div元素；

将所述div元素作为矩形元素覆盖所述窗口中的目标页面，其中，所述div元素的左外边距边界与所述窗口的左边界之间的偏移为0，所述div元素的上外边距边界与所述窗口的上边界之间的偏移为0，所述div元素的位置相对于所述窗口是固定位置，所述div元素堆叠在所述目标页面的最高层，所述div元素的内容为空，所述div元素以预定颜色值为背景色。

5.根据权利要求1-4任意一项所述的方法，其特征在于，所述目标页面包括按钮元素，在按照计算的每个像素点的颜色值对所述目标页面中的像素点进行渲染之前，所述方法还包括：

存储所述目标页面；

在按照计算的每个像素点的颜色值对所述目标页面中的像素点进行渲染之后，所述方法还包括：

当所述目标页面中的按钮元素被触发，将渲染后的所述目标页面恢复为已存储的目标页面。

6.根据权利要求1-4任意一项所述的方法，其特征在于，在按照计算的每个像素点的颜色值对所述目标页面中的像素点进行渲染之后，所述方法还包括：

响应于监听到的所述目标页面被重新绘制的事件，执行所述获取目标页面中各像素点的颜色值的步骤及之后的步骤。

7.根据权利要求1-4任意一项所述的方法，其特征在于，在按照计算的每个像素点的颜色值对所述目标页面中的像素点进行渲染之后，所述方法还包括：

将所述目标页面和渲染后的所述目标页面分别进行存储；

根据用户端的请求将所述目标页面或者渲染后的所述目标页面发送至用户端。

8.一种网页暗黑模式实现装置，其特征在于，所述装置包括：

获取模块，被配置为获取目标页面中各像素点的颜色值；

插入模块，被配置为向所述目标页面插入矩形元素以覆盖所述目标页面的至少一部分，其中，所述矩形元素中的每个像素点均显示预定颜色值；

计算模块，被配置为分别计算所述矩形元素中各像素点的预定颜色值与所述目标页面中相应像素点的颜色值之间的颜色差值，并将所述颜色差值作为所述目标页面中像素点的颜色值；

渲染模块，被配置为按照计算的每个像素点的颜色值对所述目标页面中的像素点进行渲染。

9.一种计算机可读程序介质，其特征在于，其存储有计算机程序指令，当所述计算机程序指令被计算机执行时，使计算机执行根据权利要求1至7中任一项所述的方法。

10.一种电子设备，其特征在于，所述电子设备包括：

处理器；

存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时，实现如权利要求1至7任一项所述的方法。

Images