CN111338627B - 前端网页主题颜色调节方法及装置 - Google Patents

Abstract

本发明公开一种前端网页主题颜色调节方法及装置，涉及互联网技术领域，能够灵活的对网页的主体颜色自适应调节，提升网页的视觉效果。该方法包括：待网页加载完毕，截取网页图像以获取网页图像中的全部像素点数据；根据每个像素点对应的RGB像素值以及网页图像的尺寸值，计算网页图像的RGB像素均值；采用RGB像素均值对应的颜色对网页主题配色。该装置应用有上述方案所提的方法。

Description

前端网页主题颜色调节方法及装置

技术领域

本发明涉及互联网技术领域，尤其涉及一种前端网页主题颜色调节方法及装置。

背景技术

随着网速的不断提升以及前端技术的快速发展，网页中的元素被设计的越来越丰富，图片作为网页的一个重要元素，目前很多网页的图片是根据网页内容动态获取的，也就是说一个网页要展示的图片并不固定，而网页主题配色常用的有两种方案，第一种为预配色方案，第二种为自定义配色方案。

对于预配色方案，是指在浏览器中预先缓存多组配色方案，当动态获取到图片时根据图片的色调选择其中一组配色方案对网页页面进行调色，以使网页页面的颜色与图片的色调相匹配；对于自定义配色方案，对用户来说操作稍显繁琐，如果每次网页返回的图片不一样，用户每次都需要手动设置网页的调色参数。

可见，第一种预配色方案的功能单一，对于网页元素多变的网页界面(如，网页中存在多张不同色调的图片)来说，不能够提升网页页面的整体视觉效果。第二种自定义配色方案的操作复杂，只有对颜色调节有一定知识基础的用户才能完成。

发明内容

本发明的目的在于提供一种前端网页主题颜色调节方法及装置，能够灵活的对网页的主体颜色自适应调节，提升网页的视觉效果。

为了实现上述目的，本发明的一方面提供一种前端网页主题颜色调节方法，包括：

待网页加载完毕，截取网页图像以获取网页图像中的全部像素点数据；

根据每个像素点对应的RGB像素值和网页图像的尺寸值，计算网页图像的RGB像素均值；

采用RGB像素均值对应的颜色对网页主题配色。

优选地，在步骤采用RGB像素均值对应的颜色对网页主题配色之后还包括：

将RGB像素均值转换为HSL参数，并判断HSL参数是否属于预设的HSL阈值区间范围；

当判断结果为否时，调节HSL参数至HSL阈值区间范围内后配置于网页主题上显示；

当判断结果为是时，将当前HSL参数配置于网页主题上显示。

较佳地，截取网页图像以获取网页图像中的全部像素点数据的方法包括：

采集网页中的全部文档元素，并基于文档元素所处网页的位置坐标顺序将文档元素存入对象文件中；

依次调取对象文件中的文档元素，将文档元素结合CSS元素属性保存到canvas画布上，完成对网页图像的截取；

调用canvas画布的getImageData功能，获取网页图像的全部像素点数据，所述像素点数据包括像素点所处网页图像的位置坐标和网页图像的尺寸值。

进一步地，根据每个像素点对应的RGB像素值和网页图像的尺寸值，计算网页图像的RGB像素均值的方法包括：

根据网页图像的尺寸值计算像素点的总数量；

汇总网页图像中全部像素点的R像素值之和、G像素值之和、B像素值之和，分别将R像素值之和、G像素值之和、B像素值之和除以像素点的总数量得到网页图像的RGB像素均值。

优选地，除计算每个像素点对应的RGB像素值之外还包括：

计算每个像素点对应的阿尔法值，所述阿尔法值用于表示像素点的显示透明度；

每个像素点的RGB像素值与阿尔法值的存储顺序依次为R像素值、G像素值、B像素值和阿尔法值。

与现有技术相比，本发明提供的前端网页主题颜色调节方法具有以下有益效果：

