前端网页主题颜色调节方法及装置制造方法及图纸

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

Method and device for adjusting theme color of front page

【技术实现步骤摘要】
前端网页主题颜色调节方法及装置
本专利技术涉及互联网
，尤其涉及一种前端网页主题颜色调节方法及装置。
技术介绍
随着网速的不断提升以及前端技术的快速发展，网页中的元素被设计的越来越丰富，图片作为网页的一个重要元素，目前很多网页的图片是根据网页内容动态获取的，也就是说一个网页要展示的图片并不固定，而网页主题配色常用的有两种方案，第一种为预配色方案，第二种为自定义配色方案。对于预配色方案，是指在浏览器中预先缓存多组配色方案，当动态获取到图片时根据图片的色调选择其中一组配色方案对网页页面进行调色，以使网页页面的颜色与图片的色调相匹配；对于自定义配色方案，对用户来说操作稍显繁琐，如果每次网页返回的图片不一样，用户每次都需要手动设置网页的调色参数。可见，第一种预配色方案的功能单一，对于网页元素多变的网页界面(如，网页中存在多张不同色调的图片)来说，不能够提升网页页面的整体视觉效果。第二种自定义配色方案的操作复杂，只有对颜色调节有一定知识基础的用户才能完成。
技术实现思路
本专利技术的目的在于提供一种前端网页主题颜色调节方法及装置，能够灵活的对网页的主体颜色自适应调节，提升网页的视觉效果。为了实现上述目的，本专利技术的一方面提供一种前端网页主题颜色调节方法，包括：待网页加载完毕，截取网页图像以获取网页图像中的全部像素点数据；根据每个像素点对应的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.一种前端网页主题颜色调节方法，其特征在于，包括：/n待网页加载完毕，截取网页图像以获取网页图像中的全部像素点数据；/n根据每个像素点对应的RGB像素值以及网页图像的尺寸值，计算网页图像的RGB像素均值；/n采用RGB像素均值对应的颜色对网页主题配色。/n

【技术特征摘要】
1.一种前端网页主题颜色调节方法，其特征在于，包括：
待网页加载完毕，截取网页图像以获取网页图像中的全部像素点数据；
根据每个像素点对应的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像素值与阿尔法值的...

【专利技术属性】
技术研发人员：李政，王功贺，
申请(专利权)人：苏宁云计算有限公司，
类型：发明
国别省市：江苏;32