CN106126725B - 页面显示方法及装置 - Google Patents

Abstract

本公开提供一种页面显示方法及装置，一种页面显示方法，所述方法包括：获取目标页面的源文件；基于所述源文件，对所述目标页面整体进行色彩映射；在移动终端的屏幕上输出色彩映射后的目标页面。由此可见，本公开技术方案在护眼模式下展示页面时，可以对该页面整体进行色彩映射，之后将色彩映射后的页面在屏幕上输出显示。与相关技术相比，由于本实施例是对页面进行了全局的色彩映射(即整个页面各部位的色彩变化量是相同的)，因此整个页面的色彩比较柔和、不突兀，可以更好的保护视力。

Description

页面显示方法及装置

技术领域

本公开涉及移动终端技术领域，特别涉及一种页面显示方法及装置。

背景技术

目前，主流的浏览器均支持在护眼模式下展示页面，相较于白色的页面，护眼模式下的页面不但有助于保护眼睛、缓解眼疲劳，而且还可以满足用户的个性化的需要，比如有的用户喜欢把底色设置成淡绿色。相关技术中，在护眼模式下展示页面时，页面配色不协调，比较突兀，缺乏美感。

发明内容

为了解决上述问题，本公开提供一种页面显示方法及装置。

具体地，本公开是通过如下技术方案实现的：

根据本公开实施例的第一方面，提供一种页面显示方法，所述方法包括：

获取目标页面的源文件；

基于所述源文件，对所述目标页面整体进行色彩映射；

在移动终端的屏幕上输出色彩映射后的目标页面。

在一实施例中，所述基于所述源文件，对所述目标网页整体进行色彩映射，包括：

基于所述源文件，获取所述目标网页中需要渲染的各元素的背景颜色值；

对所述各元素的背景颜色值均进行下述调整：降低背景颜色值中第一色彩通道内色彩的权重、增加第二色彩通道内色彩的权重，其中，所述第一、二色彩通道均包括RGBA色彩模式规定的色彩通道的至少一种，所述第一色彩通道与所述第二色彩通道不相同。

在一实施例中，所述对所述各元素的背景颜色值均进行下述调整：降低第一色彩通道的色彩权重、增加第二色彩通道的色彩权重，包括：

根据预设色彩调整规则，对所述各元素的背景颜色值均进行下述调整：将背景颜色值中第一色彩通道内色彩的颜色值降低至预设第一色值、将第二色彩通道内色彩的颜色值提高至预设第二色值。

在一实施例中，所述对所述各元素的背景颜色值均进行下述调整：降低第一色彩通道的色彩权重、增加第二色彩通道的色彩权重，包括：

根据用户输入的色彩调整规则，对所述各元素的背景颜色值均进行下述调整：将背景颜色值中第一色彩通道内色彩的颜色值降低至预设第三色值、将第二色彩通道内色彩的颜色值提高至预设第四色值。

在一实施例中，所述基于所述源文件，获取所述目标网页中需要渲染的各元素的背景颜色值，包括：

解析所述源文件中的html源码，生成渲染树；

根据所述源文件中的CSS样式表，对所述渲染树上的各渲染节点进行着色模式计算，得到各渲染节点的背景颜色值，其中，所述源文件中包括所述目标页面的html源码、CSS样式表。

在一实施例中，所述获取目标页面的源文件，包括：

判断移动终端中是否存储有目标页面的源文件；

若存储有所述源文件，则从所述移动终端中获取所述源文件；

若未存储有所述源文件，则从服务器获取所述源文件。

根据本公开实施例的第二方面，提供一种页面显示装置，所述装置包括：

获取模块，被配置为获取目标页面的源文件；

映射模块，被配置为基于所述获取模块获取到的源文件，对所述目标页面整体进行色彩映射；

输出模块，被配置为在移动终端的屏幕上输出所述映射模块色彩映射后的目标页面。

在一实施例中，所述映射模块，包括：

颜色值获取子模块，被配置为基于所述获取模块获取到的源文件，获取所述目标网页中需要渲染的各元素的背景颜色值；

色彩调整子模块，被配置为对所述颜色值获取子模块获取到的各元素的背景颜色值均进行下述调整：降低背景颜色值中第一色彩通道内色彩的权重、增加第二色彩通道内色彩的权重，其中，所述第一、二色彩通道均包括RGBA色彩模式规定的色彩通道的至少一种，所述第一色彩通道与所述第二色彩通道不相同。