本发明提供的前端网页主题颜色调节方法，在网页中的全部元素加载完毕后，截取网页图像获取其中的全部像素点数据，遍历每个像素点的RGB像素值，通过汇总网页图像中全部像素点的R像素值之和、G像素值之和、B像素值之和，然后基于网页图像的尺寸值计算网页图像中像素点的总数，将R像素值之和除以像素点总数能够得到网页图像中的R像素均值，将G像素值之和除以像素点总数能够得到网页图像中的G像素均值，将B像素值之和除以像素点总数能够得到网页图像中的B像素均值，至此可得到当前网页图像的RGB像素均值，一般来讲，RGB像素的均值能够代表当前网页图像的主色调，故本发明采用RGB像素均值对应的颜色对当前网页主题进行配色，能够在网页主题中起到良好的视觉效果。

可见，本发明可以根据当前网页图像的主体颜色实现自适应配色调节，在提高网页配色灵活性的同时，使得配色主色调能够与当前网页图像的主体颜色精准搭配。

本发明的另一方面提供一种前端网页主题颜色调节装置，应用有上述技术方案提到的前端网页主题颜色调节方法，该装置包括:

像素获取单元，用于待网页加载完毕，截取网页图像以获取网页图像中的全部像素点数据；

像素计算单元，用于根据每个像素点对应的RGB像素值和网页图像的尺寸值，计算网页图像的RGB像素均值；

网页配色单元，用于采用RGB像素均值对应的颜色对网页主题配色。

优选地，还包括：

判断单元，用于将RGB像素均值转换为HSL参数，并判断HSL参数是否属于预设的HSL阈值区间范围，当判断结果为否时，调节HSL参数至HSL阈值区间范围内后配置于网页主题上显示，当判断结果为是时，将当前HSL参数配置于网页主题上显示。

优选地，所述像素获取单元包括：

像素采集模块，用于采集网页中的全部文档元素，并基于文档元素所处网页的位置坐标顺序将文档元素存入对象文件中；

网页截取模块，用于依次调取对象文件中的文档元素，将文档元素结合CSS元素属性保存到canvas画布上，完成对网页图像的截取；

数据输出模块，用于调用canvas画布的getImageData功能，获取网页图像的全部像素点数据，所述像素点数据包括像素点所处网页图像的位置坐标和网页图像的尺寸值。

优选地，所述像素计算单元包括：

第一计算模块，用于根据网页图像的尺寸值计算像素点的总数量；

第二计算模块，用于汇总网页图像中全部像素点的R像素值之和、G像素值之和、B像素值之和，分别将R像素值之和、G像素值之和、B像素值之和除以像素点的总数量得到网页图像的RGB像素均值。

与现有技术相比，本发明提供的前端网页主题颜色调节装置的有益效果与上述技术方案提供的前端网页主题颜色调节方法的有益效果相同，在此不做赘述。

本发明的第三方面提供一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，计算机程序被处理器运行时执行上述前端网页主题颜色调节方法的步骤。

与现有技术相比，本发明提供的计算机可读存储介质的有益效果与上述技术方案提供的前端网页主题颜色调节方法的有益效果相同，在此不做赘述。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本发明的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1为实施例一中前端网页主题颜色调节方法的一种流程示意图；

图2为实施例一中前端网页主题颜色调节方法的另一种流程示意图。

具体实施方式

为使本发明的上述目的、特征和优点能够更加明显易懂，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其它实施例，均属于本发明保护的范围。

实施例一

请参阅图1和图2，本实施例提供一种前端网页主题颜色调节方法，包括：

待网页加载完毕，截取网页图像以获取网页图像中的全部像素点数据；根据每个像素点对应的RGB像素值和网页图像的尺寸值，计算网页图像的RGB像素均值；采用RGB像素均值对应的颜色对网页主题配色。

本实施例提供的前端网页主题颜色调节方法，在网页中的全部元素加载完毕后，截取网页图像获取其中的全部像素点数据，遍历每个像素点的RGB像素值，通过汇总网页图像中全部像素点的R像素值之和、G像素值之和、B像素值之和，然后基于网页图像的尺寸值计算网页图像中像素点的总数，将R像素值之和除以像素点总数能够得到网页图像中的R像素均值，将G像素值之和除以像素点总数能够得到网页图像中的G像素均值，将B像素值之和除以像素点总数能够得到网页图像中的B像素均值，至此可得到当前网页图像的RGB像素均值，一般来讲，RGB像素的均值能够代表当前网页图像的主色调，故本实施例采用RGB像素均值对应的颜色对当前网页主题进行配色，能够在网页主题中起到良好的视觉效果。

