一种占位背景色确定方法及装置与流程

本申请涉及图片处理技术领域，更具体地说，涉及一种占位背景色确定方法及装置。

背景技术：

图片作为网页中的一个重要元素，相比于文字能够更加吸引用户的注意力，提升整个网页的视觉效果。

对于网页或应用中的图片来说，其加载位置是固定的，在图片加载前一般会利用占位背景色来填充图片加载位置。现有技术在确定图片占位背景色时，一般采用固定颜色设定方式，例如整个网页中有10幅图片待加载，则现有技术将预置的某一固定颜色设置为10幅图片的占位背景色。

本案发明人研究发现，现有技术存在以下缺点：固定颜色设置的方式无法体现出待加载图片的特色，并且当待加载图片为多幅时，各个待加载位置为同一占位背景颜色，不利于用户区分，降低了用户的视觉体验。

技术实现要素：

有鉴于此，本申请提供了一种占位背景色确定方法及装置，用以解决现有图片占位背景色设置方式所存在的占位背景色单一、用户视觉体验差的问题。

为了实现上述目的，现提出的方案如下：

一种占位背景色确定方法，包括：

参考待加载图片中各种类颜色所占的比例，从中选取一种颜色作为初步主题色；

对所述初步主题色的饱和度和亮度进行偏移调整，得到调整后主题色，所述调整后主题色的饱和度属于预置饱和度区间，且调整后主题色的亮度属于预置亮度区间；

将所述调整后主题色确定为所述待加载图片的占位背景色。

一种占位背景色确定装置，包括：

初步主题色确定单元，用于参考待加载图片中各种类颜色所占的比例，从中选取一种颜色作为初步主题色；

初步主题色调整单元，用于对所述初步主题色的饱和度和亮度进行偏移调整，得到调整后主题色，所述调整后主题色的饱和度属于预置饱和度区间，且调整后主题色的亮度属于预置亮度区间；

占位背景色确定单元，用于将所述调整后主题色确定为所述待加载图片的占位背景色。

从上述的技术方案可以看出，本申请实施例提供的占位背景色确定方法，参考了待加载图片中各类颜色所占的比例，进而从中选取一种颜色作为初步主题色，并对初步主题色进行饱和度和亮度的偏移调整，使得调整后主题色的饱和度和亮度均在对应预置范围之内，最后将调整后的主题色确定为待加载图片的占位背景色。由于本申请中初步主题色是参考待加载图片中各类颜色所占的比例而确定的，因此对初步主题色进行饱和度和亮度调整后的占位背景色能够体现出待加载图片的特色，并且针对不同的待加载图片所确定的占位背景色也可能相同，实际应用时更加有利于用户区分不同的待加载图片，提升了用户的视觉体验。

进一步，在确定初步主题色之后对其饱和度和亮度进行了调整，使之归属于预置的区间，这样避免了同一页面中多个待加载图片的占位背景色的亮度和饱和度抖动过大，影响用户视觉体验的问题。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的实施例，对于本领域普通技术人员来讲，在不 付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。

图1为本申请实施例公开的一种服务器硬件结构示意图；

图2为本申请实施例公开的一种占位背景色确定方法流程图；

图3为本申请实施例公开的另一种占位背景色确定方法流程图；

图4为本申请实施例公开的又一种占位背景色确定方法流程图；

图5为本申请实施例公开的又一种占位背景色确定方法流程图；

图6为本申请实施例公开的又一种占位背景色确定方法流程图；

图7为本申请实施例公开的一种占位背景色确定装置结构示意图；

图8为本申请实施例公开的一种初步主题色调整单元结构示意图；

图9为本申请实施例公开的另一种占位背景色确定装置结构示意图；

图10为本申请实施例公开的一种初步主题色确定单元结构示意图；

图11为本申请实施例公开的又一种占位背景色确定装置结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

本申请实施例提供的占位背景色确定方法基于服务器，该服务器的硬件结构可以是电脑、笔记本等。在介绍本申请的占位背景色确定方法之前，首先介绍一下服务器的硬件结构。如图1所示，该服务器可以包括：