在一实施例中，所述色彩调整子模块，包括：

第一色彩权重调整子模块，被配置为根据预设色彩调整规则，对所述各元素的背景颜色值均进行下述调整：将背景颜色值中第一色彩通道内色彩的颜色值降低至预设第一色值、将第二色彩通道内色彩的颜色值提高至预设第二色值。

在一实施例中，所述色彩调整子模块，包括：

第二色彩权重调整子模块，被配置为根据用户输入的色彩调整规则，对所述各元素的背景颜色值均进行下述调整：将背景颜色值中第一色彩通道内色彩的颜色值降低至预设第三色值、将第二色彩通道内色彩的颜色值提高至预设第四色值。

在一实施例中，所述颜色值获取子模块，包括：

解析子模块，被配置为解析所述源文件中的html源码，生成渲染树；

计算子模块，被配置为根据所述源文件中的CSS样式表，对所述渲染树上的各渲染节点进行着色模式计算，得到各渲染节点的背景颜色值，其中，所述源文件中包括所述目标页面的html源码、CSS样式表。

在一实施例中，所述获取模块，包括：

判断子模块，被配置为判断移动终端中是否存储有目标页面的源文件；

第一获取子模块，被配置为在所述判断子模块的判断结果为是的情况下，从所述移动终端中获取所述源文件；

第二获取子模块，被配置为在所述判断子模块的判断结果为否的情况下，从服务器获取所述源文件。

根据本公开实施例的第三方面，提供一种网页显示装置，包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为：

获取目标页面的源文件；

基于所述源文件，对所述目标页面整体进行色彩映射；

在移动终端的屏幕上输出色彩映射后的目标页面。

本实施例在护眼模式下展示页面时，可以对该页面整体进行色彩映射，之后将色彩映射后的页面在屏幕上输出显示。与相关技术相比，由于本实施例是对页面进行了全局的色彩映射(即整个页面各部位的色彩变化量是相同的)，因此整个页面的色彩比较柔和、不突兀，可以更好的保护视力。

本实施例可以在移动终端中存储有目标页面的源文件时，直接从移动终端本地获取目标页面的源文件，而不必去服务器获取，速度比较快、效率比较高。

本实施例可以通过目标页面的html源码及CSS样式表，精确地确定出该目标页面中需要渲染的各元素的背景颜色值，之后针对上述各元素的背景颜色值均进行相同的色彩权重调整，不会造成页面元素的遗漏，因此可以保证调整结果的精确性、全面性。

本实施例可以通过在移动终端本地预先存储色彩调整规则的方式，来达到自适应调整各色彩通道内色彩的权重的目的，而无需用户人为干预，智能化程度较高。

本实施例可以支持用户自定义色彩调整规则，根据用户定义的色彩调整规则来调整各色彩通道内色彩的权重，满足用户的个性化需求。

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

附图说明

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

图1是本公开根据一示例性实施例示出的一种页面显示方法的流程图；

图2(a)是本公开根据一示例性实施例示出的页面在正常浏览模式下的示例图；

图2(b)是本公开根据一示例性实施例示出的相关技术中的页面在护眼模式下的示例图；

图2(c)是本公开根据一示例性实施例示出的本公开技术方案中的页面在护眼模式下的示例图；

图3是本公开根据一示例性实施例示出的另一种页面显示方法的流程图；

图4是本公开根据一示例性实施例示出的一种页面显示装置的框图；

图5是本公开根据一示例性实施例示出的另一种页面显示装置的框图；

图6是本公开根据一示例性实施例示出的另一种页面显示装置的框图；

图7是本公开根据一示例性实施例示出的另一种页面显示装置的框图；

图8是本公开根据一示例性实施例示出的另一种页面显示装置的框图；

图9是本公开根据一示例性实施例示出的另一种页面显示装置的框图；

图10是本公开根据一示例性实施例示出的一种用于页面显示装置的一结构示意图。

具体实施方式

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

在本公开使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本公开。在本公开和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

应当理解，尽管在本公开可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本公开范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。

