CN111862271B - 显示区域填充方法、装置、设备及存储介质 - Google Patents

Abstract

本发明实施例公开了显示区域填充方法、装置、设备及存储介质。其中，该方法包括：检测到图片显示界面的区域填充事件被触发时，基于预设尺寸比例获取待显示图片的边缘图像数据，利用预设聚类算法对边缘图像数据中的像素点按照颜色值进行聚类，并根据聚类结果确定相应的目标颜色值，基于目标颜色值对图片显示界面中的待填充区域进行填充，其中，待填充区域包括待显示图片之外的显示区域。本发明实施例提供的技术方案，能够更加准确地确定目标颜色值，进而基于目标颜色值对与待显示图片邻接的空白区域进行填充后，可提升图片显示界面的美观度。

Description

显示区域填充方法、装置、设备及存储介质

技术领域

本发明实施例涉及计算机技术领域，尤其涉及显示区域填充方法、装置、设备及存储介质。

背景技术

目前，很多电子设备都配置有显示屏，可以利用显示屏显示文字以及图片等内容。

在进行图片显示时，通常在图片显示界面中进行，也即图片显示界面中包含需要显示的图片。然而，若图片显示界面和图片的显示尺寸或比例不匹配，则会导致图片无法占满整个图片显示界面，图片显示界面中除了图片显示区域之外的区域(可称为空白区域)就会因没有实际的显示内容而显得比较突兀，影响界面的美观。尤其是对于一些全屏显示场景，如全屏播放场景、全屏浏览场景、全屏编辑场景以及屏幕保护场景等，此时，图片显示界面会占满整个显示屏，而上述空白区域也会随之变大，影响整个显示屏画面的美观。

针对上述存在空白区域的问题，现有技术中普遍采用填充颜色的方式来解决，如填充纯白色或纯黑色，然而，目前的填充方案效果并不理想，需要改进。

发明内容

本发明实施例提供了显示区域填充方法、装置、设备及存储介质，可以优化现有的图片显示界面的显示方案。

第一方面，本发明实施例提供了一种显示区域填充方法，该方法包括：

检测到图片显示界面的区域填充事件被触发时，基于预设尺寸比例获取待显示图片的边缘图像数据；

利用预设聚类算法对所述边缘图像数据中的像素点按照颜色值进行聚类，并根据聚类结果确定相应的目标颜色值；

基于所述目标颜色值对所述图片显示界面中的待填充区域进行填充，其中，所述待填充区域包括所述待显示图片之外的显示区域。

第二方面，本发明实施例提供了一种显示区域填充装置，该装置包括：

边缘图像数据获取模块，用于在检测到图片显示界面的区域填充事件被触发时，基于预设尺寸比例获取待显示图片的边缘图像数据；

目标颜色值确定模块，用于利用预设聚类算法对所述边缘图像数据中的像素点按照颜色值进行聚类，并根据聚类结果确定相应的目标颜色值；

区域填充模块，用于基于所述目标颜色值对所述图片显示界面中的待填充区域进行填充，其中，所述待填充区域包括所述待显示图片之外的显示区域。

第三方面，本发明实施例提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如本发明实施例提供的显示区域填充方法。

第四方面，本发明实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本发明实施例提供的显示区域填充方法。

本发明实施例中提供的显示区域填充方案，检测到图片显示界面的区域填充事件被触发时，基于预设尺寸比例获取待显示图片的边缘图像数据，利用预设聚类算法对边缘图像数据中的像素点按照颜色值进行聚类，并根据聚类结果确定相应的目标颜色值，基于目标颜色值对所述图片显示界面中的待填充区域进行填充，其中，待填充区域包括待显示图片之外的显示区域。通过采用上述技术方案，以待显示图片的边缘图像数据为依据确定目标颜色值，可以使得目标颜色值与图片边缘的颜色特征更加匹配，且采用聚类的方式确定目标颜色值，能够更加准确地确定目标颜色值，进而基于目标颜色值对与待显示图片邻接的空白区域进行填充后，可提升图片显示界面的美观度。

附图说明

图1为本发明实施例提供的一种显示区域填充方法的流程示意图；

图2为本发明实施例提供的一种待填充区域示意图；

图3为本发明实施例提供的另一种待填充区域示意图；

图4为本发明实施例提供的又一种待填充区域示意图；

图5为本发明实施例提供的另一种显示区域填充方法的流程示意图；

图6为本发明实施例提供的一种显示区域填充装置的结构框图；

图7为本发明实施例提供的一种电子设备的结构框图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。此外，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。

为了便于理解，先对相关技术进行介绍。为了减少上文所述的空白区域对界面美观度的影响，可以对空白区域进行颜色填充，具体的填充方式可以有以下三种：