处理器1，通信接口2，存储器3，通信总线4，和显示屏5；

其中处理器1、通信接口2、存储器3和显示屏5通过通信总线4完成相互间的通信。

接下来，我们结合服务器硬件结构，对本申请的占位背景色确定方法进行介绍，如图2所示，该方法包括：

步骤S200、参考待加载图片中各种类颜色所占的比例，从中选取一种颜色作为初步主题色；

具体地，一幅待加载图片中一般包含若干种类的颜色，各个种类的颜色所占的比例也不尽相同。本申请可以参考各种类颜色所占的比例，从中选取一种颜色作为初步主题色。具体地选取策略可以有多种，举例如按照颜色所占比例的大小，选取比例较大的某一种颜色作为初步主题色。

具体实施时，可以通过通信接口2来获取待加载图片。可选的，通信接口2可以为通信模块的接口，如GSM模块的接口。

步骤S210、对所述初步主题色的饱和度和亮度进行偏移调整，得到调整后主题色；

主题色包括色相、饱和度和亮度这三个属性。本步骤中对主题色的饱和度和亮度进行了调整。通过调整，使得调整后主题色的饱和度属于预置饱和度区间，且调整后主题色的亮度属于预置亮度区间。

这里，对于预置的饱和度区间和亮度区间，可以根据用户需要而设定。举例如，如果确定受众大部分是比较年轻的用户，则可以将饱和度区间和亮度区间设置为中等偏低，使得颜色显得更加年轻有活力。

可以理解的是，如果初步主题色的饱和度和亮度均属于预置区间内，则可以选择不再对其进行调整，或者选择对其进行微调。

这里，预置的饱和度区间和亮度区间可以通过通信接口2上传至服务器，并存储到存储器3中。存储器3中还可以存储饱和度和亮度调整算法。

本步骤具体可以由处理器1来执行，也即由处理器1利用通信总线4从存储器3中读取具体地调整算法，对于初步主题色的饱和度和亮度进行偏移调整。处理器1可能是一个中央处理器CPU，或者是特定集成电路ASIC(Application Specific Integrated Circuit)，或者是被配置成实施本申请实施例的一个或多个集成电路。

步骤S220、将所述调整后主题色确定为所述待加载图片的占位背景色。

经过上述对初步主题色进行调整后，得到的调整后主题色可以作为待加载图片的占位背景色。

本申请实施例提供的占位背景色确定方法，参考了待加载图片中各类颜色所占的比例，进而从中选取一种颜色作为初步主题色，并对初步主题色进行饱和度和亮度的偏移调整，使得调整后主题色的饱和度和亮度均在对应预置范围之内，最后将调整后的主题色确定为待加载图片的占位背景色。由于 本申请中初步主题色是参考待加载图片中各类颜色所占的比例而确定的，因此对初步主题色进行饱和度和亮度调整后的占位背景色能够体现出待加载图片的特色，并且针对不同的待加载图片所确定的占位背景色也可能相同，实际应用时更加有利于用户区分不同的待加载图片，提升了用户的视觉体验。

进一步，在确定初步主题色之后对其饱和度和亮度进行了调整，使之归属于预置的区间，这样避免了同一页面中多个待加载图片的占位背景色的亮度和饱和度抖动过大，影响用户视觉体验的问题。

在本申请的另一个实施例中，公开了另一种占位背景色确定方法，参见图3。

如图3所示，该方法包括：

步骤S300、确定所述待加载图片中各种类颜色所占的比例；

具体地，在计算待加载图片中各种类颜色所占的比例时，可以采用八叉树算法。八叉树算法是一个现有算法，详细算法本申请不作解释。当然，除了采用八叉树算法之外还可以采用其它算法，只要保证能够得到各种类颜色所占的比例即可。

步骤S310、在所述待加载图片所包含的各种类颜色中，选取非预置颜色的比例最高的颜色，作为初步主题色；