可见，本实施例可以根据当前网页图像的主体颜色实现自适应配色调节，在提高网页配色灵活性的同时，使得配色主色调能够与当前网页图像的主体颜色精准搭配。

为进一步地提升网页主题的视觉效果，请参阅图2，在步骤采用RGB像素均值对应的颜色对网页主题配色之后还包括：

预设与网页主题配色适配的HSL阈值区间；将RGB像素均值转换为HSL参数，并判断HSL参数是否属于HSL阈值区间范围；当判断结果为否时，调节HSL参数至HSL阈值区间范围内后配置于网页主题上显示；当判断结果为是时，将当前HSL参数配置于网页主题上显示。

具体实施时，H属性用于表示色相、S属性用于表示饱和度、L属性用于表示亮度，每个属性通过数值量化表示，实现过程为：首先根据EasyRGB.com上转换的通用代码编写js版本，通过js版本将RGB像素转换得到$h、$s和$l，也即16进制的颜色值，然后将$h、$s、$l分别与预设的HSL阈值区间比对，若$h不在H阈值区间范围内，自动将$h调节至H阈值区间范围内，同理，若$s不在S阈值区间范围内，自动将$s调节至S阈值区间范围内，若$l不在L阈值区间范围内，自动将$s调节至L阈值区间范围内。示例性地，如果$h不在H阈值区间范围内，也即需要调整互补色，此时可通过可以将$h偏移180°或调整0.5的值，使其处于H阈值区间范围内，达到预设的视觉效果。

可以理解的是，颜色的饱和度越低，颜色看起来越黯(灰色)，通常饱和度采用数值表示，1表示完全饱和，色彩最亮，0表示完全不饱和，色彩最黯呈灰色，减小$s数值可以增加像素显示灰度。颜色的亮度越高，颜色看起来越白，反之，颜色的亮度越低，颜色看起来越黑，故1表示亮度的颜色为白色，0表示亮度的颜色为黑色，常说的纯色为0.5的亮度。

具体地，上述实施例中截取网页图像以获取网页图像中的全部像素点数据的方法包括：

采集网页中的全部文档元素，并基于文档元素所处网页的位置坐标顺序将文档元素存入对象文件中；依次调取对象文件中的文档元素，将文档元素结合CSS元素属性保存到canvas画布上，完成对网页图像的截取；调用canvas画布的getImageData功能，获取网页图像的全部像素点数据，像素点数据包括像素点所处网页图像的位置坐标和网页图像的尺寸值。

上述过程可以理解为，待网页加载完毕后，需要将整个网页保存到canvas画布上，具体实现原理为：首先采集网页上的全部文档元素(DOM)，然后根据每个文档元素在网页所处的位置坐标顺序将DOM存入对象文件(queue)中，接着根据z-index按照顺序将DOM结合其CSS样式一起画到canvas画布上，实现对网页图像的截取。其中，CSS样式包括文档元素的尺寸、颜色、背景、边框、边距、旋转等属性。需要说明的是，DOM结合其CSS样式画到canvas画布的过程可通过使用相关的库来实现，例如，直接使用html2canvas这个库来实现canvas截图，上述过程为本领域技术人员所熟知的，本实施例对此不做赘述。

另外，通过调用canvas画布的getImageData功能，可获取到每个像素点数据(x,y,width,height)，其中，x表示像素点在网页图像的x轴坐标，y表示像素点在网页图像的y轴坐标，width表示网页图像的宽度、height表示网页图像的高度。通过getImageData功能的使用可以得到data数组，该data数组中包括全部像素点的数据(CanvasPixelArray)，也就是说该对象拷贝了画布指定矩形(网页图像)中的全部像素点数据。

具体地，上述实施例中根据每个像素点对应的RGB像素值和网页图像的尺寸值，计算网页图像的RGB像素均值的方法包括：

根据网页图像的尺寸值计算像素点的总数量；汇总网页图像中全部像素点的R像素值之和、G像素值之和、B像素值之和，分别将R像素值之和、G像素值之和、B像素值之和除以像素点的总数量得到网页图像的RGB像素均值。其中，网页图像中像素点的总数量即为width乘以height得到值。