目前，主流的浏览器均支持在护眼模式下展示页面，相较于白色的页面，护眼模式下的页面不但有助于保护眼睛、缓解眼疲劳，而且还可以满足用户的个性化的需要，比如有的用户喜欢把底色设置成淡绿色。相关技术中，在护眼模式下展示页面时，页面配色不协调，比较突兀，缺乏美感。为了解决上述问题，本公开提供了一种页面显示方法及装置。

下面首先对本公开提供的一种页面显示方法进行介绍。

需要说明的是，本公开提供的方法适用于移动终端，在实际应用中，该移动终端可以包括：智能手机、平板电脑等等。

如图1所示，图1是本公开根据一示例性实施例示出的一种页面显示方法的流程图，该方法可以包括以下步骤：

在步骤101中，获取目标页面的源文件。

本实施中的目标页面可以为用户当前浏览的网页，也可以为用户即将浏览的网页。

在一种应用场景中，当用户在智能手机上浏览网页时，如果将当前的网页浏览模式设置为“护眼模式”，则该用户当前浏览的网页为目标页面。

在另一种应用场景中，在浏览网页之前，如果预先将网页的浏览模式设置为“护眼模式”，则用户打开智能手机的浏览器即将浏览的网页为目标网页。

在本实施例中，可以在移动终端的系统UI(User Interface，用户界面)界面或者移动终端中浏览器的设置界面中为用户提供设置网页浏览模式的接口，以便用户可以通过该接口来根据需求实时或者预先设置网页浏览模式，如设置为“护眼模式”，在实际应用中，上述接口的形式可以为图标、按钮、或者文本框，本实施例对此不做限定。

此外，移动终端的系统或者移动终端中安装的浏览器，也可以通过移动终端的光感应器件获得当前所处环境的光线情况，之后，根据光线情况自动调节网页的浏览模式。

可以理解的是，对于一个网页，服务器存储的是该网页的源文件，如果用户想浏览该网页，该用户使用的移动终端会向服务器请求该网页的源文件，在请求到该网页的源文件之后，会依据该源文件进行网页的排版及绘制，并最终展示在移动终端的屏幕上。网页的源文件中可以包括：该网页的html源码、图片、CSS样式表及脚本文件等。

由上述情况可知，当目标页面为用户当前浏览的网页时，移动终端已经将该网页的源文件下载到了本地。当目标页面为用户即将浏览的网页时，移动终端有可能之前未将该网页的源文件下载到本地。

此时，在一种可能的实施方式中，上述步骤101可以包括：判断移动终端中是否存储有目标页面的源文件；若存储有上述源文件，则从上述移动终端中获取上述源文件；若未存储有上述源文件，则从服务器获取上述源文件。在本实施方式中可以通过相关技术中的任一种判断方法，来判断移动终端本地是否存储有目标页面的源文件，本实施例对此不做限定。

由上述实施方式可见，该实施方式可以在移动终端中存储有目标页面的源文件时，直接从移动终端本地获取目标页面的源文件，而不必去服务器获取，速度比较快、效率比较高。

此外，在另一种可能的实施方式中，上述步骤101可以包括：直接从服务器获取目标页面的源文件。

在步骤102中，基于上述源文件，对上述目标页面整体进行色彩映射。

需要说明的是，相关技术中，在“护眼模式下”展示网页时，只是将网页中的一部分页面元素做了色彩映射，而另一部分页面元素的色彩仍然保持不变，即只进行局部的色彩转换，生硬的转换了某些部分区域的颜色，这就导致页面配色不协调，比较突兀，缺乏美感，也使得色彩不变的那部分比较刺眼。

基于上述情况，本实施例可以考虑将整个页面进行全局的色彩映射，即将网页中的全部页面元素均做色彩变化量相同的色彩映射，由于整个页面的色彩变化量相同，因此，页面的色彩变化比较平滑、柔和、协调，可以更好的保护眼睛。

为了便于理解，结合图2(a)～图2(c)进行举例说明，图2(a)～图2(c)的网页内容相同，区别仅在于页面颜色，其中，图2(a)为正常浏览模式下的网页，图2(b)为相关技术中“护眼模式”下的网页，图2(c)为本实施例技术方案中“护眼模式”下的网页，通过比较可以看出，相对于图2(a)而言，图2(b)仅对B区域进行了白色到浅灰色的映射，而未对A区域(黑色区域)进行色彩映射，这就使得图2(b)中的A区域显得很刺眼，和整体的浅灰色不协调。相对于图2(a)而言，图2(c)除对B区域进行了白色到浅灰色的映射之外，还对A区域(黑色区域)进行了黑色到浅灰色的映射，这就使得图2(c)中的A区域与B区域的颜色比较协调，页面整体呈现浅灰色，比较和谐。