由于实际使用场景的特殊性，为了区分占位背景色与页面底色，在确定初步主题色时考虑剔除掉与页面底色相同或相近的颜色。本步骤中设置了预置颜色，该颜色即为页面底色或接近于页面底色的颜色。

一般情况下，页面底色为白色，因此预置颜色可以包括白色。

具体地选取初步主题色时，可以按照各种类颜色的比例大小，对各种类颜色进行排序，例如按照比例大小进行降序排列。进而判断序列中第一个颜色是否为预置颜色，如果不是，则将其确定为初步主题色；如果是，则选取序列中第二个颜色，并再次判断其是否为预置颜色，直至选取到一个非预置颜色的颜色，将其确定为初步主题色。

步骤S320、对所述初步主题色的饱和度和亮度进行偏移调整，得到调整后主题色；

主题色包括色相、饱和度和亮度这三个属性。本步骤中对主题色的饱和度和亮度进行了调整。通过调整，使得调整后主题色的饱和度属于预置饱和度区间，且调整后主题色的亮度属于预置亮度区间。

步骤S330、将所述调整后主题色确定为所述待加载图片的占位背景色。

本实施例中，介绍了一种确定初步主题色的具体实施方式。具体地，通过八叉树算法确定出待加载图片中各种类颜色所占比例，进而选取其中非预置颜色的比例最高的颜色作为初步主题色。由于本申请选取的是非预置颜色的比例最高的颜色作为初步主题色，该颜色调整后作为占位背景色使用时更加贴近于待加载图片的主题颜色，更好的体现了待加载图片的特色。

在本申请的又一个实施例中，公开了又一种占位背景色确定方法，参见图4。

如图4所示，该方法包括：

步骤S400、参考待加载图片中各种类颜色所占的比例，从中选取一种颜色作为初步主题色；

具体地，一幅待加载图片中一般包含若干种类的颜色，各个种类的颜色所占的比例也不尽相同。本申请可以参考各种类颜色所占的比例，从中选取一种颜色作为初步主题色。具体地选取策略可以有多种，举例如按照颜色所占比例的大小，选取比例较大的某一种颜色作为初步主题色。

步骤S410、对所述初步主题色的饱和度和亮度进行偏移调整，得到调整后主题色；

主题色包括色相、饱和度和亮度这三个属性。本步骤中对主题色的饱和度和亮度进行了调整。通过调整，使得调整后主题色的饱和度属于预置饱和度区间，且调整后主题色的亮度属于预置亮度区间。

步骤S420、判断所述调整后主题色是否与页面底色相同；若是，执行步骤S430，若否，执行步骤S440；

具体地，上述页面为用于展示待加载图片的页面。如网页页面、应用的图片加载页面等。

步骤S430、对所述调整后主题色进行色相调整处理，并将处理后的主题色确定为所述待加载图片的占位背景色；

步骤S440、将所述调整后主题色确定为所述待加载图片的占位背景色。

具体地，与上一实施例相类似的，考虑到如果占位背景色与页面底色相同，则不能够很好的体现出图片占位效果，因此在检测到主题色与页面底色相同时，进一步对其色相进行调整处理，调整后的色相可以与页面底色的色相区别开来。举例如，假设页面底色为白色，则如果确定调整后主题色也是白色，则对其色相进行调整，可以调整为灰色。进而将调整后的主题色作为占位背景色，在保证与待加载图片的主题色相近的情况下，更能够区别于页面底色，体现出图片占位效果。

在本申请的又一个实施例中，公开了又一种占位背景色确定方法，参见图5。

如图5所示，该方法包括：

步骤S500、参考待加载图片中各种类颜色所占的比例，从中选取一种颜色作为初步主题色；

具体地，一幅待加载图片中一般包含若干种类的颜色，各个种类的颜色所占的比例也不尽相同。本申请可以参考各种类颜色所占的比例，从中选取一种颜色作为初步主题色。具体地选取策略可以有多种，举例如按照颜色所占比例的大小，选取比例较大的某一种颜色作为初步主题色。