第一种，读取待显示图片的图片数据，统计每一个颜色值出现的次数，然后按照出现次数的大小排序，截取次数大于一定值的颜色值得到颜色组，最后按照颜色明亮度排序，生成渐变背景，将渐变背景填充到整个图片显示界面(待显示图片下层)，进而实现空白区域的填充。这种方式计算复杂度会随着图片尺寸的变大而增大，影响设备性能。并且，在感官上颜色相同的颜色值实际上可能会不同，也就是说，实际上图片中的颜色看上去虽然是同一种，但是颜色值会不一样，例如颜色值#FFB6C1和颜色值#FFC0CB看起来都是粉色，肉眼很难进行区分，但实际两者颜色值是不同的，基于颜色值进行统计，会拉低粉色类颜色的统计值，导致排序结果不准确，进而采用不正确的颜色作渐变。例如，颜色值#FFB6C1对应的出现次数为100次，颜色值#FFC0CB对应的出现次数为120次，而颜色值#0000FF(纯蓝色)对应的出现值为130次，因此，#0000FF会排在#FFB6C1和#FFC0CB前面，导致#FFB6C1和#FFC0CB无法被截取进入颜色组，但实际上，从感官上来说，粉色的出现次数更多，取到的蓝色可能在整个图片中出现次数并不算多，根据蓝色生成背景渐变色会影响最终的显示效果。

第二种，将待显示的图片放大后，将其模糊化作为背景填充到整个图片显示界面。若采用这种方式，当图片本身颜色较多时，会导致背景色很乱，难以满足大众审美，依然会影响美观，且对设备性能要求较高，不太适合在低端设备(如配置较低的手机)上，普适性较差。

第三种，取待显示的图片的边缘一行或一列像素的数据，然后将其平铺到整个图片显示界面，这种方式如果在一行或一列像素里有不同颜色值，不同颜色值的差异也会随之放大，产生明显的线纹，影响美观。

本发明实施例中，基于预设尺寸比例获取待显示图片的边缘图像数据，利用聚类算法确定边缘图像数据中的目标颜色值，并基于目标颜色值进行填充，可以更加合理地确定目标颜色值，得到更好的填充效果。

图1为本发明实施例提供的一种显示区域填充方法的流程示意图，该方法可以由显示区域填充装置执行，其中该装置可由软件和/或硬件实现，一般可集成在电子设备中。如图1所示，该方法包括：

步骤101、检测到图片显示界面的区域填充事件被触发时，基于预设尺寸比例获取待显示图片的边缘图像数据。

示例性的，图片显示界面可以理解为需要显示图片的界面，该界面可以是图片预览界面、图片浏览界面、图片编辑页面、图片动态播放页面以及屏幕保护页面等等。可预先设置图片显示界面的区域填充事件的触发条件，区域填充事件具体可以是针对图片显示界面中的除待显示图片之外的显示区域进行填充的事件，为便于描述，将该区域记为待填充区域或空白区域。图片显示界面的尺寸和显示比例可以根据实际的显示需求进行设置，其中，图片显示界面的尺寸小于或等于显示屏的尺寸，图片显示界面的显示比例可自由设置。为了便于说明，以图片显示界面的尺寸和显示比例均与显示屏一致为例，也即以图片显示界面为全屏显示的情况为例，进行后续说明。

示例性的，当图片显示界面和需要显示的图片(待显示图片)的显示尺寸或比例(如高宽比)不匹配时，待显示图片无法占满整个图片显示界面，因此，就会产生待填充区域，可将待显示图片与图片显示界面的显示尺寸或显示比例不匹配作为图片显示界面的区域填充事件被触发的条件。例如，检测到图片显示界面的区域填充事件被触发，包括：检测到待显示图片的高宽比与图片显示界面的高宽比不匹配时或者检测到待显示图片的尺寸小于图片显示界面的尺寸时，确定检测到图片显示界面的区域填充事件被触发。

示例性的，预设尺寸比例可根据实际需求进行设置，一般大于0且小于或等于50％。待显示图片的上下左右四个边缘分别对应的预设尺寸比例可以相同也可以不同，例如，上边缘和下边缘对应第一预设尺寸比例，左边缘和右边缘对应第二预设尺寸比例，第一预设尺寸比例和第二预设尺寸比例可以相同也可以不同。本步骤中所获取的边缘图像数据可包括任意一个边缘或多个边缘对应的边缘图像数据，可根据待填充区域与待显示图片的相对位置确定。例如，针对待显示图片的每个边缘，若存在与当前边缘邻接的待填充区域，则将所述当前边缘确定为目标边缘，基于与所述目标边缘对应的预设尺寸比例获取所述目标边缘对应的边缘图像数据。

示例性的，假设预设尺寸比例为η％，待显示图片的显示尺寸为M*N，其中，M表示宽度，N表示高度，以上边缘为例，计算待获取图片区域，待获取图片区域的宽度为M，高度为η％*N，且待获取图片区域的上边缘与待显示图片的上边缘重合，获取待获取图片区域的图像数据作为边缘图像数据。

步骤102、利用预设聚类算法对所述边缘图像数据中的像素点按照颜色值进行聚类，并根据聚类结果确定相应的目标颜色值。

其中，预设聚类算法可以根据实际需求设置，例如可以是K均值(k-means)聚类算法、均值漂移(Mean-Shift)聚类算法、基于密度的聚类方法以及凝聚层次聚类算法等等。颜色值具体可以是RGB颜色值(其中，R表示红色Red，G表示绿色Green，B表示蓝色Blue)，也可以是十六进制颜色码。通过聚类的方式，可以将颜色值相近的像素点归总到一起，形成聚类簇，再根据聚类结果确定相应的目标颜色值用于待填充区域的填充，可以很好地避免上述第一种填充方式中出现的颜色值确定得不准确的情况发生。