在步骤103中，在移动终端的屏幕上输出色彩映射后的目标页面。

当通过步骤102确定了“护眼模式”下整个网页的颜色之后，移动终端可以通过GPU绘制上述颜色的网页，并将绘制完成的网页展示在屏幕上。

由上述实施例可见，该实施例在护眼模式下展示页面时，可以对该页面整体进行色彩映射，之后将色彩映射后的页面在屏幕上输出显示。与相关技术相比，由于本实施例是对页面进行了全局的色彩映射(即整个页面各部位的色彩变化量是相同的)，因此整个页面的色彩比较柔和、不突兀，可以更好的保护视力。

如图3所示，图3是本公开根据一示例性实施例示出的另一种页面显示方法的流程图，该方法可以包括以下步骤：

在步骤301中，获取目标页面的源文件。

由于本实施例的步骤301与图1所示实施例的步骤101的内容类似，因此本实施例对此不再赘述，详情请见图1所示实施例的步骤101。

在步骤302中，基于上述源文件，获取上述目标网页中需要渲染的各元素的背景颜色值。

在一种可能的实施方式中，上述步骤302可以包括：

解析上述源文件中的html源码，生成渲染树；

根据上述源文件中的CSS样式表，对上述渲染树上的各渲染节点进行着色模式计算，得到各渲染节点的背景颜色值，其中，上述源文件中包括上述目标页面的html源码、CSS样式表。

需要说明的是，本实施例中的背景颜色值指的是RGBA值，即在Red、Green、Blue、Alpha四个色彩通道的色值。

在步骤303中，对上述各元素的背景颜色值均进行下述调整：降低背景颜色值中第一色彩通道内色彩的权重、增加第二色彩通道内色彩的权重；其中，本实施例中的第一、二色彩通道均包括RGBA色彩模式规定的色彩通道的至少一种，且第一色彩通道与第二色彩通道不相同。

比如降低Red、Blue通道的色彩权重，而增加Green通道的色彩权重，这样就可以使得页面元素向绿色偏移。

在本实施例中，可以通过改变各色彩通道内色彩的颜色值，来调整各色彩通道内色彩的权重，相应的，在一种可能的实施方式中，上述步骤303可以包括：

根据预设色彩调整规则，对上述各元素的背景颜色值均进行下述调整：将背景颜色值中第一色彩通道内色彩的颜色值降低至预设第一色值、将第二色彩通道内色彩的颜色值提高至预设第二色值。

由上述实施方式可见，该实施方式可以通过在移动终端本地预先存储色彩调整规则的方式，来达到自适应调整各色彩通道内色彩的权重的目的，而无需用户人为干预，智能化程度较高。

此外，在另一种可能的实施方式中，上述步骤303可以包括：

根据用户输入的色彩调整规则，对上述各元素的背景颜色值均进行下述调整：将背景颜色值中第一色彩通道内色彩的颜色值降低至预设第三色值、将第二色彩通道内色彩的颜色值提高至预设第四色值。

由上述实施方式可见，该实施方式可以支持用户自定义色彩调整规则，根据用户定义的色彩调整规则来调整各色彩通道内色彩的权重，满足用户的个性化需求。

在步骤304中，在移动终端的屏幕上输出色彩映射后的目标页面。

由于本实施例的步骤304与图1所示实施例的步骤103的内容类似，因此本实施例对此不再赘述，详情请见图1所示实施例的步骤103。

由上述实施例可见，该实施例可以通过目标页面的html源码及CSS样式表，精确地确定出该目标页面中需要渲染的各元素的背景颜色值，之后针对上述各元素的背景颜色值均进行相同的色彩权重调整，不会造成页面元素的遗漏，因此可以保证调整结果的精确性、全面性。

应当注意，尽管在附图中以特定顺序描述了本发明方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。相反，流程图中描绘的步骤可以改变执行顺序。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。