步骤S510、判断所述初步主题色的饱和度是否超过饱和度阈值，若是，执行步骤S520；

步骤S520、将所述初步主题色的饱和度乘以预置的饱和度偏移比例值；

步骤S530、判断所述初步主题色的亮度是否超过亮度阈值，若是，执行步骤S540；

步骤S540、将所述初步主题色的亮度乘以预置的亮度偏移比例值；

步骤S550、将所述调整后主题色确定为所述待加载图片的占位背景色。

本实施例中预先设定了饱和度阈值和亮度阈值，进而在检测到初步主题色的饱和度和亮度超过对应阈值时，按照预置偏移比例对饱和度和亮度进行偏移调整，使之归属于预置饱和度区间和亮度区间。

通过本实施例的方式，控制待加载图片的占位背景色的饱和度和亮度均在一定区间内，当同一页面内待加载图片为多幅时，各个图片的占位背景色 的亮度属于同一区间、饱和度也属于同一区间，因此使得同一页面内各个占位背景色的饱和度和亮度的抖动不至于过大，提升用户的视觉体验。

以色彩模型为HSB模型进行举例说明，在该模型中饱和度最大值与亮度最大值均为100。我们选取饱和度区间为0-65，亮度区间为0-55，饱和度偏移比例值为65％，亮度偏移比例值为50％。因此，如果确定初步主题色的饱和度x超过了65，则对其进行偏移计算：x*65％。偏移计算后的结果必然属于饱和度区间0-65。同理针对亮度。

可以理解的是，上述对初步主题色的饱和度和亮度的偏移调整方式仅为举例，不应视为对本申请偏移调整算法的限制，任何可以使初步主题色的饱和度和亮度调整至预置区间的算法均可以作为本申请具体实施方案。

在本申请的又一个实施例中，公开了又一种占位背景色确定方法，参见图6。

如图6所示，该方法包括：

步骤S600、参考待加载图片中各种类颜色所占的比例，从中选取一种颜色作为初步主题色；

具体地，一幅待加载图片中一般包含若干种类的颜色，各个种类的颜色所占的比例也不尽相同。本申请可以参考各种类颜色所占的比例，从中选取一种颜色作为初步主题色。具体地选取策略可以有多种，举例如按照颜色所占比例的大小，选取比例较大的某一种颜色作为初步主题色。

步骤S610、对所述初步主题色的饱和度和亮度进行偏移调整，得到调整后主题色；

主题色包括色相、饱和度和亮度这三个属性。本步骤中对主题色的饱和度和亮度进行了调整。通过调整，使得调整后主题色的饱和度属于预置饱和度区间，且调整后主题色的亮度属于预置亮度区间。

步骤S620、确定所述待加载图片中各像素点的亮度平均值；

通过对待加载图片中各个像素点的亮度求取平均值，得到整幅图片的全局亮度均值。

步骤S630、判断所述调整后主题色的亮度与所述亮度平均值的偏差是否超过预置最大偏差值，若是，执行步骤S640；

步骤S640、利用所述亮度平均值再次调整所述调整后主题色的亮度，得到二次调整后主题色；

通过对比亮度平均值与调整后主题色的亮度，可以确定调整后主题色的亮度是否与整幅图片的全局平均亮度相差过大，若确实相差过大，则利用亮度平均值再次调整所述调整后主题色的亮度，使之趋近或等于平均亮度值。

步骤S650、将二次调整后主题色确定为所述待加载图片的占位背景色。

本实施例中在对初步主题色的亮度和饱和度进行调整后，进一步判断调整后主题色的亮度与待加载图片的全局平均亮度是否相差过大，如果是，则利用全局平均亮度再次调整初步主题色的亮度，以使得其亮度趋近或等于图片全局平均亮度。

其中，对于上述步骤S640的调整方式，可以是直接将调整后主题色的亮度确定为所述亮度平均值。当然，除此之外还可以存在其它调整方式，只要保证二次调整后的初步主题色的亮度与所述平均亮度值相差在设置范围内即可。