步骤103、基于所述目标颜色值对所述图片显示界面中的待填充区域进行填充，其中，所述待填充区域包括所述待显示图片之外的显示区域。

本发明实施例中，以上述确定的目标颜色值为基准对待填充区域进行填充，具体的填充方式不做限定，可以根据实际需求进行设置。例如，当目标颜色值为一个时，可以采用目标颜色值对待填充区域进行纯色填充，也即将待填充区域中的每个像素的颜色值都设置为目标颜色值；又如，当目标颜色值为多个(两个或更多)时，可以采用目标颜色值对待填充区域进行渐变填充，具体的渐变方式以及采用的渐变算法等不做限定；再如，当目标颜色值为多个(两个或更多)时，也可以采用目标颜色值对图片显示界面进行渐变填充，得到待显示图片的显示背景，在对待显示图片进行显示时，待显示图片位于显示背景的上层，也即待显示图片会覆盖显示背景中的部分区域，未被覆盖的区域与待填充区域相对应，其中，具体的渐变方式以及采用的渐变算法等也不做限定。

本发明实施例中提供的显示区域填充方法，检测到图片显示界面的区域填充事件被触发时，基于预设尺寸比例获取待显示图片的边缘图像数据，利用预设聚类算法对边缘图像数据中的像素点按照颜色值进行聚类，并根据聚类结果确定相应的目标颜色值，基于目标颜色值对所述图片显示界面中的待填充区域进行填充，其中，待填充区域包括待显示图片之外的显示区域。通过采用上述技术方案，以待显示图片的边缘图像数据为依据确定目标颜色值，可以使得目标颜色值与图片边缘的颜色特征更加匹配，且采用聚类的方式确定目标颜色值，能够更加准确地确定目标颜色值，进而基于目标颜色值对与待显示图片邻接的空白区域进行填充后，可提升图片显示界面的美观度。

在一些实施例中，当检测到待显示图片的高宽比小于所述图片显示界面的高宽比时，所述基于预设尺寸比例获取待显示图片的边缘图像数据，包括：基于第一预设尺寸比例获取待显示图片的上边缘图像数据和下边缘图像数据。相应的，所述利用预设聚类算法对所述边缘图像数据中的像素点按照颜色值进行聚类，并根据聚类结果确定目标颜色值，包括：利用第一预设聚类算法分别对所述上边缘图像数据和所述下边缘图像数据中的像素点按照颜色值进行聚类，并根据聚类结果分别确定相应的第一目标颜色值和第二目标颜色值。相应的，所述基于所述目标颜色值对所述图片显示界面中的待填充区域进行填充，包括：基于所述第一目标颜色值和所述第二目标颜色值从所述图片显示界面的上边缘至下边缘进行渐变渲染，以实现对待填充区域进行填充。这样设置的好处在于，可以针待显示图片的高宽比小于图片显示界面的高宽比的情况进行优化，采用渐变方式实现对待填充区域的填充，使得待显示图片与邻接的待填充区域之间过渡自然，进一步提升界面美观度。

示例性的，当待显示图片的高宽比小于图片显示界面的高宽比时，一般为了美观，会将待显示图片的显示宽度与图片显示界面的显示宽度设置为相同，那么待填充区域可以仅位于待显示图片的上方和下方，也即，存在两个待填充区域，两个待填充区域的显示尺寸可以相同，使得待显示图片位于图片显示界面的正中央。图2为本发明实施例提供的一种待填充区域示意图，如图2所示，图片显示界面200中包含了待显示图片对应的显示区域201、第一待填充区域202和第二待填充区域203，第一待填充区域202和第二待填充区域203的尺寸相同。

可选的，当待显示图片的高宽比与图片显示界面的高宽比相差较小时，也即待填充区域较小时，为了提升图片显示效率，也可以不进行待填充区域的填充操作。示例性的，当检测到待显示图片的高宽比小于所述图片显示界面的高宽比，且两者差值大于第一预设比例差值时，确定检测到图片显示界面的区域填充事件被触发。此外，对于图片显示界面为全屏显示的情况，由于一个电子设备而言，显示屏的高宽比例是一定的(如2)，那么可预先设置第一高宽比阈值(如5/3)，当待显示图片的高宽比小于第一高宽比阈值时，确定检测到图片显示界面的区域填充事件被触发。

示例性的，由于存在上下两个待填充区域，可以针对每个待填充区域分别确定目标颜色值，得到第一目标颜色值和第二目标颜色值，第一目标颜色值符合待显示图片的上边缘区域的颜色特征，第二目标颜色值符合待显示图片的下边缘区域的颜色特征，从图片显示界面的上边缘至下边缘，由第一目标颜色值渐变至第二目标颜色值，使得待显示图片与邻接的待填充区域之间实现自然的颜色过渡。

在一些实施例中，当检测到待显示图片的高宽比大于所述图片显示界面的高宽比时，所述基于预设尺寸比例获取待显示图片的边缘图像数据，包括：基于第二预设尺寸比例获取待显示图片的左边缘图像数据和右边缘图像数据。相应的，所述利用预设聚类算法对所述边缘图像数据中的像素点按照颜色值进行聚类，并根据聚类结果确定目标颜色值，包括：利用第二预设聚类算法分别对所述左边缘图像数据和所述右边缘图像数据中的像素点按照颜色值进行聚类，并根据聚类结果分别确定相应的第三目标颜色值和第四目标颜色值。相应的，所述基于所述目标颜色值对所述图片显示界面中的待填充区域进行填充，包括：基于所述第三目标颜色值和所述第四目标颜色值从所述图片显示界面的左边缘至右边缘进行渐变渲染，以实现对待填充区域进行填充。这样设置的好处在于，可以针待显示图片的高宽比大于图片显示界面的高宽比的情况进行优化，采用渐变方式实现对待填充区域的填充，使得待显示图片与邻接的待填充区域之间过渡自然，进一步提升界面美观度。

