图像处理方法、装置、计算机设备以及存储介质与流程

1.本技术涉及互联网技术领域，尤其涉及图像处理方法、装置、计算机设备以及存储介质。


背景技术：

2.随着多媒体技术和网络设备的发展，互联网上的图像数据迅速增长，用户应用图像信息的频率日益增加。
3.现有技术中，在页面运营时可以通过提取素材图片中的主颜色(即像素占比最高的色值)，并将提取到的主颜色重新应用于页面，如对页面进行背景填充等。然而，直接将提取到的主颜色应用于页面，可能造成页面中的其余元素(如页面中的控件、文字等)与主颜色的对比度太小，进而需要对页面中的其余元素进行一系列的复杂的操作，以增强页面图像中背景颜色与其余元素之间的对比度，进而导致页面图像的生成效率过低。


技术实现要素：

4.本技术实施例提供一种图像处理方法、装置、计算机设备以及存储介质，可以提高页面图像的生成效率。
5.本技术实施例一方面提供了一种图像处理方法，包括：
6.获取页面底层图像中的主颜色，根据主颜色对应的目标色值信息，确定主颜色的目标亮度值；
7.获取页面素材元素对应的素材色值信息，根据素材色值信息获取与目标亮度值相对应的目标滤镜参数；
8.根据目标滤镜参数将页面底层图像中的主颜色更新为目标颜色，将具有目标颜色的页面底层图像与页面素材元素进行合并，得到用于显示的目标页面图像。
9.其中，上述获取页面底层图像中的主颜色，包括：
10.获取页面底层图像，对页面底层图像中所包含的像素点对应的色值信息进行分类，得到至少两个色值类别；
11.对每个色值类别中所包含的色值信息分别进行累加，得到每个色值类别分别对应的色值总值；
12.分别统计每个色值类别中所包含的色值信息的数量，根据数量和色值总值，得到每个色值类别分别对应的色值平均值；
13.根据色值平均值，获取页面底层图像中的主颜色。
14.其中，上述根据主颜色对应的色值信息，确定主颜色的目标亮度值，包括：
15.获取主颜色对应的目标色值信息，获取目标色值信息对应的亮度系数；
16.将目标色值信息与亮度系数进行乘积运算，得到主颜色对应的目标亮度值。
17.其中，上述根据素材色值信息获取与目标亮度值相对应的目标滤镜参数，包括：
18.获取素材色值信息对应的亮度映射关系表；亮度映射关系表包括至少两个滤镜参
数分别对应的亮度值范围，至少两个滤镜参数包括目标滤镜参数；
19.根据目标亮度值在亮度映射关系表中所属的亮度值范围，确定主颜色对应的目标滤镜参数。
20.其中，上述获取素材色值信息对应的亮度映射关系表，包括：
21.获取色值信息集合中每个色值信息分别对应的待选亮度值；色值信息集合包括颜色空间中所包含的色值信息；
22.获取每个待选亮度值分别与素材色值信息之间的对比度，根据对比度和可视化参数，确定每个待选亮度值分别对应的滤镜参数；
23.根据每个待选亮度值分别对应的滤镜参数，生成亮度映射关系表。
24.其中，上述根据对比度和可视化参数，确定每个待选亮度值分别对应的滤镜参数，包括：
25.若对比度小于可视化参数，则将小于可视化参数的对比度确定为目标对比度，根据滤镜递增参数确定目标对比度对应的更新滤镜参数；
26.根据更新滤镜参数对目标对比度进行更新，当更新后的目标对比度大于或等于可视化参数时，将更新滤镜参数确定为目标对比度对应的待选亮度值的滤镜参数。
27.其中，上述根据每个待选亮度值分别对应的滤镜参数，生成亮度映射关系表，包括：
28.根据每个待选亮度值分别对应的滤镜参数，对每个待选亮度值进行分组，得到至少两个亮度组；每个亮度组中所包含的待选亮度值具有相同的滤镜参数；
29.根据每个亮度组中的最大待选亮度值和最小待选亮度值，确定每个亮度组分别对应的亮度值范围；
30.根据每个亮度组分别对应的滤镜参数和亮度值范围之间的映射关系，生成亮度映射关系表。
31.其中，上述根据目标滤镜参数将页面底层图像中的主颜色更新为目标颜色，将具有目标颜色的页面底层图像与页面素材元素进行合并，得到用于显示的目标页面图像，包括：
32.根据页面素材元素和具有主颜色的页面底层图像，生成未调整的页面图像，在图像预览界面的第一显示区域中显示未调整的页面图像；
33.在图像预览界面的第二显示区域中显示目标滤镜参数对应的滤镜图像；
34.根据滤镜图像，将未调整的页面图像中的主颜色更新为目标颜色，得到目标页面图像，在图像预览界面的第三显示区域中显示目标页面图像。
35.其中，图像预览界面包括滤镜参数输入框；
36.该方法还包括：
37.响应针对在滤镜参数输入框的参数调整触发操作，获取滤镜参数输入框中的滤镜调整参数，根据滤镜调整参数将第二显示区域中的滤镜图像更新显示为滤镜调整图像；
38.根据滤镜调整图像，在第三显示区域中对目标页面图像进行调整，显示调整后的目标页面图像。
39.其中，上述根据目标滤镜参数将页面底层图像中的主颜色更新为目标颜色，将具有目标颜色的页面底层图像与页面素材元素进行合并，得到用于显示的目标页面图像，包
括：
40.将目标滤镜参数与主颜色进行颜色叠加，将页面底层图像中的主颜色更新为目标颜色；
41.根据页面素材元素在多媒体页面中的显示位置信息，将页面素材元素与具有目标颜色的页面底层图像进行叠加，得到目标页面图像，在多媒体页面中显示目标页面图像。
42.其中，上述将目标滤镜参数与主颜色进行颜色叠加，将页面底层图像中的主颜色更新为目标颜色，包括：
43.获取主颜色对应的初始参数，根据目标色值信息、初始参数以及目标滤镜参数确定第一过渡参数；
44.获取目标滤镜参数对应的滤镜图像，根据滤镜图像对应的色值信息和目标滤镜参数确定第二过渡参数；
45.根据初始参数和目标滤镜参数确定第三过渡参数，确定第一过渡参数和第二过渡参数的参数总量，根据参数总量与第三过渡参数的比值确定目标颜色。
46.其中，页面素材元素包括页面控件和页面文字，目标滤镜参数包括页面控件对应的第一滤镜参数，以及页面文字对应的第二滤镜参数；
47.上述根据目标滤镜参数将页面底层图像中的主颜色更新为目标颜色，将具有目标颜色的页面底层图像与页面素材元素进行合并，得到用于显示的目标页面图像，包括：
48.根据页面控件和页面文字分别在多媒体页面中的显示位置信息，对页面底层图像进行分割，得到页面控件对应的第一底层图像和页面文字对应的第二底层图像；
49.根据第一滤镜参数，将第一底层图像中的主颜色更新为第一更新子颜色，将具有第一更新子颜色的第一底层图像与页面控件进行合并，得到第一页面子图像；
50.根据第二滤镜参数，将第二底层图像中的主颜色更新为第二更新子颜色，将具有第二更新子颜色的第二底层图像与页面文件进行合并，得到第二页面子图像；
51.将第一页面子图像与第二页面子图像进行拼接，得到目标页面图像，在多媒体页面中显示目标页面图像。
52.本技术实施例一方面提供了一种图像处理装置，包括：
53.确定模块，用于获取页面底层图像中的主颜色，根据主颜色对应的目标色值信息，确定主颜色的目标亮度值；
54.获取模块，用于获取页面素材元素对应的素材色值信息，根据素材色值信息获取与目标亮度值相对应的目标滤镜参数；
55.合并模块，用于根据目标滤镜参数将页面底层图像中的主颜色更新为目标颜色，将具有目标颜色的页面底层图像与页面素材元素进行合并，得到用于显示的目标页面图像。
56.其中，确定模块包括：
57.分类单元，用于获取页面底层图像，对页面底层图像中所包含的像素点对应的色值信息进行分类，得到至少两个色值类别；
58.累加单元，用于对每个色值类别中所包含的色值信息分别进行累加，得到每个色值类别分别对应的色值总值；
59.平均单元，用于分别统计每个色值类别中所包含的色值信息的数量，根据数量和
色值总值，得到每个色值类别分别对应的色值平均值；
60.主颜色获取单元，用于根据色值平均值，获取页面底层图像中的主颜色。
61.其中，确定模块包括：
62.系数获取单元，用于获取主颜色对应的目标色值信息，获取目标色值信息对应的亮度系数；
63.运算单元，用于将目标色值信息与亮度系数进行乘积运算，得到主颜色对应的目标亮度值。
64.其中，获取模块包括：
65.关系表获取单元，用于获取素材色值信息对应的亮度映射关系表；亮度映射关系表包括至少两个滤镜参数分别对应的亮度值范围，至少两个滤镜参数包括目标滤镜参数；
66.参数确定单元，用于根据目标亮度值在亮度映射关系表中所属的亮度值范围，确定主颜色对应的目标滤镜参数。
67.其中，关系表获取单元包括：
68.亮度值获取子单元，用于获取色值信息集合中每个色值信息分别对应的待选亮度值；色值信息集合包括颜色空间中所包含的色值信息；
69.对比度获取子单元，用于获取每个待选亮度值分别与素材色值信息之间的对比度，根据对比度和可视化参数，确定每个待选亮度值分别对应的滤镜参数；
70.关系表生成子单元，用于根据每个待选亮度值分别对应的滤镜参数，生成亮度映射关系表。
71.其中，对比度获取子单元包括：
72.对比度比较子单元，用于若对比度小于可视化参数，则将小于可视化参数的对比度确定为目标对比度，根据滤镜递增参数确定目标对比度对应的更新滤镜参数；
73.更新子单元，用于根据更新滤镜参数对目标对比度进行更新，当更新后的目标对比度大于或等于可视化参数时，将更新滤镜参数确定为目标对比度对应的待选亮度值的滤镜参数。
74.其中，关系表生成子单元包括：
75.分组子单元，用于根据每个待选亮度值分别对应的滤镜参数，对每个待选亮度值进行分组，得到至少两个亮度组；每个亮度组中所包含的待选亮度值具有相同的滤镜参数；
76.亮度值范围确定子单元，用于根据每个亮度组中的最大待选亮度值和最小待选亮度值，确定每个亮度组分别对应的亮度值范围；
77.映射关系生成子单元，用于根据每个亮度组分别对应的滤镜参数和亮度值范围之间的映射关系，生成亮度映射关系表。
78.其中，合并模块包括：
79.第一显示单元，用于根据页面素材元素和具有主颜色的页面底层图像，生成未调整的页面图像，在图像预览界面的第一显示区域中显示未调整的页面图像；
80.第二显示单元，用于在图像预览界面的第二显示区域中显示目标滤镜参数对应的滤镜图像；
81.第三显示单元，用于根据滤镜图像，将未调整的页面图像中的主颜色更新为目标颜色，得到目标页面图像，在图像预览界面的第三显示区域中显示目标页面图像。
82.其中，图像预览界面包括滤镜参数输入框；
83.该装置还包括：
84.响应模块，用于响应针对在滤镜参数输入框的参数调整触发操作，获取滤镜参数输入框中的滤镜调整参数，根据滤镜调整参数将第二显示区域中的滤镜图像更新显示为滤镜调整图像；
85.图像调整模块，用于根据滤镜调整图像，在第三显示区域中对目标页面图像进行调整，显示调整后的目标页面图像。
86.其中，合并模块包括：
87.颜色叠加单元，用于将目标滤镜参数与主颜色进行颜色叠加，将页面底层图像中的主颜色更新为目标颜色；
88.元素叠加单元，用于根据页面素材元素在多媒体页面中的显示位置信息，将页面素材元素与具有目标颜色的页面底层图像进行叠加，得到目标页面图像，在多媒体页面中显示目标页面图像。
89.其中，颜色叠加单元具体用于：
90.获取主颜色对应的初始参数，根据目标色值信息、初始参数以及目标滤镜参数确定第一过渡参数；
91.获取目标滤镜参数对应的滤镜图像，根据滤镜图像对应的色值信息和目标滤镜参数确定第二过渡参数；
92.根据初始参数和目标滤镜参数确定第三过渡参数，确定第一过渡参数和第二过渡参数的参数总量，根据参数总量与第三过渡参数的比值确定目标颜色。
93.其中，页面素材元素包括页面控件和页面文字，目标滤镜参数包括页面控件对应的第一滤镜参数，以及页面文字对应的第二滤镜参数；
94.合并模块包括：
95.图像分割单元，用于根据页面控件和页面文字分别在多媒体页面中的显示位置信息，对页面底层图像进行分割，得到页面控件对应的第一底层图像和页面文字对应的第二底层图像；
96.第一图像合并单元，用于根据第一滤镜参数，将第一底层图像中的主颜色更新为第一更新子颜色，将具有第一更新子颜色的第一底层图像与页面控件进行合并，得到第一页面子图像；
97.第二图像合并单元，用于根据第二滤镜参数，将第二底层图像中的主颜色更新为第二更新子颜色，将具有第二更新子颜色的第二底层图像与页面文件进行合并，得到第二页面子图像；
98.拼接单元，用于将第一页面子图像与第二页面子图像进行拼接，得到目标页面图像，在多媒体页面中显示目标页面图像。
99.本技术实施例一方面提供了一种计算机设备，包括存储器和处理器，存储器存储有计算机程序，计算机程序被处理器执行时，使得处理器执行本技术实施例中一方面中方法的步骤。
100.本技术实施例一方面提供了一种计算机可读存储介质，计算机可读存储介质存储有计算机程序，计算机程序包括程序指令，程序指令当被处理器执行时，执行如本技术实施
例中一方面中方法的步骤。
101.本技术实施例可以通过获取页面底层图像中的主颜色，根据主颜色对应的目标色值信息确定该主颜色的目标亮度值，进而可以根据页面素材元素对应的素材色值信息，获取与目标亮度值相对应的目标滤镜参数，根据目标滤镜参数将页面底层图像中的主颜色调整为目标颜色，将具有目标颜色的页面底层图像与页面素材元素进行合并，得到用于显示的目标页面图像。可见，在提取到页面底层图像中的主颜色后，可以对主颜色进行亮度值换算，将与亮度值相对应的滤镜参数和主颜色进行叠加，以达到页面中的可视化标准，即增强主颜色与页面素材元素之间的对比度，通过直接获取主颜色对应的滤镜参数，将滤镜参数叠加在主颜色上，无需调整页面中的其余元素，可以提高页面图像的生成效率。
附图说明
102.为了更清楚地说明本技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
103.图1是本技术实施例提供的一种网络架构图；
104.图2是本技术实施例提供的一种图像处理场景示意图；
105.图3是本技术实施例提供的一种图像处理方法的流程示意图；
106.图4是本技术实施例提供的一种生成亮度映射关系表的示意图；
107.图5a和图5b是本技术实施例提供的一种生成目标页面图像的示意图；
108.图6是本技术实施例提供的一种目标页面图像的界面示意图；
109.图7是本技术实施例提供的一种目标页面图像生成过程的示意图；
110.图8是本技术实施例提供的一种图像处理装置的结构示意图；
111.图9是本技术实施例提供的一种计算机设备的结构示意图。
具体实施方式
112.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
113.请参见图1，是本技术实施例提供的一种网络架构图。该网络架构可以包括服务器10d以及多个终端设备(如图1所示，具体包括终端设备10a、终端设备10b以及终端设备10c)。其中，每个终端设备均可以包括客户端，该客户端可以用于为用户生成页面图像(如音乐播放主页面图像、电子读物阅读主页面图像以及电台主页面图像等)，并在客户端中显示所生成的页面图像；服务器10d可以为该客户端的后台服务器，服务器10d可以用于图像数据的存储和获取，服务器10d可以与每个终端设备进行数据传输。以终端设备10a为例，终端设备10a可以采集素材图像数据(如专辑封面、书籍封面、横幅图片等)，终端设备10a可以将提取到的素材图像数据发送给服务器10d，服务器10d可以将素材图像数据进行存储，当然，服务器10d还可以用于存储多媒体页面中的页面控件和页面文字等元素，其中，多媒体
页面包括但不限于：音乐类应用中的音乐播放主页面、阅读类应用中的电子读物阅读主页面、电台应用中的电台主页面。终端设备10a可以将后台服务器中存储的素材图像数据作为多媒体页面中的页面底层图像，也可以理解为多媒体页面中除页面控件和页面文字之外的页面背景图像，并从页面底层图像中提取主颜色，通过将提取到的主颜色与多媒体页面中的页面控件和页面文字进行对比，根据对比结果对主颜色进行滤镜处理，将滤镜处理过后的主颜色与多媒体页面中的页面控件和页面文字进行合并，得到用于显示的页面图像。可以理解地，本技术实施例提出的图像处理方案可以由终端设备执行，或者由服务器执行，或者由计算机设备中的一个计算机程序(包括程序代码)执行，例如该图像处理方案由一个应用软件执行，应用软件的后台服务器可以存储页面底层图像，该应用软件的客户端可以提取页面底层图像中的主颜色，并对提取到的主颜色进行滤镜处理，将进行滤镜处理后的主颜色对包含页面底层图像的页面进行填充，得到用于显示的页面图像。
114.其中，终端设备10a、终端设备10b以及终端设备10c等可以包括手机、平板电脑、笔记本电脑、掌上电脑、移动互联网设备(mobile internet device，mid)、可穿戴设备(例如智能手表、智能手环等)或其他可以显示图像并支持图像处理的终端设备等。
115.请参见图2，是本技术实施例提供的一种图像处理场景示意图，以上述图1所对应实施例中的终端设备10a为例，对图像处理过程进行说明。如图2所示，在页面运营中，终端设备10a可以将图像20a作为页面底层图像，获取图像20a中所包含的像素点对应的色值信息，该色值信息可以为rgb颜色值(一种颜色标准，用于表示红、绿、蓝三个颜色通道的颜色)；终端设备10a可以遍历图像20a中所包含的像素点，通过对每个像素点的色值信息中的红、绿、蓝三个分量分别进行累加，得到三个分量分别对应的平均值，得到一个新的颜色，将上述新的颜色作为图像20a的主颜色20b。其中，终端设备10a遍历像素点的过程可以包括但不限于：终端设备10a可以依次遍历图像20a中所包含的所有像素点，或者跳跃着遍历图像20a中所包含的像素点，如每4个像素点取一个值，或者遍历图像20a中属于阈值范围内的像素点。
116.终端设备10a在提取到图像20a中的主颜色20b后，可以根据该主颜色20b对应的色值信息，计算得到该主颜色20b的相对亮度(也可以称为目标亮度值)为：0.527055；终端设备10a可以根据页面中已存在的控件和页面文字的色值信息获取亮度映射关系表20c，该亮度映射关系表20c用于表示相对亮度与透明度之间的映射关系，即亮度映射关系表20c可以包括各透明度分别对应的亮度值范围，如亮度映射关系表20c中以10％为梯度将透明度分为0、10％、20％、30％、40％等，透明度为0时对应的最小亮度值为0，透明度为10％时对应的最小亮度值为0.3000000270676697，透明度为20％时对应的最小亮度值为0.3785699356352903，透明度为30％时对应的最小亮度值为0.491792922839291，透明度为40％时对应的最小亮度值为0.6633507846819638等。换言之，透明度0对应的亮度值范围为：[0，0.3000000270676697)，透明度10％对应的亮度值范围为：[0.3000000270676697，0.3785699356352903)，透明度20％对应的亮度值范围为：[0.3785699356352903，0.491792922839291)，透明度30％对应的亮度值范围为：[0.491792922839291，0.6633507846819638)等，此处各透明度对应的亮度值范围均为左包含右不包含的关系。通过在亮度映射关系表20c中查询可以得到与主颜色20b相对应的透明度为：30％；终端设备10a可以根据透明度30％对主颜色20b进行调整，即对主颜色20b进行滤镜处理，得到目标颜
色20d。
[0117]
终端设备10a可以将目标颜色20d作为页面的整个背景填充颜色，并获取页面中的控件(如“分享”控件，“详情”阅读控件等)和页面文字(如“一日之计在于晨”等)，根据控件和页面文字分别在页面中的显示位置，将具有目标颜色20d的页面底层图像、控件以及页面文字进行叠加，得到页面图像20e，并将页面图像20e显示在终端设备10a的多媒体页面中，用户可以对多媒体页面中的页面图像20e进行查看，并通过触发页面图像20e中的控件，触发终端设备10a对多媒体页面中所显示的页面图像20e进行切换，或进行信息跳转，如用户可以点击页面图像20e中的“分享”控件，终端设备10a可以响应用户针对“分享”控件的点击操作，在多媒体页面中显示针对页面图像20e所展示内容的分享界面，以使用户可以将页面图像20e所展示内容分享至其余信息发布平台。
[0118]
请参见图3，是本技术实施例提供的一种图像处理方法的流程示意图。如图3所示，该图像处理方法可以包括以下步骤：
[0119]
步骤s101，获取页面底层图像中的主颜色，根据主颜色对应的目标色值信息，确定主颜色的目标亮度值。
[0120]
具体的，终端设备可以获取页面底层图像，并提取页面底层图像指定区域中像素比最高的色值，作为页面底层图像中的主颜色，进而将主颜色对应的目标色值信息转换为相对亮度(即目标亮度值)。其中，页面底层图像可以为终端设备所提取的素材图像，页面底层图像可以包括但不限于：专辑封面图片、书籍封面图片、页面横幅图片、人物写真图片、风景图片；色值信息可以是指页面底层图像中所包含的像素点的颜色值，色值信息可以用三个独立的属性来描述，如采用rgb颜色值来表示色值信息，r用于表示红色，g用于表示绿色，b用于表示蓝色，或者采用yuv(一种颜色编码方法)值来表示色值信息，y用于表示亮度信号，u和v用于表示两个色度信号，或者采用hsv(一种将rgb色彩空间中的点在倒圆锥体中的表示方法)值来表示色值信息，h用于表示色相(hue)，s用于表示饱和度(saturation)、v用于表示明度(value)。为方便描述，本技术实施例中均采用rgb颜色值来表示色值信息。
[0121]
其中，页面底层图像中主颜色的获取方法可以包括但不限于：聚类算法、八叉树提取算法、最小插值法、中位切分法。例如，终端设备可以获取页面底层图像，对页面底层图像中所包含的像素点对应的色值信息进行分类，得到至少两个色值类别；对每个色值类别中所包含的色值信息分别进行累加，得到每个色值类别分别对应的色值总值；分别统计每个色值类别中所包含的色值信息的数量，根据数量和色值总值，得到每个色值类别分别对应的色值平均值；根据色值平均值，获取页面底层图像中的主颜色。换言之，终端设备可以对页面底层图像中所包含的像素点进行遍历，将像素点对应的rgb颜色值进行分类，得到至少两个色值类别，如相同的rgb颜色值可以划分为一个色值类别，或者各阈值范围内的rgb颜色值可以划分为一个色值类别，或者采用聚类算法对页面底层图像所包含的rgb颜色值进行分类等，这里不做限定；通过统计每个色值类别中所包含的rgb颜色值的数量，即每个色值类别中所包含的rgb颜色值在页面底层图像中出现的频次，分别累加每个色值类别中的r、g、b值，将累加得到的r、g、b值除以上述统计的数量，得到r、g、b三个分量上的均值，将r、g、b三个分量上的均值作为相应色值类别对应的平均值；进而可以根据每个色值类别分别对应的平均值，确定页面底层图像中的主颜色。如将色值信息数量最多的色值类别所对应的平均值，作为页面底层图像中的主颜色，或者终端设备可以将各色值类别分别对应的平
均值中的最大平均值最为页面底层图像中的主颜色等。
[0122]
其中，终端设备将主颜色的色值信息转换为目标亮度值的过程可以包括：终端设备可以获取主颜色对应的目标色值信息，并获取目标色值信息对应的亮度系数，将目标色值信息与亮度系数进行乘积运算，得到主颜色对应的目标亮度值。换言之，终端设备在获取到主颜色对应的rgb颜色值后，可以获取rgb颜色值对应的亮度系数，如r值对应的亮度系数为a1，g值对应的亮度系数为a2，b值对应的亮度系数为a3，其中，a1、a2以及a3可以为预先设定的参数，分别将a1与r值相乘、a2与g值相乘、a3与b值相乘之后的结果进行累加，得到主颜色对应的目标亮度值，也可以称为目标相对亮度，即目标亮度值l＝a1*r a2*g a3*b。例如，主颜色对应的初始rgb颜色值为[0，100，200]，a1为0.2126，a2为0.7152，a3为0.0722，终端设备可以对主颜色的初始rgb颜色值进行转换，得到一个转换之后的rgb颜色值(即包括r值、g值以及b值)，初始rgb的转换过程可以表示为：将初始rgb颜色值中的初始r、g、b三个分量分别除以255(在rgb颜色空间中r、g、b三个分量的取值范围均为0～255，可以理解为对r、g、b三个分量进行归一化处理)，得到三个分量分别对应的单位值value，并通过value<＝0.03928？value/12.92：math.pow((value 0.055)/1.055，2.4)计算初始rgb颜色值转换之后的rgb颜色值，其中，math.pow(a，b)用于求解a的b次方，当单位值value小于或等于0.03928时，可以执行value/12.92操作，得到转换后的值；当单位值value大于0.03928时，可以执行math.pow((value 0.055)/1.055，2.4)操作，得到转换后的值。因此，主颜色对应的初始rgb颜色值为[0，100，200]时，可以得到转换后的r值为：0，转换后的g值为：(100/255 0.055)/1.055的2.4次方，转换后的b值为：(200/255 0.055)/1.055的2.4次方，通过公式l＝a1*r a2*g a3*b，可以得到主颜色的目标亮度值l为：0.1328447368465958。
[0123]
步骤s102，获取页面素材元素对应的素材色值信息，根据素材色值信息获取与目标亮度值相对应的目标滤镜参数。
[0124]
具体的，终端设备可以获取页面素材元素，并获取页面素材元素对应的素材色值信息，在素材色值信息的情形下获取与目标亮度值相对应的目标滤镜参数。其中，页面素材元素可以包括多媒体页面中的页面控件和页面文字等元素，素材色值信息可以包括页面控件和页面文字分别对应的色值(如rgb颜色值)，页面控件对应的rgb颜色值和页面文字对应的色值可以是相同的，也可以是不相同的；目标滤镜参数可以包括颜色透明度、饱和度、明度以及其他特殊色彩混合模式等，终端设备可以预先得到亮度值与滤镜参数之间的映射关系，对于不同的素材色值信息，亮度值与滤镜参数之间的映射关系可以是不一样的。亮度值与滤镜参数之间的映射关系可以以映射关系表的形式存储在终端设备的本地数据库中，当然，映射关系表还可以存储在云数据库、云存储空间、后台服务器等具有存储功能的设备中，终端设备在使用时可以从云数据库、云存储空间、后台服务器等具有存储功能的设备中获取，这里不做具体限定。终端设备在确定了页面素材元素对应的素材色值信息后，可以获取该素材色值信息对应的亮度映射关系表，该亮度映射关系表包括至少两个滤镜参数分别对应的亮度值范围，可以根据目标亮度值在亮度映射关系表中所属的亮度值范围，确定主颜色对应的目标滤镜参数，即将目标亮度值在亮度映射关系表中所属的亮度值范围对应的滤镜参数，作为主颜色对应的目标滤镜参数。例如，终端设备的本地数据库中存储了亮度映射关系表1、亮度映射关系表2、亮度映射关系表3以及亮度映射关系表4，每个亮度映射关系表均包括至少两个滤镜参数分别对应的亮度值范围，其中，亮度映射关系表1对应白色的页
面素材元素，亮度映射关系表2对应黑色的页面素材元素，亮度映射关系表3对应绿色的页面素材元素，亮度映射关系表4对应红色的页面素材元素；终端设备在确定了素材色值信息表示白色时，可以从本地数据库中获取亮度映射关系表1，并将目标亮度值在亮度映射关系表1中所属亮度值范围对应的滤镜参数，确定为主颜色对应的目标滤镜参数。
[0125]
其中，终端设备可以预先得到亮度值与滤镜参数之间的亮度映射关系表，在页面运营时可以使用亮度映射关系表，可以增强页面图像的生成效率。亮度映射关系表的具体生成过程可以包括：终端设备可以获取色值信息集合中每个色值信息分别对应的待选亮度值，该色值信息集合可以包括颜色空间中所包含的色值信息，进而可以获取每个待选亮度值分别与素材色值信息之间的对比度，根据对比度和可视化参数，确定每个待选亮度值分别对应的滤镜参数，根据每个待选亮度值分别对应的滤镜参数，可以生成亮度映射关系表。可以理解的是，在生成亮度映射关系表之前，终端设备需要设置初始参数，可以将页面素材元素对应的素材色值信息设置为对比色色值参数，如页面素材元素为白色时，对比色色值参数可以为#ffffff(用十六进制表示的rgb颜色值)；设置色彩的可视化标准，即页面展示中的可视化参数，如可视化参数可以设置为3；设置滤镜递增参数，即滤镜参数的递增值，如滤镜递增参数可以设置为10％。终端设备可以遍历颜色空间中的色值信息，其中，颜色空间可以是指rgb颜色空间，或者yuv颜色空间，或者hsv颜色空间等；当颜色空间为rgb颜色空间时，色值信息集合可以包括rgb颜色空间中所包含的rgb颜色值，rgb中的r、g、b三个分量各有256级亮度，用数字0-255表示，色值信息集合中可以包括255*255*255种rgb颜色值；当颜色空间为yuv颜色空间时，色值信息集合可以包括yuv颜色空间中所包含的yuv颜色值；当颜色空间为hsv颜色空间时，色值信息集合可以包括hsv颜色空间中所包含的hsv颜色值。
[0126]
终端设备可以计算色值信息集合中每个色值信息分别对应的待选亮度值，待选亮度值的计算过程可以参见上述步骤s101中对目标亮度值计算过程的描述，这里不再进行赘述。可以获取素材色值信息对应的素材亮度值，计算每个待选亮度值分别与素材亮度值之间的对比度，根据对比度与可视化参数之间的大小关系，可以确定每个待选亮度值分别对应的滤镜参数。进一步地，若对比度小于可视化参数，则将小于可视化参数的对比度确定为目标对比度，根据滤镜递增参数确定目标对比度对应的更新滤镜参数，根据更新滤镜参数对目标对比度进行更新，当更新后的目标对比度大于或等于可视化参数时，将更新滤镜参数确定为目标对比度对应的待选亮度值的滤镜参数，其中，更新滤镜参数是指基于滤镜递增参数对目标对比度对应的滤镜参数进行参数增加之后所得到的新的滤镜参数，如目标对比度对应的滤镜参数为10％，滤镜递增参数为10％时，更新滤镜参数可以为20％。换言之，待选亮度值与素材亮度值之间的对比度大于或等于可视化参数时，表明当前待选亮度值对应的颜色与页面素材元素在同一页面中进行显示时，满足可视化条件(即页面图像具有清晰醒目的视觉特点)，当前待选亮度值对应的滤镜参数为0；当待选亮度值与素材亮度值之间的对比度小于可视化参数时，表明当前待选亮度值与页面素材元素在同一页面进行显示时，不满足可视化条件(即页面图像具有不清晰、灰蒙蒙的视觉特点)，可以根据滤镜递增参数为当前待选亮度值增加滤镜参数，得到更新滤镜参数，如滤镜递增参数为10％时，可以将10％作为当前待选亮度值的更新滤镜参数，根据更新滤镜参数10％对当前待选亮度值进行更新，即根据更新滤镜参数10％对待选亮度值对应的色值信息进行颜色叠加，重新计算更新后的待选亮度值与素材亮度值之间的对比度，即得到更新后的目标对比度，若更新后的
目标对比度仍然小于可视化参数，则可以根据滤镜递增参数继续增加当前待选亮度值对应的更新滤镜参数，如依次增加更新滤镜参数为20％、30％...，直至更新后的目标对比度大于或等于可视化参数，将此时的更新滤镜参数确定为当前待选亮度值对应的滤镜参数。
[0127]
终端设备在获取到每个待选亮度值分别对应的滤镜参数后，可以根据每个待选亮度值分别对应的滤镜参数，生成与素材色值信息相对应的亮度映射关系表。进一步地，终端设备可以根据每个待选亮度值分别对应的滤镜参数，对每个待选亮度值进行分组，得到至少两个亮度组，每个亮度组中所包含的待选亮度值具有相同的滤镜参数，进而可以根据每个亮度组中的最大待选亮度值和最小待选亮度值，确定每个亮度组分别对应的亮度值范围，根据每个亮度组分别对应的滤镜参数和亮度值范围之间的映射关系，生成亮度映射关系表。换言之，终端设备可以记录每个色值信息对应的待选亮度值，以及该待选亮度值对应的滤镜参数，进而可以获取每个滤镜参数分别对应的亮度值范围，根据滤镜参数与亮度值范围之间的映射关系，可以亮度映射关系表。
[0128]
请一并参见图4，是本技术实施例提供的一种生成亮度映射关系表的示意图。本技术实施例以rgb颜色空间为例，对亮度映射关系表的生成过程进行具体阐述，如图4所示，亮度映射关系表的生成过程可以包括s1-s7步骤。
[0129]
s1，设置参数；
[0130]
具体的，终端设备可以根据用户针对参数的输入操作，将用户所输入的数值设置为亮度映射关系表生成过程中所需要的参数，参数可以是用户根据实际需求所输入的数值，上述参数可以包括：对比度色值信息(即素材色值信息)、可视化参数以及透明度递增参数(可以理解为上述滤镜递增参数)。当用户没有输入相应的数值时，终端设备也可以使用默认值作为参数。可以理解的是，亮度映射关系表生成过程中所涉及到的参数均设置有对应的默认值。
[0131]
s2，遍历rgb颜色；
[0132]
具体的，终端设备可以遍历rgb颜色空间中所包含的rgb颜色值(即色值信息)，rgb颜色空间中可以包括255*255*255种rgb颜色值，因此终端设备需要遍历255*255*255次rgb颜色值。
[0133]
s3，计算相对亮度；
[0134]
具体的，终端设备每遍历一个rgb颜色空间中的rgb颜色值，均需要计算该rgb颜色值对应的相对亮度(即上述待选亮度值)。终端设备可以对rgb颜色值进行转化，将rgb颜色值的r、g、b三个分量进行归一化，得到三个分量分别对应的单位值，通过比较三个分量对应的单位值与阈值(如0.03928)之间的大小，可以计算得到rgb颜色值中三个分量转化之后的值，获取三个分量分别对应的亮度系数，可以将三个分量分别与对应的亮度系数进行乘积运算，将乘积运算之后的值进行累加，可以得到每个rgb值分别对应的相对亮度。
[0135]
s4，计算与素材色值信息之间的对比度；
[0136]
具体的，终端设备可以计算每个rgb颜色值所对应的相对亮度与素材色值信息之间的对比度。可以计算素材色值信息对应的素材相对亮度(也可以称为素材亮度值)，可以将每个rgb颜色值和素材色值信息中的最大值与最小值的比值作为两种颜色之间的对比度。可以理解的是，最大值与最小值之间的比值为一个分式，为了避免分母为零(此时的分式无效)，可以在分式的分子和分母中均加上一个较小的数值(如0.05等)。将计算得到的对
比度与可视化参数进行对比，当对比度大于或等于可视化参数时，继续执行步骤s6；当对比度小于可视化参数时，继续执行步骤s5。
[0137]
s5，增加透明度，梯度为透明度递增参数；
[0138]
具体的，若对比度小于可视化参数，表明不满足可视化条件，需要增加透明度，根据透明度递增参数增加透明度，计算原rgb颜色值加上透明度之后的目标颜色的相对亮度，重新计算目标颜色的相对亮度与素材色值信息之间的对比度，若重新计算的对比度大于或者等于可视化参数，则继续执行步骤s6；若重新计算的对比度仍然小于可视化参数，则再次根据透明度递增参数增加透明度，如透明度递增参数为10％时，可以依次增加透明度为10％、20％、30％...，直至计算得到的对比度大于或等于可视化参数。
[0139]
s6，记录颜色相对亮度和对应的透明度；
[0140]
具体的，在确定了rgb颜色空间中的rgb颜色值对应的透明度后，可以记录rgb颜色值的相对亮度与对应的透明度，每确定一个rgb颜色值对应的透明度，就可以记录一个rgb颜色值的相对亮度与对应的透明度。当然，终端设也可以在获取到rgb颜色空间中所包含的所有rgb颜色值分别对应的透明度后，再记录每个rgb颜色值的相对亮度与对应的透明度。例如，某rgb颜色值的相对亮度为：0.1328447368465958，该rgb颜色值对应的透明度为0，则可以记录为：0.1328447368465958—0。
[0141]
s7，整理得出各个透明度对应的最小相对亮度。
[0142]
具体的，终端设备可以根据所记录的相对亮度与透明度之间的对应关系，可以得到每个透明度分别对应的最小相对亮度，即每个透明度分别对应的亮度值范围，根据亮度值范围与透明度之间的映射关系可以生成亮度映射关系表，并将亮度映射关系表进行存储。如透明度为0时对应的最小亮度值为0，透明度为10％时对应的最小亮度值为0.3000000270676697，透明度为20％时对应的最小亮度值为0.3785699356352903，即可以表明透明度0对应的亮度值范围为：[0，0.3000000270676697)，透明度10％对应的亮度值范围为：[0.3000000270676697，0.3785699356352903)。
[0143]
需要说明的是，当素材色值信息、可视化参数以及透明度递增参数中的任一参数发生变化时，可以根据上述步骤s4-步骤s7，重新生成新的亮度映射关系表，并将新生成的亮度映射关系表进行存储。
[0144]
步骤s103，根据目标滤镜参数将页面底层图像中的主颜色更新为目标颜色，将具有目标颜色的页面底层图像与页面素材元素进行合并，得到用于显示的目标页面图像。
[0145]
具体的，在获得目标亮度值对应的目标滤镜参数后，终端设备可以获取页面底层图像中的主颜色加上目标滤镜参数后的目标颜色，将目标颜色作为页面底层图像的整体背景颜色，将具有目标颜色的页面底层图像与页面素材元素进行合并，得到目标页面图像，并在图像预览界面中显示目标页面图像，用户可以在图像预览界面中实时预览添加目标滤镜参数之后的页面图像展示效果。其中，在终端设备的图像预览界面中可以包括至少三个显示区域，分别为第一显示区域、第二显示区域以及第三显示区域；终端设备可以根据页面素材元素和具有主颜色的页面底层图像，生成未调整的页面图像，在图像预览界面的第一显示区域中显示未调整的页面图像，在图像预览界面的第二显示区域中显示目标滤镜参数对应的滤镜图像；根据滤镜图像，将未调整的页面图像中的主颜色更新为目标颜色，得到目标页面图像，在图像预览界面的第三显示区域中显示目标页面图像。换言之，终端设备可以将
页面底层图像中提取到的主颜色直接作为页面底层图像的整体背景颜色，将主颜色作为整体背景颜色的页面底层图像与页面素材元素进行合并，生成未调整的页面图像，将未调整的页面图像显示在第一显示区域中，将目标滤镜参数对应的滤镜图像显示在第二显示区域中，将未调整的页面图像与目标滤镜图像进行叠加，可以得到目标页面图像，将目标页面图像显示在第三显示区域中，即图像预览界面中可以同时显示主题色直接作为整体背景颜色的未调整的页面图像、目标滤镜参数对应的滤镜图像以及增加了滤镜效果的目标页面图像，用户可以很直观地预览增加了滤镜效果之后的页面图像显示效果。
[0146]
可选的，图像预览界面还可以包括滤镜参数输入框，当用户对图像预览界面中所显示的目标页面图像不满意时，用户可以修改目标滤镜参数，终端设备可以响应针对用户在滤镜参数输入框的参数调整触发操作，获取滤镜参数输入框中的滤镜调整参数，根据滤镜调整参数将第二显示区域中的滤镜图像更新显示为滤镜调整图像，根据滤镜调整图像，在第三显示区域中对目标页面图像进行调整，显示调整后的目标页面图像。换言之，图像预览界面中可以为用户提供目标滤镜参数修改功能，在用户修改了目标滤镜参数后，终端设备可以响应针对用户的参数调整操作，对目标滤镜参数进行调整，并根据调整后的目标滤镜参数生成新的目标页面图像并显示。可选的，终端设备可以对目标页面图像以及调整后的目标页面图像均进行缓存，用户可以在图像预览界面中对比查看目标页面图像和调整后的目标页面图像，进而选取预览效果最好的滤镜参数作为主颜色的目标滤镜参数。
[0147]
请一并参见图5a和图5b，是本技术实施例提供的一种生成目标页面图像的示意图。如图5a所示，终端设备的图像预览界面中可以包括色值信息显示框40a，在色值信息显示框40a中可以显示主颜色对应的rgb颜色值的r、g、b三个分量的值，如主颜色对应的r、g、b三个分量的值分别为：193，222，63，色值信息显示框40a中所显示的颜色值可以为终端设备提取到页面底层图像中的主颜色后，自动将主颜色对应的rgb颜色值输入色值信息显示框40a中并显示，也可以是终端设备提取到页面底层图像中的主颜色后，由用户将主颜色对应的rgb颜色值输入色值信息显示框40a中，在用户执行色值信息显示框40a中rgb颜色值的输入操作时，终端设备可以响应用户的rgb颜色值输入操作，在色值信息显示框40a中显示用户所输入的rgb颜色值。终端设备在获取到主颜色的rgb颜色值后，可以获取页面素材元素(如文字“纯色”)，将页面素材元素与具有主颜色的页面底层图像合并成未调整的页面图像40b，未调整的页面图像40b在图像预览界面中的显示区域可以称为第一显示区域。
[0148]
图像预览界面中还可以包括针对页面素材元素的亮度映射关系表40e，该亮度映射关系表40e中可以包括多个透明度分别对应的相对亮度区间最小值，如透明度为0时对应的最小亮度值为0，透明度为10％时对应的最小亮度值为0.3000000270676697等。终端设备可以根据主颜色对应的rgb颜色值计算得到该主颜色的目标亮度值为：0.6393888988693083；终端设备可以为主颜色默认选择标准1，即从亮度映射关系表40e中确定目标亮度值0.6393888988693083对应的透明度(即目标滤镜参数)为：30％，则可以在图像预览界面的第二显示区域中显示透明度30％对应的滤镜图像40c，进而可以将未调整的页面图像40b和滤镜图像40c进行叠加，可以得到目标页面图像40d，目标页面图像40d在图像预览界面中的显示区域可以称为第三显示区域。可选的，用户可以为主颜色选择标准2，该标准2是用户为主颜色设置的定制滤镜参数，若用户选择标准2，则终端设备可以响应用户的选择操作，将标准2中的透明度作为主颜色的目标滤镜参数，并将标准2中的透明度
添加在未调整的页面图像40b上，得到新的目标页面图像并显示。
[0149]
可选的，如图5b所示，图像预览界面中还可以包括滤镜参数输入框40f，当用户对生成的目标页面图像40d不满意时，用户可以点击滤镜参数输入框40f，在滤镜参数输入框40f中输入新的透明度，如40％，则终端设备可以响应用户针对滤镜参数输入框40f中的参数调整操作，将用户所输入的透明度40％作为主颜色更新之后的滤镜调整参数，并在图像预览界面中显示滤镜调整参数对应的滤镜调整图像40g，终端设备可以将未调整的页面图像40b和滤镜调整图像40g进行叠加，可以得到调整后的目标页面图像40h，并在图像预览界面中显示该调整后的目标页面图像40h。终端设备可以将目标滤镜参数30％对应的目标页面图像40d和滤镜调整参数40％对应的调整后的目标页面图像40h均进行缓存，并在图像预览界面中可以同时显示目标页面图像40d和调整后的目标页面图像40h，有利于用户在图像预览界面中对比查看不同滤镜参数时的页面图像展示效果，进而可以由用户选择出展示效果最佳的目标页面图像所对应的滤镜参数作为主颜色最终的目标滤镜参数。
[0150]
可选的，在确定出主颜色最终的目标滤镜参数后，终端设备可以将目标滤镜参数与主颜色进行颜色叠加，将页面底层图像中的主颜色更新为目标颜色，根据页面素材元素在多媒体页面中的显示位置信息，将页面素材元素与具有目标颜色的页面底层图像进行叠加，得到目标页面图像，在多媒体页面中显示目标页面图像。终端设备可以将目标滤镜参数叠加在主颜色上，得到一个新的颜色，此时新的颜色可以称为主颜色对应的目标颜色，可以将目标颜色作为多媒体页面中的整体背景颜色，获取页面素材元素在多媒体页面中的显示位置信息，根据显示位置信息将具有目标颜色的页面底层图像和页面素材元素进行叠加，得到目标页面图像，并在多媒体页面中显示该目标页面图像。该目标页面图像可以包括：歌曲播放界面的主页面图像、电子读物阅读界面的推荐图像、电台显示界面的主题图像等。应当理解，在多媒体页面的运营场景中，或者打开终端设备中的客户端进入该客户端的主页面场景中，或者切换当前页面的场景中，等等，均可以触发终端设备提取页面底层图像中的主颜色，并对提取到的主颜色进行更新，生成目标页面图像。
[0151]
其中，目标颜色的确定过程可以包括：终端设备可以获取主颜色对应的初始参数，根据目标色值信息、初始参数以及目标滤镜参数确定第一过渡参数，进而可以获取目标滤镜参数对应的滤镜图像，根据滤镜图像对应的色值信息和目标滤镜参数确定第二过渡参数，进而根据初始参数和目标滤镜参数确定第三过渡参数，确定第一过渡参数和第二过渡参数的参数总量，根据参数总量与第三过渡参数的比值确定目标颜色，其中，初始参数可以是指主颜色在更新为目标颜色之前的初始滤镜参数，此处也可以是指主颜色在更新为目标颜色之前的初始透明度。进一步地，终端设备可以获取主颜色对应的初始透明度a1和主颜色对应的目标色值信息：r1、g1以及b1(即主颜色对应的rgb颜色值中r、g、b三个分量分别对应的数值)，还可以获取目标滤镜参数a2对应的滤镜图像(默认该滤镜图像仅包含一种颜色)，滤镜图像对应的色值信息为：r2、g2以及b2(即滤镜图像对应的rgb颜色值中r、g、b三个分量分别对应的数值)；终端设备可以通过value1*a1*(1-a2)计算第一过渡参数t1，通过value2*a2计算第二过渡参数t2，通过(a1 a2-a1*a2).tofixed(2)计算第三过渡参数t3，通过(t1 t2)/t3计算新的rgb值，此时计算所得到的新的rgb值即为目标颜色对应的色值信息。其中，value1用于表示目标色值信息中的r1、g1以及b1，value1用于表示滤镜图像对应的色值信息中的r2、g2以及b2，.tofixed(n)用于将数值四舍五入为n位小数的数字。
[0152]
举例来说，主颜色的初始透明度a1＝0，主颜色对应的目标色值信息为:r1＝2，g1＝10，b1＝15，目标滤镜参数a2＝0.2，滤镜图像对应的色值信息为：r2＝10，g2＝20，b2＝30，则可以计算得到第一过渡参数t1＝0，第二过渡参数t2分别取值为：2，4，6，第三过渡参数t3＝0.2，进而可以得到目标颜色的rgb值为[10，20，30]。换言之，当主颜色的初始透明度a1为0时，目标颜色对应的rgb值即为目标滤镜参数对应的滤镜图像的rgb值。主颜色的初始透明度a1＝0.2，主颜色对应的目标色值信息为:r1＝10，g1＝20，b1＝30，目标滤镜参数a2＝0.3，滤镜图像对应的色值信息为：r2＝100，g2＝20，b2＝30，则可以计算得到第一过渡参数分别取值为：1.4，2.8，4.2，第二过渡参数t2分别取值为：30，6，9，第三过渡参数t3＝0.44，进而可以得到目标颜色的rgb值为[71，20，30]。可以理解的是，在计算目标颜色的rgb值时，最终得到的rgb值是对计算得到的实际数值向下取整(即小于或等于实际数值的最大整数)之后的结果。
[0153]
请一并参见图6，是本技术实施例提供的一种目标页面图像的界面示意图。如图6所示，终端设备50a的多媒体界面中所显示的目标页面图像50b为电子读物的推荐图像，该目标页面图像50b中包括所推荐电子读物的封面图像，分享控件以及详情阅读控件等。当用户对目标页面图像50b中所显示的电子读物不感兴趣时，用户可以在终端设备50a的屏幕上进行左右滑动，对多媒体页面中所显示的目标页面图像50b进行切换，如用户可以在终端设备50a的屏幕上向左滑动，则终端设备50a可以响应该用户针对目标页面图像50b的滑动操作，将多媒体页面中的目标页面图像50b切换成目标页面图像50c。其中，在目标页面图像50b切换成目标页面图像50c的过程中，终端设备50a可以获取页面底层图像50d对应的原始底层图像，并提取出原始底层图像中的主颜色，在黑色(页面控件和页面文字的颜色均为黑色)对应的亮度映射关系表中获取与主颜色的目标亮度值相对应的目标滤镜参数，并将目标滤镜参数与原始底层图像中的主颜色进行颜色叠加，生成更新主颜色，将更新主颜色应用于多媒体页面，将目标颜色作为多媒体页面的整体背景颜色，可以生成具有目标颜色的页面底层图像50d，将页面底层图像50d、页面控件以及页面文字进行合并，得到目标页面图像50c。可以理解的是，在终端设备50a的终端屏幕中仅显示目标页面图像50b跳转至目标页面图像50c的过程，或者显示目标页面图像50b滑出屏幕的过程以及目标页面图像50c滑进屏幕的过程，而不会显示目标页面图像50c的生成过程，目标页面图像50c的生成过程是在终端设备50a的后台完成的。
[0154]
可选的，页面素材元素可以包括页面控件和页面文字，当页面控件对应的色值信息和页面文字对应的色值信息不相同时，即页面控件的颜色与页面文字的颜色不相同时，页面底层图像中的主颜色对应的目标滤镜参数可以包括页面控件对应的第一滤镜参数，以及页面文字对应的第二滤镜参数。在生成目标页面图像的过程中，终端设备可以根据页面控件和页面文字分别在多媒体页面中的显示位置信息，对页面底层图像进行分割，得到页面控件对应的第一底层图像和页面文字对应的第二底层图像，进而根据第一滤镜参数，将第一底层图像中的主颜色更新为第一更新子颜色，将具有第一更新子颜色的第一底层图像与页面控件进行合并，得到第一页面子图像，根据第二滤镜参数，将第二底层图像中的主颜色更新为第二更新子颜色，将具有第二更新子颜色的第二底层图像与页面文件进行合并，得到第二页面子图像，将第一页面子图像与第二页面子图像进行拼接，得到目标页面图像，在多媒体页面中显示目标页面图像。当多媒体页面中的页面素材元素具有不同的色值信息
时，终端设备需要根据具有不同色值信息的页面素材元素在多媒体页面中的显示位置信息，对页面底层图像进行分割，得到多个页面子图像，每个页面子图像所在区域中的页面素材元素的色值信息不同，因此每个页面子图像对应的目标滤镜参数可能存在不同，可以生成不同的目标颜色，将目标颜色应用于对应的页面子图像，然后再将具有目标颜色的页面子图像进行拼接，并叠加上页面素材元素，即可得到最终的目标页面图像。
[0155]
请一并参见图7，是本技术实施例提供的一种目标页面图像生成过程的示意图。如图7所示，终端设备60f可以获取图像60a，并将图像60a作为多媒体页面中的页面底层图像，可以从图像60a中提取楚竹颜色60b。终端设备60f可以获取多媒体页面60e中的页面素材元素，页面素材元素可以包括页面文字60g和页面控件60h，由于页面文字60g与页面控件60h的颜色不同(页面文字60g的颜色为黑色，页面控件60h的颜色为白色)，因此对于页面文字60g与页面控件60h所在显示区域的背景颜色需要为不同的颜色，终端设备60f可以根据页面文字60g与页面控件60h在多媒体页面60e中的显示位置信息，对图像60a进行分割，得到子图像60c和子图像60d。
[0156]
由于页面文字60g的颜色为黑色，终端设备60f可以获取黑色对应的亮度映射关系表1，根据主颜色60b对应的目标亮度值，从亮度映射关系表1中获取主颜色60b对应的滤镜参数1；终端设备60f还可以获取白色对应的亮度映射关系表2，根据主颜色60b对应的目标亮度值，从亮度映射关系表2中获取主颜色60b对应的滤镜参数2，由于子图像60c在多媒体页面60e的显示区域中包括页面文字60g，因此采用滤镜参数1对主颜色进行更新，得到新的目标颜色1，将具有新的目标颜色1的子图像60c与页面文字60g进行合并，得到页面子图像60i；由于子图像60d在多媒体页面60e的显示区域中包括页面控件60h，因此采用滤镜参数2对主颜色进行更新，得到新的目标颜色2，将具有新的目标颜色2的子图像60d与页面控件60h进行合并，得到页面子图像60j；终端设备60f可以将页面子图像60i和页面子图像60j进行拼接，得到目标页面图像，并将目标页面图像显示在多媒体页面60e中。
[0157]
本技术实施例可以通过获取页面底层图像中的主颜色，根据主颜色对应的目标色值信息确定该主颜色的目标亮度值，进而可以根据页面素材元素对应的素材色值信息，获取与目标亮度值相对应的目标滤镜参数，根据目标滤镜参数将页面底层图像中的主颜色调整为目标颜色，将具有目标颜色的页面底层图像与页面素材元素进行合并，得到用于显示的目标页面图像。可见，在提取到页面底层图像中的主颜色后，可以对主颜色进行亮度值换算，将与亮度值相对应的滤镜参数和主颜色进行叠加，以达到页面中的可视化标准，即增强主颜色与页面素材元素之间的对比度，通过直接获取主颜色对应的滤镜参数，将滤镜参数叠加在主颜色上，无需调整页面中的其余元素，可以提高页面图像的生成效率；通过对提取到的主颜色进行二次调整，可以增强主颜色与页面素材图像之间的对比度，可以有效提高页面图像的视觉显示效果。
[0158]
请参见图8，是本技术实施例提供的一种图像处理装置的结构示意图。该图像处理装置可以是运行于计算机设备中的一个计算机程序(包括程序代码)，例如该图像处理装置为一个应用软件；该装置可以用于执行本技术实施例提供的方法中的相应步骤。如图8所示，该图像处理装置1可以包括：确定模块10，获取模块11，合并模块12；
[0159]
确定模块10，用于获取页面底层图像中的主颜色，根据主颜色对应的目标色值信息，确定主颜色的目标亮度值；
[0160]
获取模块11，用于获取页面素材元素对应的素材色值信息，根据素材色值信息获取与目标亮度值相对应的目标滤镜参数；
[0161]
合并模块12，用于根据目标滤镜参数将页面底层图像中的主颜色更新为目标颜色，将具有目标颜色的页面底层图像与页面素材元素进行合并，得到用于显示的目标页面图像。
[0162]
其中，确定模块10，获取模块11，合并模块12的具体功能实现方式可以参见上述图3所对应实施例中的步骤s101-步骤s103，这里不再进行赘述。
[0163]
请一并参见图8，确定模块10可以包括：分类单元101，累加单元102，平均单元103，主颜色获取单元104，系数获取单元105，运算单元106；
[0164]
分类单元101，用于获取页面底层图像，对页面底层图像中所包含的像素点对应的色值信息进行分类，得到至少两个色值类别；
[0165]
累加单元102，用于对每个色值类别中所包含的色值信息分别进行累加，得到每个色值类别分别对应的色值总值；
[0166]
平均单元103，用于分别统计每个色值类别中所包含的色值信息的数量，根据数量和色值总值，得到每个色值类别分别对应的色值平均值；
[0167]
主颜色获取单元104，用于根据色值平均值，获取页面底层图像中的主颜色；
[0168]
系数获取单元105，用于获取主颜色对应的目标色值信息，获取目标色值信息对应的亮度系数；
[0169]
运算单元106，用于将目标色值信息与亮度系数进行乘积运算，得到主颜色对应的目标亮度值。
[0170]
其中，分类单元101，累加单元102，平均单元103，主颜色获取单元104，系数获取单元105，运算单元106的具体功能实现方式可以参见上述图3所对应实施例中的步骤s101，这里不再进行赘述。
[0171]
请一并参见图8，获取模块11可以包括：关系表获取单元111，参数确定单元112；
[0172]
关系表获取单元111，用于获取素材色值信息对应的亮度映射关系表；亮度映射关系表包括至少两个滤镜参数分别对应的亮度值范围，至少两个滤镜参数包括目标滤镜参数；
[0173]
参数确定单元112，用于根据目标亮度值在亮度映射关系表中所属的亮度值范围，确定主颜色对应的目标滤镜参数。
[0174]
其中，关系表获取单元111，参数确定单元112的具体功能实现方式可以参见上述图3所对应实施例中的步骤s102，这里不再进行赘述。
[0175]
请一并参见图8，关系表获取单元111可以包括：亮度值获取子单元1111，对比度获取子单元1112，关系表生成子单元1113；
[0176]
亮度值获取子单元1111，用于获取色值信息集合中每个色值信息分别对应的待选亮度值；色值信息集合包括颜色空间中所包含的色值信息；
[0177]
对比度获取子单元1112，用于获取每个待选亮度值分别与素材色值信息之间的对比度，根据对比度和可视化参数，确定每个待选亮度值分别对应的滤镜参数；
[0178]
关系表生成子单元1113，用于根据每个待选亮度值分别对应的滤镜参数，生成亮度映射关系表。
[0179]
其中，亮度值获取子单元1111，对比度获取子单元1112，关系表生成子单元1113的具体功能实现方式可以参见上述图3所对应实施例中的步骤s102，这里不再进行赘述。
[0180]
请一并参见图8，对比度获取子单元1112可以包括：对比度比较子单元11121，更新子单元11122；
[0181]
对比度比较子单元11121，用于若对比度小于可视化参数，则将小于可视化参数的对比度确定为目标对比度，根据滤镜递增参数确定目标对比度对应的更新滤镜参数；
[0182]
更新子单元11122，用于根据更新滤镜参数对目标对比度进行更新，当更新后的目标对比度大于或等于可视化参数时，将更新滤镜参数确定为目标对比度对应的待选亮度值的滤镜参数。
[0183]
其中，对比度比较子单元11121，更新子单元11122的具体功能实现方式可以参见上述图3所对应实施例中的步骤s102，这里不再进行赘述。
[0184]
请一并参见图8，关系表生成子单元1113可以包括：分组子单元11131，亮度值范围确定子单元11132，映射关系生成子单元11133；
[0185]
分组子单元11131，用于根据每个待选亮度值分别对应的滤镜参数，对每个待选亮度值进行分组，得到至少两个亮度组；每个亮度组中所包含的待选亮度值具有相同的滤镜参数；
[0186]
亮度值范围确定子单元11132，用于根据每个亮度组中的最大待选亮度值和最小待选亮度值，确定每个亮度组分别对应的亮度值范围；
[0187]
映射关系生成子单元11133，用于根据每个亮度组分别对应的滤镜参数和亮度值范围之间的映射关系，生成亮度映射关系表。
[0188]
其中，分组子单元11131，亮度值范围确定子单元11132，映射关系生成子单元11133的具体功能实现方式可以参见上述图3所对应实施例中的步骤s102，这里不再进行赘述。
[0189]
请一并参见图8，合并模块12可以包括：第一显示单元121，第二显示单元122，第三显示单元123，颜色叠加单元124，元素叠加单元125；
[0190]
第一显示单元121，用于根据页面素材元素和具有主颜色的页面底层图像，生成未调整的页面图像，在图像预览界面的第一显示区域中显示未调整的页面图像；
[0191]
第二显示单元122，用于在图像预览界面的第二显示区域中显示目标滤镜参数对应的滤镜图像；
[0192]
第三显示单元123，用于根据滤镜图像，将未调整的页面图像中的主颜色更新为目标颜色，得到目标页面图像，在图像预览界面的第三显示区域中显示目标页面图像；
[0193]
颜色叠加单元124，用于将目标滤镜参数与主颜色进行颜色叠加，将页面底层图像中的主颜色更新为目标颜色；
[0194]
元素叠加单元125，用于根据页面素材元素在多媒体页面中的显示位置信息，将页面素材元素与具有目标颜色的页面底层图像进行叠加，得到目标页面图像，在多媒体页面中显示目标页面图像。
[0195]
其中，颜色叠加单元124可以具体用于：
[0196]
获取主颜色对应的初始参数，根据目标色值信息、初始参数以及目标滤镜参数确定第一过渡参数；
[0197]
获取目标滤镜参数对应的滤镜图像，根据滤镜图像对应的色值信息和目标滤镜参数确定第二过渡参数；
[0198]
根据初始参数和目标滤镜参数确定第三过渡参数，确定第一过渡参数和第二过渡参数的参数总量，根据参数总量与第三过渡参数的比值确定目标颜色。
[0199]
其中，当页面素材元素包括页面控件和页面文字，目标滤镜参数包括页面控件对应的第一滤镜参数，以及页面文字对应的第二滤镜参数时，合并模块12可以包括：图像分割单元126，第一图像合并单元127，第二图像合并单元128，拼接单元129；
[0200]
图像分割单元126，用于根据页面控件和页面文字分别在多媒体页面中的显示位置信息，对页面底层图像进行分割，得到页面控件对应的第一底层图像和页面文字对应的第二底层图像；
[0201]
第一图像合并单元127，用于根据第一滤镜参数，将第一底层图像中的主颜色更新为第一更新子颜色，将具有第一更新子颜色的第一底层图像与页面控件进行合并，得到第一页面子图像；
[0202]
第二图像合并单元128，用于根据第二滤镜参数，将第二底层图像中的主颜色更新为第二更新子颜色，将具有第二更新子颜色的第二底层图像与页面文件进行合并，得到第二页面子图像；
[0203]
拼接单元129，用于将第一页面子图像与第二页面子图像进行拼接，得到目标页面图像，在多媒体页面中显示目标页面图像。
[0204]
其中，第一显示单元121，第二显示单元122，第三显示单元123，颜色叠加单元124，元素叠加单元125，图像分割单元126，第一图像合并单元127，第二图像合并单元128，拼接单元129的具体功能实现方式可以参见上述图3所对应实施例中的步骤s103，这里不再进行赘述。
[0205]
请一并参见图8，图像预览界面包括滤镜参数输入框；该图像处理装置1还可以包括：响应模块13，图像调整模块14；
[0206]
响应模块13，用于响应针对在滤镜参数输入框的参数调整触发操作，获取滤镜参数输入框中的滤镜调整参数，根据滤镜调整参数将第二显示区域中的滤镜图像更新显示为滤镜调整图像；
[0207]
图像调整模块14，用于根据滤镜调整图像，在第三显示区域中对目标页面图像进行调整，显示调整后的目标页面图像。
[0208]
其中，响应模块13，图像调整模块14的具体功能实现方式可以参见上述图3所对应实施例中的步骤s103，这里不再进行赘述。
[0209]
本技术实施例可以通过获取页面底层图像中的主颜色，根据主颜色对应的目标色值信息确定该主颜色的目标亮度值，进而可以根据页面素材元素对应的素材色值信息，获取与目标亮度值相对应的目标滤镜参数，根据目标滤镜参数将页面底层图像中的主颜色调整为目标颜色，将具有目标颜色的页面底层图像与页面素材元素进行合并，得到用于显示的目标页面图像。可见，在提取到页面底层图像中的主颜色后，可以对主颜色进行亮度值换算，将与亮度值相对应的滤镜参数和主颜色进行叠加，以达到页面中的可视化标准，即增强主颜色与页面素材元素之间的对比度，通过直接获取主颜色对应的滤镜参数，将滤镜参数叠加在主颜色上，无需调整页面中的其余元素，可以提高页面图像的生成效率；通过对提取
到的主颜色进行二次调整，可以增强主颜色与页面素材图像之间的对比度，可以有效提高页面图像的视觉显示效果。
[0210]
请参见图9，是本技术实施例提供的一种计算机设备的结构示意图。如图9所示，该计算机设备1000可以包括：处理器1001，网络接口1004和存储器1005，此外，上述计算机设备1000还可以包括：用户接口1003，和至少一个通信总线1002。其中，通信总线1002用于实现这些组件之间的连接通信。其中，用户接口1003可以包括显示屏(display)、键盘(keyboard)，可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如wi-fi接口)。存储器1004可以是高速ram存储器，也可以是非不稳定的存储器(non-volatile memory)，例如至少一个磁盘存储器。存储器1005可选的还可以是至少一个位于远离前述处理器1001的存储装置。如图9所示，作为一种计算机可读存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接口模块以及设备控制应用程序。
[0211]
在如图9所示的计算机设备1000中，网络接口1004可提供网络通讯功能；而用户接口1003主要用于为用户提供输入的接口；而处理器1001可以用于调用存储器1005中存储的设备控制应用程序，以实现：
[0212]
获取页面底层图像中的主颜色，根据主颜色对应的目标色值信息，确定主颜色的目标亮度值；
[0213]
获取页面素材元素对应的素材色值信息，根据素材色值信息获取与目标亮度值相对应的目标滤镜参数；
[0214]
根据目标滤镜参数将页面底层图像中的主颜色更新为目标颜色，将具有目标颜色的页面底层图像与页面素材元素进行合并，得到用于显示的目标页面图像。
[0215]
应当理解，本技术实施例中所描述的计算机设备1000可执行前文图3所对应实施例中对图像处理方法的描述，也可执行前文图8所对应实施例中对图像处理装置1的描述，在此不再赘述。另外，对采用相同方法的有益效果描述，也不再进行赘述。
[0216]
此外，这里需要指出的是：本技术实施例还提供了一种计算机可读存储介质，且计算机可读存储介质中存储有前文提及的图像处理装置1所执行的计算机程序，且计算机程序包括程序指令，当处理器执行程序指令时，能够执行前文图3所对应实施例中对图像处理方法的描述，因此，这里将不再进行赘述。另外，对采用相同方法的有益效果描述，也不再进行赘述。对于本技术所涉及的计算机可读存储介质实施例中未披露的技术细节，请参照本技术方法实施例的描述。作为示例，程序指令可被部署在一个计算设备上执行，或者在位于一个地点的多个计算设备上执行，又或者，在分布在多个地点且通过通信网络互连的多个计算设备上执行，分布在多个地点且通过通信网络互连的多个计算设备可以组成区块链系统。
[0217]
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，计算机程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，存储介质可为磁碟、光盘、只读存储存储器(read-only memory，rom)或随机存储存储器(random access memory，ram)等。
[0218]
以上所揭露的仅为本技术较佳实施例而已，当然不能以此来限定本技术之权利范
围，因此依本技术权利要求所作的等同变化，仍属本技术所涵盖的范围。