页面显示方法及装置制造方法及图纸

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

【技术实现步骤摘要】

本公开涉及移动终端
，特别涉及一种页面显示方法及装置。
技术介绍
目前，主流的浏览器均支持在护眼模式下展示页面，相较于白色的页面，护眼模式下的页面不但有助于保护眼睛、缓解眼疲劳，而且还可以满足用户的个性化的需要，比如有的用户喜欢把底色设置成淡绿色。相关技术中，在护眼模式下展示页面时，页面配色不协调，比较突兀，缺乏美感。
技术实现思路
为了解决上述问题，本公开提供一种页面显示方法及装置。具体地，本公开是通过如下技术方案实现的：根据本公开实施例的第一方面，提供一种页面显示方法，所述方法包括：获取目标页面的源文件；基于所述源文件，对所述目标页面整体进行色彩映射；在移动终端的屏幕上输出色彩映射后的目标页面。在一实施例中，所述基于所述源文件，对所述目标网页整体进行色彩映射，包括：基于所述源文件，获取所述目标网页中需要渲染的各元素的背景颜色值；对所述各元素的背景颜色值均进行下述调整：降低背景颜色值中第一色彩通道内色彩的权重、增加第二色彩通道内色彩的权重，其中，所述第一、二色彩通道均包括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.一种页面显示方法，其特征在于，所述方法包括：获取目标页面的源文件；基于所述源文件，对所述目标页面整体进行色彩映射；在移动终端的屏幕上输出色彩映射后的目标页面。2.根据权利要求1所述的方法，其特征在于，所述基于所述源文件，对所述目标网页整体进行色彩映射，包括：基于所述源文件，获取所述目标网页中需要渲染的各元素的背景颜色值；对所述各元素的背景颜色值均进行下述调整：降低背景颜色值中第一色彩通道内色彩的权重、增加第二色彩通道内色彩的权重，其中，所述第一、二色彩通道均包括RGBA色彩模式规定的色彩通道的至少一种，所述第一色彩通道与所述第二色彩通道不相同。3.根据权利要求2所述的方法，其特征在于，所述对所述各元素的背景颜色值均进行下述调整：降低第一色彩通道的色彩权重、增加第二色彩通道的色彩权重，包括：根据预设色彩调整规则，对所述各元素的背景颜色值均进行下述调整：将背景颜色值中第一色彩通道内色彩的颜色值降低至预设第一色值、将第二色彩通道内色彩的颜色值提高至预设第二色值。4.根据权利要求2所述的方法，其特征在于，所述对所述各元素的背景颜色值均进行下述调整：降低第一色彩通道的色彩权重、增加第二色彩通道的色彩权重，包括：根据用户输入的色彩调整规则，对所述各元素的背景颜色值均进行下述调整：将背景颜色值中第一色彩通道内色彩的颜色值降低至预设第三色值、将第二色彩通道内色彩的颜色值提高至预设第四色值。5.根据权利要求2至4任一项所述的方法，其特征在于，所述基于所述源文件，获取所述目标网页中需要渲染的各元素的背景颜色值，包括：解析所述源文件中的html源码，生成渲染树；根据所述源文件中的CSS样式表，对所述渲染树上的各渲染节点进行着色模式计算，得到各渲染节点的背景颜色值，其中，所述源文件中包括所述目标页面的html源码、CSS样式表。6.根据权利要求1所述的方法，其特征在于，所述获取目标页面的源文件，包括：判断移动终端中是否存储有目标页面的源文件；若存储有所述源文件，则从所述移动终端中获取所述源文件；若未存储有所述源文件，则从服务器获取所述源文件。7.一种页面显示装置，其特征在于，所述装置包括：获取模块，被配置为获取目标页面的源文件；映射模块，被配置为基于所述获取模块获取到的源文件，对所述目标页面整体进行色彩映射；输出模...

【专利技术属性】
技术研发人员：张少伟，於一飞，王石成，
申请(专利权)人：北京小米移动软件有限公司，
类型：发明
国别省市：北京;11