示例性的，当待显示图片的高宽比大于图片显示界面的高宽比时，一般为了美观，会将待显示图片的显示高度与图片显示界面的显示高度设置为相同，那么待填充区域可以仅位于待显示图片的左侧和右侧，也即，存在两个待填充区域，两个待填充区域的显示尺寸可以相同，使得待显示图片位于图片显示界面的正中央。图3为本发明实施例提供的另一种待填充区域示意图，如图3所示，图片显示界面300中包含了待显示图片对应的显示区域301、第一待填充区域302和第二待填充区域303，第一待填充区域302和第二待填充区域303的尺寸相同。

可选的，当待显示图片的高宽比与图片显示界面的高宽比相差较小时，也即待填充区域较小时，为了提升图片显示效率，也可以不进行待填充区域的填充操作。示例性的，当检测到待显示图片的高宽比大于所述图片显示界面的高宽比，且两者差值大于第二预设比例差值时，确定检测到图片显示界面的区域填充事件被触发。此外，对于图片显示界面为全屏显示的情况，由于一个电子设备而言，显示屏的高宽比例是一定的(如2)，那么可预先设置第二高宽比阈值(如7/3)，当待显示图片的高宽比大于第二高宽比阈值时，确定检测到图片显示界面的区域填充事件被触发。

示例性的，由于存在左右两个待填充区域，可以针对每个待填充区域分别确定目标颜色值，得到第三目标颜色值和第四目标颜色值，第三目标颜色值符合待显示图片的左边缘区域的颜色特征，第四目标颜色值符合待显示图片的右边缘区域的颜色特征，从图片显示界面的左边缘至右边缘，由第三目标颜色值渐变至第四目标颜色值，使得待显示图片与邻接的待填充区域之间实现自然的颜色过渡。

在一些实施例中，当检测到待显示图片的显示尺寸小于图片显示界面的显示尺寸时，所述基于预设尺寸比例获取待显示图片的边缘图像数据，包括：基于第一预设尺寸比例获取待显示图片的上边缘图像数据和下边缘图像数据，和/或，基于第二预设尺寸比例获取待显示图片的左边缘图像数据和右边缘图像数据；相应的，所述利用预设聚类算法对所述边缘图像数据中的像素点按照颜色值进行聚类，并根据聚类结果确定目标颜色值，包括：利用第一预设聚类算法分别对所述上边缘图像数据和所述下边缘图像数据中的像素点按照颜色值进行聚类，并根据聚类结果分别确定相应的第一目标颜色值和第二目标颜色值；和/或，利用第二预设聚类算法分别对所述左边缘图像数据和所述右边缘图像数据中的像素点按照颜色值进行聚类，并根据聚类结果分别确定相应的第三目标颜色值和第四目标颜色值；相应的，所述基于所述目标颜色值对所述图片显示界面中的待填充区域进行填充，包括：基于所述第一目标颜色值和所述第二目标颜色值从所述图片显示界面的上边缘至下边缘进行渐变渲染，和/或，基于所述第三目标颜色值和所述第四目标颜色值从所述图片显示界面的左边缘至右边缘进行渐变渲染，以实现对待填充区域进行填充。这样设置的好处在于，可以针待显示图片的显示尺寸比小于图片显示界面的显示尺寸的情况进行优化，采用渐变方式实现对待填充区域的填充，使得待显示图片与邻接的待填充区域之间过渡自然，进一步提升界面美观度。

示例性的，当待显示图片的显示尺寸小于图片显示界面的显示尺寸时，一般为了美观，可将待显示图片显示在图片显示界面的正中央，待填充区域将待显示图片包围。图4为本发明实施例提供的又一种待填充区域示意图，如图4所示，图片显示界面400中包含了待显示图片对应的显示区域401、待填充区域402，待填充区域402环绕显示区域401成为环形区域，待填充区域402的相平行的两个内边缘与对应的外边缘之间的距离相等，即图中的W₁＝W₂,W₃＝W₄。

示例性的，由于待填充区域与待显示图片的四个边缘均相邻，可以针对上下边缘分别确定两个目标颜色值，从上至下进行渐变渲染；也可以针对左右边缘分别确定两个目标颜色值，从左至右进行渐变渲染；也可以针对上下左右边缘分别确定四个目标颜色值，并进行两次渐变渲染(分别为从上至下和从左至右，所得到的显示背景可分别记为第一显示背景和第二显示背景)，将两次渐变渲染后得到的显示背景进行叠加处理，得到最终的填充效果，也即得到最终的显示背景。其中，叠加处理可以包括针对待填充区域中的每个像素点，将第一显示背景和第二显示背景中对应的颜色值相加，作为当前像素点的颜色值。进一步的，在进行叠加处理处理之前，还可以设置第一显示背景和第二显示背景的透明度，例如，将第一显示背景的透明度设置为第一透明度，将第二显示背景的透明度设置为第二透明度，第一透明度和第二透明度的具体数值可自由设置，可以相同(如均为50％)，也可不同。