与前述页面显示方法的实施例对应，本公开还提供了页面显示装置的实施例。

如图4所示，图4是本公开根据一示例性实施例示出的一种页面显示装置的框图，上述装置可以包括：

获取模块410，被配置为获取目标页面的源文件；

本实施中的目标页面可以为用户当前浏览的网页，也可以为用户即将浏览的网页。

在一种应用场景中，当用户在智能手机上浏览网页时，如果将当前的网页浏览模式设置为“护眼模式”，则该用户当前浏览的网页为目标页面。

在另一种应用场景中，在浏览网页之前，如果预先将网页的浏览模式设置为“护眼模式”，则用户打开智能手机的浏览器即将浏览的网页为目标网页。

在本实施例中，可以在移动终端的系统UI(User Interface，用户界面)界面或者移动终端中浏览器的设置界面中为用户提供设置网页浏览模式的接口，以便用户可以通过该接口来根据需求实时或者预先设置网页浏览模式，如设置为“护眼模式”，在实际应用中，上述接口的形式可以为图标、按钮、或者文本框，本实施例对此不做限定。

此外，移动终端的系统或者移动终端中安装的浏览器，也可以通过移动终端的光感应器件获得当前所处环境的光线情况，之后，根据光线情况自动调节网页的浏览模式。

可以理解的是，对于一个网页，服务器存储的是该网页的源文件，如果用户想浏览该网页，则该用户使用的移动终端会向服务器请求该网页的源文件，在请求到该网页的源文件之后，会依据该源文件进行网页的排版及绘制，并最终展示在移动终端的屏幕上。网页的源文件中可以包括：该网页的html源码、图片、CSS样式表及脚本文件等。

由上述情况可知，当目标页面为用户当前浏览的网页时，移动终端已经将该网页的源文件下载到了本地。当目标页面为用户即将浏览的网页时，移动终端有可能之前未将该网页的源文件下载到本地。

映射模块420，被配置为基于上述获取模块410获取到的源文件，对上述目标页面整体进行色彩映射；

需要说明的是，相关技术中，在“护眼模式下”展示网页时，只是将网页中的一部分页面元素做了色彩映射，而另一部分页面元素的色彩仍然保持不变，即只进行局部的色彩转换，生硬的转换了某些部分区域的颜色，这就导致页面配色不协调，比较突兀，缺乏美感，也使得色彩不变的那部分比较刺眼。

基于上述情况，本实施例可以考虑将整个页面进行全局的色彩映射，即将网页中的全部页面元素均做色彩变化量相同的色彩映射，由于整个页面的色彩变化量相同，因此，页面的色彩变化比较平滑、柔和、协调，可以更好的保护眼睛。

为了便于理解，结合图2(a)～图2(c)进行举例说明，图2(a)～图2(c)的网页内容相同，区别仅在于页面颜色，其中，图2(a)为正常浏览模式下的网页，图2(b)为相关技术中“护眼模式”下的网页，图2(c)为本实施例技术方案中“护眼模式”下的网页，通过比较可以看出，相对于图2(a)而言，图2(b)仅对B区域进行了白色到浅灰色的映射，而未对A区域(黑色区域)进行色彩映射，这就使得图2(b)中的A区域显得很刺眼，和整体的浅灰色不协调。相对于图2(a)而言，图2(c)除对B区域进行了白色到浅灰色的映射之外，还对A区域(黑色区域)进行了黑色到浅灰色的映射，这就使得图2(c)中的A区域与B区域的颜色比较协调，页面整体呈现浅灰色，比较和谐。

输出模块430，被配置为在移动终端的屏幕上输出上述映射模块420色彩映射后的目标页面。

当通过映射模块420确定了“护眼模式”下整个网页的颜色之后，移动终端可以通过GPU绘制上述颜色的网页，并将绘制完成的网页展示在屏幕上。

由上述实施例可见，该实施例在护眼模式下展示页面时，可以对该页面整体进行色彩映射，之后将色彩映射后的页面在屏幕上输出显示。与相关技术相比，由于本实施例是对页面进行了全局的色彩映射(即整个页面各部位的色彩变化量是相同的)，因此整个页面的色彩比较柔和、不突兀，可以更好的保护视力。

如图5所示，图5是本公开根据一示例性实施例示出的另一种页面显示装置的框图，该实施例可以在图4所示实施例的基础上，上述映射模块420，可以包括：