进一步地，上述实施例中除计算每个像素点对应的RGB像素值之外还包括：

计算每个像素点对应的阿尔法值，所述阿尔法值用于表示像素点的显示透明度；每个像素点的RGB像素值与阿尔法值的存储顺序依次为R像素值、G像素值、B像素值和阿尔法值。

具体实施时，通过getImageData功能获取到的每个像素点的参数包括四方面的信息，也即RGBA值(红，绿，蓝，透明度)，本实施例暂且不用对阿尔法值(透明度)进行计算，阿尔法值仅用来占位，因为1个像素点对应有RGBA共4个参数值，也即除RGB像素值之外还包括阿尔法值，这也就意味着CanvasPixelArray里面每个像素参数占有4个位置，像素参数RGBA在CanvasPixelArray里面的占位排序依次为红(R)、绿(G)、蓝(B)和阿尔法(A)，根据这个规律，只要得到起始位R的像素值，就可以依次+1位、+2位、+3位对应得到该像素参数其后的G、B、A的值，而且由于起始位R占据着每个像素参数的开始位置，通过上述策略，可以依次遍历data数组得到网页图像中的全部像素点参数，从中提取每个像素点的RGB像素值即可计算得到每个像素点的RGB像素值。

实施例二

本实施例提供一种前端网页主题颜色调节装置，包括：

像素获取单元，用于待网页加载完毕，截取网页图像以获取网页图像中的全部像素点数据；

像素计算单元，用于根据每个像素点对应的RGB像素值以及网页图像的尺寸值，计算网页图像的RGB像素均值；

网页配色单元，用于采用RGB像素均值对应的颜色对网页主题配色。

优选地，还包括：

判断单元，用于将RGB像素均值转换为HSL参数，并判断HSL参数是否属于预设的HSL阈值区间范围，当判断结果为否时，调节HSL参数至HSL阈值区间范围内后配置于网页主题上显示，当判断结果为是时，将当前HSL参数配置于网页主题上显示。

优选地，所述像素获取单元包括：

像素采集模块，用于采集网页中的全部文档元素，并基于文档元素所处网页的位置坐标顺序将文档元素存入对象文件中；

网页截取模块，用于依次调取对象文件中的文档元素，将文档元素结合CSS元素属性保存到canvas画布上，完成对网页图像的截取；

数据输出模块，用于调用canvas画布的getImageData功能，获取网页图像的全部像素点数据，所述像素点数据包括像素点所处网页图像的位置坐标和网页图像的尺寸值。

优选地，所述像素计算单元包括：

第一计算模块，用于根据网页图像的尺寸值计算像素点的总数量；

第二计算模块，用于汇总网页图像中全部像素点的R像素值之和、G像素值之和、B像素值之和，分别将R像素值之和、G像素值之和、B像素值之和除以像素点的总数量得到网页图像的RGB像素均值。

与现有技术相比，本实施例提供的前端网页主题颜色调节装置的有益效果与上述实施例提供的前端网页主题颜色调节方法的有益效果相同，在此不做赘述。

实施例三

本实施例提供一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，计算机程序被处理器运行时执行上述前端网页主题颜色调节方法的步骤。

与现有技术相比，本实施例提供的计算机可读存储介质的有益效果与上述技术方案提供的前端网页主题颜色调节方法的有益效果相同，在此不做赘述。

本领域普通技术人员可以理解，实现上述发明方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，上述程序可以存储于计算机可读取存储介质中，该程序在执行时，包括上述实施例方法的各步骤，上述的存储介质可以是：ROM/RAM、磁碟、光盘、存储卡等。

以上，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。

Claims (10)

1.一种前端网页主题颜色调节方法，其特征在于，包括：

待网页加载完毕，截取网页图像以获取网页图像中的全部像素点数据，其中，所述全部像素点数据包括多个像素参数，所述像素参数包括R像素值、G像素值、B像素值和阿尔法值，所述获取网页图像中的全部像素点数据，包括：按照预设策略依次遍历网页图像的数据数组得到所述网页图像中的全部像素点数据；所述预设策略包括：以所述网页图像中像素点对应像素参数的R像素值为起始位，依次逐渐加一位对应得到所述像素点对应像素参数其后的G像素值、B像素值和阿尔法值；