在一些实施例中，利用预设聚类算法对边缘图像数据中的像素点按照颜色值进行聚类，并根据聚类结果确定相应的目标颜色值，包括：利用K均值聚类算法基于预设数量的初始中心点对边缘图像数据中的像素点按照颜色值进行聚类，得到所述预设数量的聚类簇，其中，每个初始中心点对应一个预设颜色值；根据所述预设数量的聚类簇确定相应的目标颜色值。这样设置的好处在于，可以高效地进行聚类操作，快速确定目标颜色值。预设数量可以根据实际需求设置，例如可以是8。初始中心点的对应的预设颜色值也可根据实际需求设置，一般可以将每两个初始中心点对应的颜色值设置得相差多一些，也即使初始中心点分散一些，提升聚类效果。

可选的，预设数量的初始中心点可以通过如下方式确定：确定第一数值和第二数值，第一数值大于或等于第一预设阈值(如31)，第二数值小于或等于255与第一预设阈值的差值，第二数值与第一数值的差值大于或等于第二预设阈值(如64)。例如，第一数值为a，第二数值为b，则a和b满足31<＝a，b<＝255-31，b-a>＝64。以RGB颜色值为例，每个颜色值都有红、绿和蓝3个色值，每个色值都在0到255之间，分别填入a和b，共有8种可能，即#aab，#abb，#aba，#baa，#bab，#bba和#bbb，分别对应8个初始中心点。假设a＝31，b＝94，转换为十六进制颜色码后，8个初始中心点分别为#1f1f1f，#1f1f5e，#1f5e1f，#1f5e5e，#5e1f1f，#5eif5e，#5e5e1f和#5e5e5e。

示例性的，当需要确定多个目标颜色值时，可利用K均值聚类算法分别确定对应的目标颜色值。例如，利用第一预设聚类算法分别对所述上边缘图像数据和所述下边缘图像数据中的像素点按照颜色值进行聚类，并根据聚类结果分别确定相应的第一目标颜色值和第二目标颜色值，可包括：利用K均值聚类算法基于预设数量的初始中心点对上边缘图像数据中的像素点按照颜色值进行聚类，得到预设数量的聚类簇，根据预设数量的聚类簇确定相应的第一目标颜色值；利用K均值聚类算法基于预设数量的初始中心点对下边缘图像数据中的像素点按照颜色值进行聚类，得到预设数量的聚类簇，根据预设数量的聚类簇确定相应的第二目标颜色值。同理，针对左边缘图像数据和右边缘图像数据也可进行上述类似操作，此处不再赘述。

在一些实施例中，所述根据所述预设数量的聚类簇确定相应的目标颜色值，包括：根据所述预设数量的聚类簇中包含像素点最多的聚类簇确定目标颜色值。这样设置的好处在于，像素点最多的聚类簇表明对应的相近颜色出现的总次数最多，更能体现待显示图片边缘的视觉上的颜色特征，进而更加准确地确定目标颜色值。

在一些实施例中，所述根据所述预设数量的聚类簇中包含像素点最多的聚类簇确定目标颜色值，包括：将所述预设数量的聚类簇中包含像素点最多的聚类簇记为最大聚类簇，获取所述最大聚类簇对应的像素点数量，作为最大像素点数量；根据所述最大像素点数量和预设比例值确定目标像素点数量范围；从所述预设数量的聚类簇中筛选出所对应的像素点数量处于所述目标像素点数量范围内的目标聚类簇；根据所述目标聚类簇确定对应的目标颜色值。这样设置的好处在于，可综合考虑像素点较多的聚类簇中的颜色值，更加合理地确定目标颜色值。其中，预设比例值可根据实际需求设置，预设比例值的范围可以大于第一比例阈值(如0.5)且小于或等于1。

在一些实施例中，所述根据所述目标聚类簇确定对应的目标颜色值包括：将所述目标聚类簇的中心点确定为候选中心点；基于预设条件从所述候选中心点中筛选出目标中心点；根据所述目标中心点确定对应的目标颜色值。这样设置的好处在于，随着聚类算法的迭代，每个簇的中心点会发生变化，中心点更能够代表整个簇的特征，因此，可筛选出目标中心点，进而确定对应的目标颜色值，使得目标颜色值的确定更加合理。其中，预设条件可自由设置，例如，可以基于中心点的亮度设置，也可以基于与中心点的颜色值相同的像素点数量设置。在一些实施例中，所述基于预设条件从所述候选中心点中筛选出目标中心点，包括：从所述候选中心点中筛选出颜色亮度最大的候选中心点，得到目标中心点。这样设置的好处在于，颜色亮度又称色彩明度，颜色亮度大的颜色可以从感官上得到更好的显示效果，更加符合大众用户的审美，可进一步提升图片显示界面的美观度。