颜色值获取子模块421，被配置为基于上述获取模块410获取到的源文件，获取上述目标网页中需要渲染的各元素的背景颜色值；

需要说明的是，本实施例中的背景颜色值指的是RGBA值，即在Red、Green、Blue、Alpha四个色彩通道的色值。

色彩调整子模块422，被配置为对上述颜色值获取子模块421获取到的各元素的背景颜色值均进行下述调整：降低背景颜色值中第一色彩通道内色彩的权重、增加第二色彩通道内色彩的权重，其中，上述第一、二色彩通道均包括RGBA色彩模式规定的色彩通道的至少一种，上述第一色彩通道与上述第二色彩通道不相同。

比如降低Red、Blue通道的色彩权重，而增加Green通道的色彩权重，这样就可以使得页面元素向绿色偏移。

由上述实施例可见，该实施例可以通过目标页面的html源码及CSS样式表，精确地确定出该目标页面中需要渲染的各元素的背景颜色值，之后针对上述各元素的背景颜色值均进行相同的色彩权重调整，不会造成页面元素的遗漏，因此可以保证调整结果的精确性、全面性。

如图6所示，图6是本公开根据一示例性实施例示出的另一种页面显示装置的框图，该实施例可以在图5所示实施例的基础上，上述色彩调整子模块422，可以包括：

第一色彩权重调整子模块4221，被配置为根据预设色彩调整规则，对上述各元素的背景颜色值均进行下述调整：将背景颜色值中第一色彩通道内色彩的颜色值降低至预设第一色值、将第二色彩通道内色彩的颜色值提高至预设第二色值。

由上述实施例可见，该实施例可以通过在移动终端本地预先存储色彩调整规则的方式，来达到自适应调整各色彩通道内色彩的权重的目的，而无需用户人为干预，智能化程度较高。

如图7所示，图7是本公开根据一示例性实施例示出的另一种页面显示装置的框图，该实施例可以在图5所示实施例的基础上，上述色彩调整子模块422，可以包括：

第二色彩权重调整子模块4222，被配置为根据用户输入的色彩调整规则，对上述各元素的背景颜色值均进行下述调整：将背景颜色值中第一色彩通道内色彩的颜色值降低至预设第三色值、将第二色彩通道内色彩的颜色值提高至预设第四色值。

由上述实施例可见，该实施例可以支持用户自定义色彩调整规则，根据用户定义的色彩调整规则来调整各色彩通道内色彩的权重，满足用户的个性化需求。

如图8所示，图8是本公开根据一示例性实施例示出的另一种页面显示装置的框图，该实施例可以在图5～图7所示任一实施例的基础上，上述颜色值获取子模块421，可以包括：

解析子模块4211，被配置为解析上述源文件中的html源码，生成渲染树；

计算子模块4212，被配置为根据上述源文件中的CSS样式表，对上述渲染树上的各渲染节点进行着色模式计算，得到各渲染节点的背景颜色值，其中，所述源文件中包括所述目标页面的html源码、CSS样式表。

需要说明的是，本实施例中的背景颜色值指的是RGBA值，即在Red、Green、Blue、Alpha四个色彩通道的色值。

如图9所示，图9是本公开根据一示例性实施例示出的另一种页面显示装置的框图，该实施例可以在图4～图8所示任一实施例的基础上，上述获取模块410，可以包括：

判断子模块411，被配置为判断移动终端中是否存储有目标页面的源文件；

第一获取子模块412，被配置为在上述判断子模块411的判断结果为是的情况下，从上述移动终端中获取上述源文件；

第二获取子模块413，被配置为在上述判断子模块411的判断结果为否的情况下，从服务器获取上述源文件。

由上述实施例可见，该实施例可以在移动终端中存储有目标页面的源文件时，直接从移动终端本地获取目标页面的源文件，而不必去服务器获取，速度比较快、效率比较高。

上述装置中各个模块的功能和作用的实现过程具体详见上述方法中对应步骤的实现过程，在此不再赘述。

对于装置实施例而言，由于其基本对应于方法实施例，所以相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本公开方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