下面对本申请实施例提供的占位背景色确定装置进行描述，下文描述的占位背景色确定装置与上文描述的占位背景色确定方法可相互对应参照。

参见图7，图7为本申请实施例公开的一种占位背景色确定装置结构示意图。

如图7所示，该装置包括：

初步主题色确定单元71，用于参考待加载图片中各种类颜色所占的比例，从中选取一种颜色作为初步主题色；

初步主题色调整单元72，用于对所述初步主题色的饱和度和亮度进行偏移调整，得到调整后主题色，所述调整后主题色的饱和度属于预置饱和度区间，且调整后主题色的亮度属于预置亮度区间；

占位背景色确定单元73，用于将所述调整后主题色确定为所述待加载图片的占位背景色。

本申请实施例提供的占位背景色确定装置，参考了待加载图片中各类颜色所占的比例，进而从中选取一种颜色作为初步主题色，并对初步主题色进行饱和度和亮度的偏移调整，使得调整后主题色的饱和度和亮度均在对应预 置范围之内，最后将调整后的主题色确定为待加载图片的占位背景色。由于本申请中初步主题色是参考待加载图片中各类颜色所占的比例而确定的，因此对初步主题色进行饱和度和亮度调整后的占位背景色能够体现出待加载图片的特色，并且针对不同的待加载图片所确定的占位背景色也可能相同，实际应用时更加有利于用户区分不同的待加载图片，提升了用户的视觉体验。

进一步，在确定初步主题色之后对其饱和度和亮度进行了调整，使之归属于预置的区间，这样避免了同一页面中多个待加载图片的占位背景色的亮度和饱和度抖动过大，影响用户视觉体验的问题。

可选的，本申请实施例公开了上述初步主题色调整单元72的一种可选结构，如图8所示，初步主题色调整单元72可以包括：

第一初步主题色调整子单元721，用于判断所述初步主题色的饱和度是否超过饱和度阈值，若是，将所述初步主题色的饱和度乘以预置的饱和度偏移比例值；

第二初步主题色调整子单元722，用于判断所述初步主题色的亮度是否超过亮度阈值，若是，将所述初步主题色的亮度乘以预置的亮度偏移比例值。

可选的，本申请实施例公开了上述占位背景色确定装置的另一种可选结构，结合图7和图9可知，该装置还可以包括：

图片亮度均值确定单元74，用于在所述初步主题色调整单元72之后，确定所述待加载图片中各像素点的亮度平均值；

亮度对比单元75，用于判断所述调整后主题色的亮度与所述亮度平均值的偏差是否超过预置最大偏差值；

亮度调整单元76，用于在所述亮度对比单元75的判断结果为是时，利用所述亮度平均值再次调整所述调整后主题色的亮度，得到二次调整后主题色；

所述占位背景色确定单元73具体用于将所述二次调整后主题色确定为所述待加载图片的占位背景色。

可选的，本申请实施例公开了上述初步主题色确定单元71的一种可选结构，如图10所示，初步主题色确定单元71可以包括：

颜色比例计算单元711，用于采用八叉树算法确定所述待加载图片中各种类颜色所占的比例；

主题色选取单元712，用于在所述待加载图片所包含的各种类颜色中，选取非预置颜色的比例最高的颜色，作为初步主题色。

可选的，本申请实施例公开了上述占位背景色确定装置的又一种可选结构，结合图7和图11可知，该装置还可以包括：

主题色判断单元77，用于在所述占位背景色确定单元73之前，判断所述调整后主题色是否与页面底色相同，所述页面为展示所述待加载图片的页面；

色相处理单元78，用于在所述主题色判断单元77判断结果为是时，对所述调整后主题色进行色相调整处理；

则所述占位背景色确定单元73具体用于将色相调整处理后的主题色确定为所述待加载图片的占位背景色。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本申请。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下，在其它实施例中实现。因此，本申请将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。