在一些实施例中，所述利用K均值聚类算法基于预设数量的初始中心点对边缘图像数据中的像素点按照颜色值进行聚类，得到所述预设数量的聚类簇，包括：利用K均值聚类算法基于预设数量的初始中心点对边缘图像数据中的像素点按照颜色值进行聚类，当所述K均值聚类算法收敛或迭代次数达到预设次数阈值时结束聚类操作，得到所述预设数量的聚类簇。这样设置的好处在于，可以提高聚类效率，迭代次数可以根据实际需求设置。示例性的，迭代次数可根据待显示图片的尺寸或像素量总数来确定，还可根据电子设备的计算资源配置情况设置。例如，像素点总数为1000，迭代次数可设置为32。

在一些实施例中，基于预设尺寸比例获取待显示图片的边缘图像数据，包括：基于预设尺寸比例截取待显示图片的边缘图片；当所述边缘图片的宽度大于预设像素宽度时，对所述边缘图片进行等比例压缩至宽度等于所述预设像素宽度，得到边缘图像数据。这样设置的好处在于，当待显示图片尺寸较大时，截取的边缘图片的尺寸也会较大，像素点数量较多，计算量大，在进行等比例压缩后，可有效降低像素点数量，且能够保留颜色值的分布特点，有利于提升后续聚类操作的效率。其中，预设像素宽度和压缩算法均可根据实际需求设置。

图5为本发明实施例提供的另一种显示区域填充方法的流程示意图，该方法可包括：

步骤501、检测到待显示图片的高宽比小于图片显示界面的高宽比。

步骤502、基于第一预设尺寸比例获取待显示图片的上边缘图像数据和下边缘图像数据。

示例性的，第一预设尺寸比例可以是5％。

可选的，本步骤可包括：基于第一预设尺寸比例截取待显示图片的上边缘图片和下边缘图片，当上边缘图片的宽度大于预设像素宽度时，对上边缘图片进行等比例压缩至宽度等于预设像素宽度，得到上边缘图像数据，当下边缘图片的宽度大于预设像素宽度时，对下边缘图片进行等比例压缩至宽度等于预设像素宽度，得到下边缘图像数据。其中，预设像素宽度可记为k，例如k可以是100。这样，压缩后的边缘图片对应的边缘图像数据中包含的像素点数量为100*100*r*5％，其中，r表示待显示图片的高宽比。一般的，电子设备的屏幕高宽比为2，所以，在进行聚类操作时需要处理的像素点数量在1000以内，可以对运算时间进行有效控制，不会因为图片像素点的增多而增加运算时间。

步骤503、利用K均值聚类算法基于预设数量的初始中心点对上边缘图像数据中的像素点按照颜色值进行聚类，得第一聚类簇集合。

其中，第一聚类簇集合中包含的聚类簇的数量与初始中心点的数量相同。

示例性的，可设置8个初始中心点，分别为#1f1f1f，#1f1f5e，#1f5e1f，#1f5e5e，#5e1f1f，#5eif5e，#5e5e1f和#5e5e5e。当K均值聚类算法收敛或迭代次数达到预设次数阈值时结束聚类操作，迭代次数例如可以是32。这样，在进行聚类操作时，总共计算距离的次数不会超过1000*8*32＝256K，一般低端电子设备(以iphone4s手机为例)的CPU的计算频率是800MHz，即一秒可以运算800M次，基本上可以在1ms以内完成聚类运算。

步骤504、将第一聚类簇集合中包含像素点最多的聚类簇记为第一聚类簇，根据第一聚类簇的像素点数量和预设比例值确定第一目标像素点数量范围，从第一聚类簇集合中筛选出所对应的像素点数量处于第一目标像素点数量范围内的第一目标聚类簇。

步骤505、将第一目标聚类簇的中心点确定为第一候选中心点，从第一候选中心点中筛选出颜色亮度最大的候选中心点，得到第一目标中心点，根据第一目标中心点确定对应的第一目标颜色值。

步骤506、利用K均值聚类算法基于预设数量的初始中心点对下边缘图像数据中的像素点按照颜色值进行聚类，得第二聚类簇集合。

其中，第二聚类簇集合中包含的聚类簇的数量与初始中心点的数量相同。

步骤507、将第二聚类簇集合中包含像素点最多的聚类簇记为第二聚类簇，根据第二聚类簇的像素点数量和预设比例值确定第二目标像素点数量范围，从第二聚类簇集合中筛选出所对应的像素点数量处于第二目标像素点数量范围内的第二目标聚类簇。

步骤508、将第二目标聚类簇的中心点确定为第二候选中心点，从第二候选中心点中筛选出颜色亮度最大的候选中心点，得到第二目标中心点，根据第二目标中心点确定对应的第二目标颜色值。

可选的，步骤503-步骤505与步骤506-步骤508可采用并行的方式进行(如分为两个线程分别执行)，可进一步提升确定目标颜色值的效率，进而提升图片显示效率。

步骤509、基于第一目标颜色值和第二目标颜色值从图片显示界面的上边缘至下边缘进行渐变渲染，得到显示背景。

示例性的，得到的显示背景的显示效果为从上至下由第一目标颜色值渐变至第二目标颜色值。

步骤510、对待显示图片和显示背景进行显示，其中，待显示图像位于显示背景的上层。

本发明实施例提供的显示区域填充方法，截取待显示图片的上下边缘图片，当所截取的图片尺寸较大时进行等比例压缩，得到上下边缘图像数据，利用K-means算法针对上边缘图像数据和下边缘图像数据分别进行聚类，并根据聚类结果确定两个用于渐变渲染的目标颜色值，利用两个目标颜色值从图片显示界面的上边缘至下边缘进行渐变渲染，得到显示背景，将显示背景在待显示图片的下层进行显示，进而实现与待显示图片邻接的空白区域的颜色填充，有效提升图片显示界面的美观度。