相应的，本公开还提供了一种页面显示装置，包括：处理器；用于存储处理器可执行指令的存储器；其中，所述处理器被配置为：获取目标页面的源文件；基于所述源文件，对所述目标页面整体进行色彩映射；在移动终端的屏幕上输出色彩映射后的目标页面。

如图10所示，图10是本公开根据一示例性实施例示出的一种用于页面显示装置1000的一结构示意图。例如，装置1000可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理，飞行器等。

参照图10，装置1000可以包括以下一个或多个组件：处理组件1002，存储器1004，电源组件1006，多媒体组件1008，音频组件1010，输入/输出(I/O)的接口1012，传感器组件1014，以及通信组件1016。

处理组件1002通常控制装置1000的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理元件1002可以包括一个或多个处理器1020来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件1002可以包括一个或多个模块，便于处理组件1002和其他组件之间的交互。例如，处理部件1002可以包括多媒体模块，以方便多媒体组件1008和处理组件1002之间的交互。

存储器1004被配置为存储各种类型的数据以支持在设备1000的操作。这些数据的示例包括用于在装置1000上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器1004可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电力组件1006为装置1000的各种组件提供电力。电力组件1006可以包括电源管理系统，一个或多个电源，及其他与为装置1000生成、管理和分配电力相关联的组件。

多媒体组件1008包括在装置1000和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件1008包括一个前置摄像头和/或后置摄像头。当设备1000处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件1010被配置为输出和/或输入音频信号。例如，音频组件1010包括一个麦克风(MIC)，当装置1000处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器1004或经由通信组件1016发送。在一些实施例中，音频组件1010还包括一个扬声器，用于输出音频信号。

I/O接口1012为处理组件1002和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件1014包括一个或多个传感器，用于为装置1000提供各个方面的状态评估。例如，传感器组件1014可以检测到设备1000的打开/关闭状态，组件的相对定位，例如所述组件为装置1000的显示器和小键盘，传感器组件1014还可以检测装置1000或装置1000一个组件的位置改变，用户与装置600接触的存在或不存在，装置1000方位或加速/减速和装置1000的温度变化。传感器组件1014可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件1014还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件1014还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件1016被配置为便于装置1000和其他设备之间有线或无线方式的通信。装置1000可以接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合。在一个示例性实施例中，通信部件1016经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信部件1016还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，装置1000可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。

在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器1004，上述指令可由装置1000的处理器1020执行以完成上述方法。例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

本领域技术人员在考虑说明书及实践这里公开的公开后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

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

Claims (12)

1.一种页面显示方法，其特征在于，所述方法包括：

获取目标页面的源文件；

基于所述源文件，对所述目标页面整体进行色彩映射；所述目标页面整体指示所述目标页面中的全部页面元素；进行色彩映射时，对所述目标页面中的全部页面元素均做色彩变化量相同的色彩映射；

在移动终端的屏幕上输出色彩映射后的目标页面；

其中，所述基于所述源文件，对所述目标页面整体进行色彩映射，还包括：

基于所述源文件，获取所述目标页面中需要渲染的各元素的背景颜色值；

对所述各元素的背景颜色值均进行下述调整：降低背景颜色值中第一色彩通道内色彩的权重、增加第二色彩通道内色彩的权重，其中，所述第一、二色彩通道均包括RGBA色彩模式规定的色彩通道的至少一种，所述第一色彩通道与所述第二色彩通道不相同。

2.根据权利要求1所述的方法，其特征在于，所述对所述各元素的背景颜色值均进行下述调整：降低第一色彩通道的色彩权重、增加第二色彩通道的色彩权重，包括：

根据预设色彩调整规则，对所述各元素的背景颜色值均进行下述调整：将背景颜色值中第一色彩通道内色彩的颜色值降低至预设第一色值、将第二色彩通道内色彩的颜色值提高至预设第二色值。

3.根据权利要求1所述的方法，其特征在于，所述对所述各元素的背景颜色值均进行下述调整：降低第一色彩通道的色彩权重、增加第二色彩通道的色彩权重，包括：

根据用户输入的色彩调整规则，对所述各元素的背景颜色值均进行下述调整：将背景颜色值中第一色彩通道内色彩的颜色值降低至预设第三色值、将第二色彩通道内色彩的颜色值提高至预设第四色值。

4.根据权利要求1至3任一项所述的方法，其特征在于，所述基于所述源文件，获取所述目标页面中需要渲染的各元素的背景颜色值，包括：