根据每个像素点对应的RGB像素值以及网页图像的尺寸值，计算网页图像的RGB像素均值；

采用RGB像素均值对应的颜色对网页主题配色。

2.根据权利要求1所述的方法，其特征在于，在步骤采用RGB像素均值对应的颜色对网页主题配色之后还包括：

将RGB像素均值转换为HSL参数，并判断HSL参数是否属于预设的HSL阈值区间范围；

当判断结果为否时，调节HSL参数至HSL阈值区间范围内后配置于网页主题上显示；

当判断结果为是时，将当前HSL参数配置于网页主题上显示。

3.根据权利要求1或2所述的方法，其特征在于，截取网页图像以获取网页图像中的全部像素点数据的方法包括：

采集网页中的全部文档元素，并基于文档元素所处网页的位置坐标顺序将文档元素存入对象文件中；

依次调取对象文件中的文档元素，将文档元素结合CSS元素属性保存到canvas画布上，完成对网页图像的截取；

调用canvas画布的getImageData功能，获取网页图像的全部像素点数据，所述像素点数据包括像素点所处网页图像的位置坐标和网页图像的尺寸值。

4.根据权利要求3所述的方法，其特征在于，根据每个像素点对应的RGB像素值和网页图像的尺寸值，计算网页图像的RGB像素均值的方法包括：

根据网页图像的尺寸值计算像素点的总数量；

汇总网页图像中全部像素点的R像素值之和、G像素值之和、B像素值之和，分别将R像素值之和、G像素值之和、B像素值之和除以像素点的总数量得到网页图像的RGB像素均值。

5.根据权利要求4所述的方法，其特征在于，除计算每个像素点对应的RGB像素值之外还包括：

计算每个像素点对应的阿尔法值，所述阿尔法值用于表示像素点的显示透明度；

每个像素点的RGB像素值与阿尔法值的存储顺序依次为R像素值、G像素值、B像素值和阿尔法值。

6.一种前端网页主题颜色调节装置，其特征在于，包括：

像素获取单元，用于待网页加载完毕，截取网页图像以获取网页图像中的全部像素点数据，其中，所述全部像素点数据包括多个像素参数，所述像素参数包括R像素值、G像素值、B像素值和阿尔法值，所述获取网页图像中的全部像素点数据，包括：按照预设策略依次遍历网页图像的数据数组得到所述网页图像中的全部像素点数据；所述预设策略包括：以所述网页图像中像素点对应像素参数的R像素值为起始位，依次逐渐加一位对应得到所述像素点对应像素参数其后的G像素值、B像素值和阿尔法值；

像素计算单元，用于根据每个像素点对应的RGB像素值以及网页图像的尺寸值，计算网页图像的RGB像素均值；

网页配色单元，用于采用RGB像素均值对应的颜色对网页主题配色。

7.根据权利要求6所述的装置，其特征在于，还包括：

判断单元，用于将RGB像素均值转换为HSL参数，并判断HSL参数是否属于预设的HSL阈值区间范围，当判断结果为否时，调节HSL参数至HSL阈值区间范围内后配置于网页主题上显示，当判断结果为是时，将当前HSL参数配置于网页主题上显示。

8.根据权利要求6或7所述的装置，其特征在于，所述像素获取单元包括：

像素采集模块，用于采集网页中的全部文档元素，并基于文档元素所处网页的位置坐标顺序将文档元素存入对象文件中；

网页截取模块，用于依次调取对象文件中的文档元素，将文档元素结合CSS元素属性保存到canvas画布上，完成对网页图像的截取；

数据输出模块，用于调用canvas画布的getImageData功能，获取网页图像的全部像素点数据，所述像素点数据包括像素点所处网页图像的位置坐标和网页图像的尺寸值。

9.根据权利要求7所述的装置，其特征在于，所述像素计算单元包括：

第一计算模块，用于根据网页图像的尺寸值计算像素点的总数量；

第二计算模块，用于汇总网页图像中全部像素点的R像素值之和、G像素值之和、B像素值之和，分别将R像素值之和、G像素值之和、B像素值之和除以像素点的总数量得到网页图像的RGB像素均值。

10.一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，其特征在于，计算机程序被处理器运行时执行上述权利要求1至5任一项所述方法的步骤。

Images