图6为本发明实施例提供的一种显示区域填充装置的结构框图，该装置可由软件和/或硬件实现，一般可集成在电子设备中，可通过执行显示区域填充方法来进行显示区域的填充。如图6所示，该装置包括：

边缘图像数据获取模块601，用于在检测到图片显示界面的区域填充事件被触发时，基于预设尺寸比例获取待显示图片的边缘图像数据；

目标颜色值确定模块602，用于利用预设聚类算法对所述边缘图像数据中的像素点按照颜色值进行聚类，并根据聚类结果确定相应的目标颜色值；

区域填充模块603，用于基于所述目标颜色值对所述图片显示界面中的待填充区域进行填充，其中，所述待填充区域包括所述待显示图片之外的显示区域。

本发明实施例中提供的显示区域填充装置，以待显示图片的边缘图像数据为依据确定目标颜色值，可以使得目标颜色值与图片边缘的颜色特征更加匹配，且采用聚类的方式确定目标颜色值，能够更加准确地确定目标颜色值，进而基于目标颜色值对与待显示图片邻接的空白区域进行填充后，可提升图片显示界面的美观度。

本发明实施例提供了一种电子设备，该电子设备中可集成本发明实施例提供的显示区域填充装置。图6为本发明实施例提供的一种电子设备的结构框图。电子设备600包括存储器601、处理器602及存储在存储器601上并可在处理器602上运行的计算机程序，所述处理器602执行所述计算机程序时实现本发明实施例提供的显示区域填充方法。

本发明实施例还提供一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行本发明实施例提供的显示区域填充方法。

上述实施例中提供的显示区域填充装置、设备以及存储介质可执行本发明任意实施例所提供的显示区域填充方法，具备执行该方法相应的功能模块和有益效果。未在上述实施例中详尽描述的技术细节，可参见本发明任意实施例所提供的显示区域填充方法。

注意，上述仅为本发明的较佳实施例。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由权利要求范围决定。

Claims (12)

1.一种显示区域填充方法，其特征在于，包括：

检测到图片显示界面的区域填充事件被触发时，基于预设尺寸比例获取待显示图片的边缘图像数据；

利用预设聚类算法对所述边缘图像数据中的像素点按照颜色值进行聚类，并根据聚类结果确定相应的目标颜色值；

基于所述目标颜色值对所述图片显示界面中的待填充区域进行填充，其中，所述待填充区域包括所述待显示图片之外的显示区域；

所述利用预设聚类算法对所述边缘图像数据中的像素点按照颜色值进行聚类，并根据聚类结果确定相应的目标颜色值，包括：

利用K均值聚类算法基于预设数量的初始中心点对边缘图像数据中的像素点按照颜色值进行聚类，得到预设数量的聚类簇，其中，每个初始中心点对应一个预设颜色值；所述每个初始中心点分散设置；

根据所述预设数量的聚类簇确定相应的目标颜色值；

所述根据所述预设数量的聚类簇确定相应的目标颜色值，包括：

根据所述预设数量的聚类簇中包含像素点最多的聚类簇确定目标颜色值；

所述根据所述预设数量的聚类簇中包含像素点最多的聚类簇确定目标颜色值，包括：

将所述预设数量的聚类簇中包含像素点最多的聚类簇记为最大聚类簇，获取所述最大聚类簇对应的像素点数量，作为最大像素点数量；

根据所述最大像素点数量和预设比例值确定目标像素点数量范围；

从所述预设数量的聚类簇中筛选出所对应的像素点数量处于所述目标像素点数量范围内的目标聚类簇；

根据所述目标聚类簇确定对应的目标颜色值。

2.根据权利要求1所述的方法，其特征在于，所述检测到图片显示界面的区域填充事件被触发，包括：

检测到待显示图片的高宽比与图片显示界面的高宽比不匹配时或者检测到待显示图片的显示尺寸小于图片显示界面的显示尺寸时，确定检测到图片显示界面的区域填充事件被触发。

3.根据权利要求2所述的方法，其特征在于，

当检测到待显示图片的高宽比小于所述图片显示界面的高宽比时，所述基于预设尺寸比例获取待显示图片的边缘图像数据，包括：

基于第一预设尺寸比例获取待显示图片的上边缘图像数据和下边缘图像数据；

相应的，所述利用预设聚类算法对所述边缘图像数据中的像素点按照颜色值进行聚类，并根据聚类结果确定相应的目标颜色值，包括：

利用第一预设聚类算法分别对所述上边缘图像数据和所述下边缘图像数据中的像素点按照颜色值进行聚类，并根据聚类结果分别确定相应的第一目标颜色值和第二目标颜色值；

相应的，所述基于所述目标颜色值对所述图片显示界面中的待填充区域进行填充，包括：

基于所述第一目标颜色值和所述第二目标颜色值从所述图片显示界面的上边缘至下边缘进行渐变渲染，以实现对待填充区域进行填充。

4.根据权利要求2所述的方法，其特征在于，

当检测到待显示图片的高宽比大于所述图片显示界面的高宽比时，所述基于预设尺寸比例获取待显示图片的边缘图像数据，包括：