解析所述源文件中的html源码，生成渲染树；

根据所述源文件中的CSS样式表，对所述渲染树上的各渲染节点进行着色模式计算，得到各渲染节点的背景颜色值，其中，所述源文件中包括所述目标页面的html源码、CSS样式表。

5.根据权利要求1所述的方法，其特征在于，所述获取目标页面的源文件，包括：

判断移动终端中是否存储有目标页面的源文件；

若存储有所述源文件，则从所述移动终端中获取所述源文件；

若未存储有所述源文件，则从服务器获取所述源文件。

6.一种页面显示装置，其特征在于，所述装置包括：

获取模块，被配置为获取目标页面的源文件；

映射模块，被配置为基于所述获取模块获取到的源文件，对所述目标页面整体进行色彩映射；所述目标页面整体指示所述目标页面中的全部页面元素；进行色彩映射时，对所述目标页面中的全部页面元素均做色彩变化量相同的色彩映射；

输出模块，被配置为在移动终端的屏幕上输出所述映射模块色彩映射后的目标页面；

其中，所述映射模块，还包括：

颜色值获取子模块，被配置为基于所述获取模块获取到的源文件，获取所述目标页面中需要渲染的各元素的背景颜色值；

色彩调整子模块，被配置为对所述颜色值获取子模块获取到的各元素的背景颜色值均进行下述调整：降低背景颜色值中第一色彩通道内色彩的权重、增加第二色彩通道内色彩的权重，其中，所述第一、二色彩通道均包括RGBA色彩模式规定的色彩通道的至少一种，所述第一色彩通道与所述第二色彩通道不相同。

7.根据权利要求6所述的装置，其特征在于，所述色彩调整子模块，包括：

第一色彩权重调整子模块，被配置为根据预设色彩调整规则，对所述各元素的背景颜色值均进行下述调整：将背景颜色值中第一色彩通道内色彩的颜色值降低至预设第一色值、将第二色彩通道内色彩的颜色值提高至预设第二色值。

8.根据权利要求6所述的装置，其特征在于，所述色彩调整子模块，包括：

第二色彩权重调整子模块，被配置为根据用户输入的色彩调整规则，对所述各元素的背景颜色值均进行下述调整：将背景颜色值中第一色彩通道内色彩的颜色值降低至预设第三色值、将第二色彩通道内色彩的颜色值提高至预设第四色值。

9.根据权利要求6至8任一项所述的装置，其特征在于，所述颜色值获取子模块，包括：

解析子模块，被配置为解析所述源文件中的html源码，生成渲染树；

计算子模块，被配置为根据所述源文件中的CSS样式表，对所述渲染树上的各渲染节点进行着色模式计算，得到各渲染节点的背景颜色值，其中，所述源文件中包括所述目标页面的html源码、CSS样式表。

10.根据权利要求6所述的装置，其特征在于，所述获取模块，包括：

判断子模块，被配置为判断移动终端中是否存储有目标页面的源文件；

第一获取子模块，被配置为在所述判断子模块的判断结果为是的情况下，从所述移动终端中获取所述源文件；

第二获取子模块，被配置为在所述判断子模块的判断结果为否的情况下，从服务器获取所述源文件。

11.一种网页显示装置，其特征在于，包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为：

获取目标页面的源文件；

基于所述源文件，对所述目标页面整体进行色彩映射；所述目标页面整体指示所述目标页面中的全部页面元素；进行色彩映射时，对所述目标页面中的全部页面元素均做色彩变化量相同的色彩映射；

在移动终端的屏幕上输出色彩映射后的目标页面；

其中，所述基于所述源文件，对所述目标页面整体进行色彩映射，还包括：

基于所述源文件，获取所述目标页面中需要渲染的各元素的背景颜色值；

对所述各元素的背景颜色值均进行下述调整：降低背景颜色值中第一色彩通道内色彩的权重、增加第二色彩通道内色彩的权重，其中，所述第一、二色彩通道均包括RGBA色彩模式规定的色彩通道的至少一种，所述第一色彩通道与所述第二色彩通道不相同。

12.一种计算机可读存储介质，其上存储有计算机指令，其特征在于，该指令被处理器执行时实现权利要求1～5任一项所述方法的步骤。

Images