基于第二预设尺寸比例获取待显示图片的左边缘图像数据和右边缘图像数据；

相应的，所述利用预设聚类算法对所述边缘图像数据中的像素点按照颜色值进行聚类，并根据聚类结果确定相应的目标颜色值，包括：

利用第二预设聚类算法分别对所述左边缘图像数据和所述右边缘图像数据中的像素点按照颜色值进行聚类，并根据聚类结果分别确定相应的第三目标颜色值和第四目标颜色值；

相应的，所述基于所述目标颜色值对所述图片显示界面中的待填充区域进行填充，包括：

基于所述第三目标颜色值和所述第四目标颜色值从所述图片显示界面的左边缘至右边缘进行渐变渲染，以实现对待填充区域进行填充。

5.根据权利要求2所述的方法，其特征在于，

当检测到待显示图片的显示尺寸小于图片显示界面的显示尺寸时，所述基于预设尺寸比例获取待显示图片的边缘图像数据，包括：

基于第一预设尺寸比例获取待显示图片的上边缘图像数据和下边缘图像数据，和/或，基于第二预设尺寸比例获取待显示图片的左边缘图像数据和右边缘图像数据；

相应的，所述利用预设聚类算法对所述边缘图像数据中的像素点按照颜色值进行聚类，并根据聚类结果确定相应的目标颜色值，包括：

利用第一预设聚类算法分别对所述上边缘图像数据和所述下边缘图像数据中的像素点按照颜色值进行聚类，并根据聚类结果分别确定相应的第一目标颜色值和第二目标颜色值；和/或，利用第二预设聚类算法分别对所述左边缘图像数据和所述右边缘图像数据中的像素点按照颜色值进行聚类，并根据聚类结果分别确定相应的第三目标颜色值和第四目标颜色值；

相应的，所述基于所述目标颜色值对所述图片显示界面中的待填充区域进行填充，包括：

基于所述第一目标颜色值和所述第二目标颜色值从所述图片显示界面的上边缘至下边缘进行渐变渲染，和/或，基于所述第三目标颜色值和所述第四目标颜色值从所述图片显示界面的左边缘至右边缘进行渐变渲染，以实现对待填充区域进行填充。

6.根据权利要求1所述的方法，其特征在于，所述根据所述目标聚类簇确定对应的目标颜色值包括：

将所述目标聚类簇的中心点确定为候选中心点；

基于预设条件从所述候选中心点中筛选出目标中心点；

根据所述目标中心点确定对应的目标颜色值。

7.根据权利要求6所述的方法，其特征在于，所述基于预设条件从所述候选中心点中筛选出目标中心点，包括：

从所述候选中心点中筛选出颜色亮度最大的候选中心点，得到目标中心点。

8.根据权利要求1所述的方法，其特征在于，所述利用K均值聚类算法基于预设数量的初始中心点对边缘图像数据中的像素点按照颜色值进行聚类，得到所述预设数量的聚类簇，包括：

利用K均值聚类算法基于预设数量的初始中心点对边缘图像数据中的像素点按照颜色值进行聚类，当所述K均值聚类算法收敛或迭代次数达到预设次数阈值时结束聚类操作，得到所述预设数量的聚类簇。

9.根据权利要求1-5任一所述的方法，其特征在于，基于预设尺寸比例获取待显示图片的边缘图像数据，包括：

基于预设尺寸比例截取待显示图片的边缘图片；

当所述边缘图片的宽度大于预设像素宽度时，对所述边缘图片进行等比例压缩至宽度等于所述预设像素宽度，得到边缘图像数据。

10.一种显示区域填充装置，其特征在于，包括：

边缘图像数据获取模块，用于在检测到图片显示界面的区域填充事件被触发时，基于预设尺寸比例获取待显示图片的边缘图像数据；

目标颜色值确定模块，用于利用预设聚类算法对所述边缘图像数据中的像素点按照颜色值进行聚类，并根据聚类结果确定相应的目标颜色值；

区域填充模块，用于基于所述目标颜色值对所述图片显示界面中的待填充区域进行填充，其中，所述待填充区域包括所述待显示图片之外的显示区域；

所述目标颜色值确定模块，具体用于：

利用K均值聚类算法基于预设数量的初始中心点对边缘图像数据中的像素点按照颜色值进行聚类，得到预设数量的聚类簇，其中，每个初始中心点对应一个预设颜色值；所述每个初始中心点分散设置；

根据所述预设数量的聚类簇确定相应的目标颜色值；

所述根据所述预设数量的聚类簇确定相应的目标颜色值，包括：

根据所述预设数量的聚类簇中包含像素点最多的聚类簇确定目标颜色值；

所述根据所述预设数量的聚类簇中包含像素点最多的聚类簇确定目标颜色值，包括：

将所述预设数量的聚类簇中包含像素点最多的聚类簇记为最大聚类簇，获取所述最大聚类簇对应的像素点数量，作为最大像素点数量；

根据所述最大像素点数量和预设比例值确定目标像素点数量范围；

从所述预设数量的聚类簇中筛选出所对应的像素点数量处于所述目标像素点数量范围内的目标聚类簇；

根据所述目标聚类簇确定对应的目标颜色值。

11.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1-9任一项所述的方法。

12.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-9中任一所述的方法。