CN114692034A - 图像显示方法、装置、电子设备及计算机存储介质 - Google Patents

Abstract

本说明书实施例公开一种图像显示方法、装置、电子设备及介质，所述方法包括：获取待显示的目标图像，确定所述目标图像的第一背景区域；基于所述第一背景区域中包含的颜色信息，确定所述第一背景区域的目标颜色变化类型；基于所述目标颜色变化类型，确定图像显示区域中除所述目标图像所在区域以外的第二背景区域的颜色信息；基于所述第二背景区域的颜色信息，对所述第二背景区域进行填充并将所述目标图像显示在所述图像显示区域中。上述方案中，能够使图像显示区域的背景颜色根据目标图像的背景颜色进行自适应调整，有效改善了图像的显示效果。

Description

图像显示方法、装置、电子设备及计算机存储介质

技术领域

本说明书实施例涉及计算机技术领域，尤其涉及一种图像显示方法、装置、电子设备及计算机存储介质。

背景技术

随着科学技术的不断发展，网页信息中包含有越来越丰富的元素，如图像信息。举例来讲，网页的专题板块通常有对应的专题配图，网页上展示的广告内容对应有广告配图等。在网页上显示图像时，通常是在网页上预先设定好用于显示图像的图像显示区域，然后将图像以某种方式展示在图像显示区域中。

现有技术中，通常采用contain方式对图像进行显示，contain模式是按照图像的长边填充图像显示区域，保证整张图像均可以被看到，但由于图像的比例与图像显示区域的比例可能存在差异，导致图像显示区域的两侧出现空白，进而导致最终的图像显示效果不佳。

发明内容

本说明书实施例提供及一种图像显示方法、装置、电子设备及计算机存储介质。

第一方面，本说明书实施例提供一种图像显示方法，所述方法包括：

获取待显示的目标图像，确定所述目标图像的第一背景区域；

基于所述第一背景区域中包含的颜色信息，确定所述第一背景区域的目标颜色变化类型；

基于所述目标颜色变化类型，确定图像显示区域中除所述目标图像所在区域以外的第二背景区域的颜色信息；

基于所述第二背景区域的颜色信息，对所述第二背景区域进行填充并将所述目标图像显示在所述图像显示区域中。

可选地，所述基于所述第一背景区域中包含的颜色信息，确定所述第一背景区域的目标颜色变化类型，包括：

将所述目标图像划分为多个分区；

针对每个分区，基于该分区包含的所有像素的颜色信息，确定该分区的颜色值；

针对所述每个分区，基于该分区的颜色值，以及该分区的相邻分区的颜色值，确定该分区与相邻分区之间的颜色距离；

基于所述多个分区中相邻两个分区之间的颜色距离，确定所述第一背景区域。

可选地，所述基于所述多个分区中相邻两个分区之间的颜色距离，确定所述第一背景区域，包括：

按照分区位置由所述目标图像边缘到所述目标图像中间的顺序，依次选取每个分区作为目标分区，并执行以下步骤：确定所述目标分区与相邻分区之间的颜色距离是否大于阈值，若是，将所述目标分区的相邻分区标记为非背景分区，若否，将所述目标分区的相邻分区标记为背景分区；

基于所述背景分区，确定所述第一背景区域。

可选地，所述基于所述第一背景区域中包含的颜色信息，确定所述第一背景区域的目标颜色变化类型，包括：

确定所述第一背景区域中目标行或目标列对应的N个分区，N为正整数；

确定所述N个分区中每两个相邻分区之间的颜色距离是否满足预设颜色变化规律，若是，将所述预设颜色变化规律对应的颜色变化类型作为所述目标颜色变化类型，其中，所述预设颜色变化规律为预设的颜色变化规律库中的规律。

可选地，所述基于所述目标颜色变化类型，确定图像显示区域中除所述目标图像所在区域的第二背景区域的颜色信息，包括：

基于所述目标颜色变化类型，以及颜色变化类型与颜色信息预测方式之间的预设对应关系，确定与所述目标颜色变化类型对应的目标颜色信息预测方式；

基于所述目标颜色信息预测方式，确定所述第二背景区域的颜色信息。

可选地，所述基于所述目标颜色信息预测方式，确定所述第二背景区域的颜色信息，包括：

基于与所述目标图像相同的分区方式，将所述第二背景区域进行分区；

基于所述第一背景区域中包含的多个分区的颜色值，以及所述目标颜色信息预测方式，确定所述第二背景区域中各个分区的颜色信息。

可选地，在所述基于所述目标颜色变化类型，确定图像显示区域中除所述目标图像所在区域以外的第二背景区域的颜色信息之前，所述方法还包括：

确定所述目标图像在所述图像显示区域的显示位置；

基于所述显示位置，以及所述图像显示区域的尺寸，在所述图像显示区域中确定所述第二背景区域。

可选地，所述确定所述目标图像在所述图像显示区域的显示位置，包括：

确定所述目标图像以所述目标图像的长边对所述图像显示区域填充显示。

第二方面，本说明书实施例提供一种图像显示装置，该装置包括：

获取模块，用于获取待显示的目标图像，确定所述目标图像的第一背景区域；

颜色变化类型确定模块，用于基于所述第一背景区域中包含的颜色信息，确定所述第一背景区域的目标颜色变化类型；

颜色信息确定模块，用于基于所述目标颜色变化类型，确定图像显示区域中除所述目标图像所在区域以外的第二背景区域的颜色信息；

显示模块，用于基于所述第二背景区域的颜色信息，对所述第二背景区域进行填充并将所述目标图像显示在所述图像显示区域中。

可选地，所述获取模块，用于：

将所述目标图像划分为多个分区；

针对每个分区，基于该分区包含的所有像素的颜色信息，确定该分区的颜色值；

针对所述每个分区，基于该分区的颜色值，以及该分区的相邻分区的颜色值，确定该分区与相邻分区之间的颜色距离；

基于所述多个分区中相邻两个分区之间的颜色距离，确定所述第一背景区域。

可选地，所述获取模块，用于：

按照分区位置由所述目标图像边缘到所述目标图像中间的顺序，依次选取每个分区作为目标分区，并执行以下步骤：确定所述目标分区与相邻分区之间的颜色距离是否大于阈值，若是，将所述目标分区的相邻分区标记为非背景分区，若否，将所述目标分区的相邻分区标记为背景分区；

基于所述背景分区，确定所述第一背景区域。

可选地，所述颜色变化类型确定模块，用于：

确定所述第一背景区域中目标行或目标列对应的N个分区，N为正整数；

确定所述N个分区中每两个相邻分区之间的颜色距离是否满足预设颜色变化规律，若是，将所述预设颜色变化规律对应的颜色变化类型作为所述目标颜色变化类型，其中，所述预设颜色变化规律为预设的颜色变化规律库中的规律。

可选地，所述颜色信息确定模块，用于：

基于所述目标颜色变化类型，以及颜色变化类型与颜色信息预测方式之间的预设对应关系，确定与所述目标颜色变化类型对应的目标颜色信息预测方式；

基于所述目标颜色信息预测方式，确定所述第二背景区域的颜色信息。

可选地，所述颜色信息确定模块，用于：

基于与所述目标图像相同的分区方式，将所述第二背景区域进行分区；

基于所述第一背景区域中包含的多个分区的颜色值，以及所述目标颜色信息预测方式，确定所述第二背景区域中各个分区的颜色信息。

可选地，所述装置还包括：

位置确定模块，用于确定所述目标图像在所述图像显示区域的显示位置；

背景区域确定模块，用于基于所述显示位置，以及所述图像显示区域的尺寸，在所述图像显示区域中确定所述第二背景区域。

可选地，所述位置确定模块，用于：

确定所述目标图像以所述目标图像的长边对所述图像显示区域填充显示。

第三方面，本说明书实施例提供一种图像显示装置，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行上述图像显示方法的步骤。

第四方面，本说明书实施例提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述任一项所述方法的步骤。

本说明书实施例有益效果如下：

本说明书实施例提供的图像显示方法，在对待显示的目标图像进行显示时，确定目标图像的第一背景区域；基于第一背景区域中包含的颜色信息，确定第一背景区域的目标颜色变化类型；基于目标颜色变化类型，确定图像显示区域中除目标图像所在区域的第二背景区域的颜色信息，基于第二背景区域的颜色信息对第二背景区域进行天填充，并将目标图像显示在图像显示区域中。

上述方案中，通过对目标图像的第一背景区域的颜色信息进行分析，确定出图像显示区域中的第二背景的颜色信息，使第二背景的颜色信息与第一背景的颜色信息相适配，通过这种方式对图像显示区域中的背景区域进行填充，使图像显示区域中的背景区域能够自适应的根据目标图像的背景区域进行调整，使最终的显示效果更加协调，有效改善了目标图像在图像显示区域中的显示效果。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本说明书的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1为本说明书实施例第一方面提供的一种图像显示方法的流程图；

图2为本说明书实施例示出的采用contain方式在图像显示区域中显示目标图像的示意图；

图3为本说明书实施例第二方面提供的一种图像显示装置的示意图；

图4为本说明书实施例第三方面提供的一种图像显示装置的示意图。

具体实施方式

为了更好的理解上述技术方案，下面通过附图以及具体实施例对本说明书实施例的技术方案做详细的说明，应当理解本说明书实施例以及实施例中的具体特征是对本说明书实施例技术方案的详细的说明，而不是对本说明书技术方案的限定，在不冲突的情况下，本说明书实施例以及实施例中的技术特征可以相互组合。

第一方面，本说明书实施例提供一种图像显示方法，如图1所示，为本说明书实施例提供的一种图像显示方法的流程图，该方法包括以下步骤：

步骤S11：获取待显示的目标图像，确定目标图像的第一背景区域；

步骤S12：基于第一背景区域中包含的颜色信息，确定第一背景区域的目标颜色变化类型；

步骤S13：基于目标颜色变化类型，确定图像显示区域中除目标图像所在区域以外的第二背景区域的颜色信息；

步骤S14：基于第二背景区域的颜色信息，对第二背景区域填充并将目标图像显示在图像显示区域中。

本说明书中的图像显示方法，可以应用在图像显示的各个场景中，例如，网页中的图像显示场景、电子设备中的应用的界面图像显示场景等等，为了便于理解，本说明书实施例中，以网页中的图像显示场景为例来对本说明书实施例提供的图像显示方法进行说明。网页中包含有一个或多个图像显示区域，图像显示区域的位置和尺寸可以是预先设置好的，图像显示区域用来对目标图像进行展示。

步骤S11中，目标图像可以是用于显示在图像显示区域中的任意图像，不同宽高比的目标图像，在图像显示区域中的最终显示效果也可能不同。例如，若目标图像的宽高比与图像显示区域的宽高比相同，那么将目标图像进行显示时，为了达到最优的显示效果，可以将目标图像的尺寸等比例缩放到与图像显示区域相同的尺寸，然后以缩放后的尺寸将目标图像显示在目标显示区域中，即，目标图像可以完全填充在目标显示区域中，且保证目标图像的全部都可以被看到。这种情况下，则无需对目标显示区域进行任何处理。

若目标图像的宽高比与图像显示区域的宽高比不同，则可以采用contain方式对目标图像进行等比例缩放，并将缩放后的目标图像显示在图像显示区域中。由于二者的宽高比不同，则图像显示区域中会存在多余的空白区域，如图2所示。为了消除空白区域给视觉效果带来的影响，本说明书实施例中，可以通过目标图像的背景区域的颜色变化，来自适应的调整图像显示区域中的背景颜色。

具体实施过程中，在目标图像的宽高比与图像显示区域的宽高比不同时，需要确定出目标图像的第一背景区域。第一背景区域的获取可以通过多种方式来实现，例如，通过边缘检测、深度学习等方式来确定第一背景区域等。

本说明书实施例中，可以通过以下步骤来确定第一背景区域：将目标图像划分成多个分区；针对每个分区，基于该分区包含的所有像素的颜色信息，确定该分区的颜色值；针对每个分区，基于该分区的颜色值，以及该分区的相邻分区的颜色值，确定该分区与相邻分区之间的颜色距离；基于多个分区中相邻两个分区之间的颜色距离，确定第一背景区域。

具体来讲，将目标图像进行图像分割，分割成多个分区，具体的分割方式可以根据实际需要来进行选择，例如，可以根据预设的分区尺寸进行分割，也可以根据分区的总数量来进行分割。本说明书实施例中，可以将目标图像分别沿水平方向和垂直方向进行划分，且水平划分的分区数量和竖直划分的分区数量均大于预设数量，例如，预设数量为100，划分出的分区形状可以为矩形、正方形等，这里不做限定。

在得到多个分区之后，针对每个分区，确定该分区中包含的所有像素的颜色信息，颜色信息可以为rgba信息，基于该分区中每个像素的颜色信息，确定该分区的颜色值，例如，将该分区中每个像素的rgba信息进行平均计算，将得到的平均值作为该分区的颜色值。当然，也可以对该分区中的每个像素的颜色信息进行其他方式的处理，以得到该分区的颜色值，这里不做限定。

进一步的，得到各个分区的颜色值之后，计算每个分区与其相邻分区之间的颜色距离，在具体实施过程中，颜色距离可以采用CIEDE 2000色差公式或LAB颜色空间公式来计算。这样，对于目标图像中包含的多个分区，均可以得到任意相邻的两个分区之间的颜色距离。

基于多个分区中相邻两个分区之间的颜色距离，确定第一背景区域，可以通过以下方式来实现：按照分区位置由目标图像边缘到目标图像中间的顺序，依次选取每个分区作为目标分区，并执行以下步骤：确定目标分区与相邻分区之间的颜色距离是否大于阈值，若是，将目标分区的相邻分区标记为非背景分区，若否，将目标分区的相邻分区标记为背景分区；基于背景分区，确定第一背景区域。

具体来讲，目标图像由背景区域和非背景区域构成，在对目标图像划分成多个分区后，有的分区属于背景区域，有的分区属于非背景区域。本说明书实施例中，可以通过确定出属于背景区域的分区，来最终确定目标图像的第一背景区域。

需要说明的是，背景区域和非背景区域的颜色差异是比较明显的，即颜色距离较大，而背景区域内的颜色差异是比较小的，即颜色距离较小。另外，背景区域通常处于目标图像的边缘，而非背景区域通常处于目标图像的中心位置，因此，本说明书实施例中，可以按照从图像边缘向中间扩展的方式，依次确定每个分区是否属于背景区域。具体来讲，可以先选取位于目标图像边缘的分区作为目标分区，计算该分区与其相邻分区之间的颜色距离，若颜色距离均小于等于阈值，则相邻分区属于背景区域，将相邻分区标记为背景分区。接下来，可以沿边缘到中心的方向，选取与上个分区相邻的分区作为目标分区，并计算该分区与其相邻分区之间的颜色距离，若该分区不处于图像的边缘，且存在与该分区的颜色距离大于阈值的相邻分区，则将颜色距离大于阈值的相邻分区标记为非背景分区，其他颜色距离小于等于阈值的相邻分区标记为背景分区。需要说明的是，阈值可以根据实际需要来进行设定，这里不做限定。

可以通过上述方式对每一个分区进行标记，标记为背景分区的分区则构成目标图像的第一背景区域。当然，还可以通过其他方式确定目标图像的第一背景区域，例如，可以在对分区进行背景分区和非背景分区标记的过程中，同时检测已经标记的分区是否能够限定出背景与非背景之间的界限。例如，背景区域已经形成一个闭合区域，闭合区域的内边缘均为非背景分区，闭合区域的外边缘均为背景分区，则可以确定闭合区域内为目标图像的前景，即非背景区域，闭合区域外为目标图像的背景区域，此时，可以将闭合区域外的分区均标记为背景区域，无需在对闭合区域外的分区之间的颜色差异进行计算。

步骤S12中，基于第一背景区域中包含的颜色信息，确定第一背景的目标颜色变化类型。其中，第一背景区域中包含的颜色信息可以是第一背景区域中包含的每个像素的颜色信息，也可以是第一背景区域中每个分区的颜色信息。针对不同的颜色信息，其对应的颜色变化类型也不同，例如，若某幅图像或图像的部分区域包含的颜色信息均相同，则对应的颜色变化类型为纯色，若某幅图像或图像的部分区域包含的颜色信息成等差数列，且颜色逐渐加深或变浅，则对应的颜色变化类型为渐变色。可见，不同的颜色变化类型，对应的颜色信息的特征也不同，因此，基于第一背景区域中包含的颜色信息，通过分析颜色信息的特征，能够确定出对应的目标颜色变化类型。

在具体实施过程中，可以通过以下方式来确定：确定第一背景区域中目标行或目标列对应的N个分区，N为正整数；确定N个分区中每两个相邻分区之间的颜色距离是否满足预设颜色变化规律，若是，将预设颜色变化规律对应的颜色变化类型作为目标颜色变化类型，其中，预设颜色变化规律为预设的颜色变化规律库中的规律。

具体来讲，目标行或目标列可以为第一背景区域中的任意行或任意列，为了便于说明，以第一背景区域中的行为例，确定位于这一行的N个分区，如N为5，分别获取位于同一行的这5个分区的颜色值，并计算5个分区中两两相邻分区的颜色距离，获得4个颜色距离。具体来讲，5个分区的颜色值分别表示为[d1，d2，d3，d4，d5]，颜色距离分别表示为[d1-d2，d2-d3，d3-d4，d4-d5]，可以根据颜色距离的变化规律进一步判断该行的颜色变化类型。

预设的颜色变化规律库中，包含有各个颜色变化类型对应的颜色变化规律，本说明书实施例中，预设的颜色变化规律库中，包含的颜色变化类型为纯色、渐变色、以及通用颜色变化类型。其中，纯色对应的颜色变化规律为相邻分区的颜色距离均为0，渐变色对应的颜色变化规律为相邻分区的颜色距离均相等且不为0，通用颜色变化对应的颜色变化规律为相邻分区的颜色差异不相等。

在得到目标行或目标列中相邻分区的颜色距离后，可以将相邻分区的颜色距离与上述三种颜色变化规律进行比对，以确定出最终的目标颜色变化类型。本说明书实施例中，可以将通过目标行或目标列确定出来的颜色变化类型作为第一背景区域的目标颜色变化类型，也可以分别确定第一背景区域中所有行或所有列的颜色变化类型，将得到的所有颜色变化类型作为目标颜色变化类型。

在确定出第一背景区域的目标颜色变化类型之后，就可以对图像显示区域的第二背景进行自适应调整。本说明书实施例中，在执行步骤S13之前，可以先确定目标图像的显示位置：确定目标图像在图像显示区域的显示位置；基于显示位置，以及图像显示区域的尺寸，在图像显示区域中确定第二背景区域。

目标图像的显示位置可以根据实际需要进行设定，例如，将目标图像进行居中显示，左对齐显示等，本说明书实施例中，目标图像以contain的方式居中显示在图像显示区域中，即以目标图像的长边对图像显示区域进行填充并居中显示。

进一步的，确定了目标图像的显示位置之后，可以根据图像显示区域的尺寸，确定出图像显示区域的第二背景区域。具体来讲，可以计算目标图像的显示边缘像素点与图像显示区域边缘像素点之间的间距，该间距对应的区域即为需要填充的第二背景区域。

步骤S13中，基于目标图像的第一背景区域的目标颜色变化类型，确定第二背景区域的颜色信息，即模拟出与目标图像背景相同或相近的颜色分布作为图像显示区域中目标图像的背景，这样，就可以使图像显示区域的背景与目标图像更贴合，有效提高显示效果。

在具体实施过程中，第二背景区域的颜色信息可以通过以下方式来确定：基于目标颜色变化类型，以及颜色变化类型与颜色信息预测方式之间的预设对应关系，确定与目标颜色变化类型对应的目标颜色信息预测方式；基于目标颜色信息预测方式，确定第二背景区域的颜色信息。

进一步的，基于目标颜色信息预测方式，确定第二背景区域的颜色信息，包括：基于与目标图像相同的分区方式，将第二背景区域进行分区；基于第一背景区域中包含的多个分区的颜色值，以及目标颜色信息预测方式，确定第二背景区域中各个分区的颜色信息。

对于不同的目标颜色变化类型，其对应的颜色信息预测方式也不同，下面，对不同颜色变化类型对应的颜色信息预测方式进行说明：

若第一背景区域的目标颜色变化类型为纯色，则对应的颜色信息预测方式为选取第一背景区域中的纯色的颜色值作为第二背景区域的颜色值。

若第一背景区域的目标颜色变化类型为渐变色，以目标行的颜色预测为例，对应的颜色信息预测方式为：首先，确定RGB空间的空间直角坐标系，将上述目标行包含的分区的rgb值作为坐标系上的已知点，计算该空间下经过任意两个已知点的直线方程，得到空间直线的参数方程；其次，确定目标行中靠近目标图像边缘的已知点的rgb值，将该点的rgb值以及上述计算的相邻两个分区的颜色距离带入到空间直线的参数方程中，即可得到一个已知点的颜色颜色值以及第二背景区域对应的一个颜色值，记为第一颜色值；同时，将第二背景按照目标图像划分的方式进行分区，那么第一颜色值即为第二背景区域中与目标行相邻分区的颜色值；进一步的，将第一颜色值与相邻两个分区的颜色距离再次带入到空间直线的参数方程中，即可得到与第一颜色值相邻分区的第二颜色值。依次类推，直到将第二背景中与目标行对应的所有分区填充完毕。另外，当计算得到的rgb值其中的一项颜色参数已经达到最大的255或最小的0，则停止计算颜色值，将后续的颜色值均设定为最大值或最小值。

若第一背景区域的目标颜色变化类型为通用颜色变化类型，对应的颜色信息预测方式与上述渐变色的方式类似，同样是计算空间直线的参数方程，带入两个点的颜色距离以及靠近图片边缘的一个点，在得到两个颜色值后，将距离目标图像边缘分区的颜色值距离较大的颜色值作为第二背景区域的一个颜色值。

步骤S14中，在确定了第二背景区域的颜色信息之后，将对应的第二背景区域进行填充，并将目标图像显示在第二背景区域中。

可见，本说明书实施例中的方案，能够根据目标图像的背景颜色来自适应的调整图像显示区域的背景颜色。进一步的，本说明书实施例中，还可以实时检测图像显示区域的尺寸变化，当检测到图像显示区域的尺寸发生变化时，可以重复上述基于第一背景区域的目标颜色变化类型，确定第二背景区域的颜色信息的步骤。

为了更好的理解本说明书实施例提供的图像显示方法，下面，基于HTML Canvas来对本说明书实施例提供的图像显示方法进行说明，该实施包括以下步骤：

图像加载步骤，包括：

步骤1：基于待显示的目标图像，创建图像对象；

步骤2：指定目标对象的资源路径；

其中，在指定资源路径时，需要设置对象的src属性为资源路径，路径可以为svg、base64或同域下的网络URI。

步骤3：监听图像对象的加载完成事件，当加载完成事件被触发时，执行步骤四；

其中，图像对象成功加载，是获取目标图像的颜色信息、区分背景和前景的前提。

图像信息获取步骤，包括：

步骤4：创建canvas画布；

步骤5：利用canvas将目标图像转换为包含所有像素的rgba信息的一组数据；

确定图像背景区域步骤，包括：

步骤6：将目标图像划分成多个分区，计算每个分区的颜色的平均值，作为每个分区的颜色值；

步骤7：计算每两个相邻分区的颜色距离，确定目标图像的第一背景区域；

计算并绘制图像显示区域的空白区域的背景，包括：

步骤8：针对第一背景区域中的单独一行/列，确定相邻两个分区的颜色距离，确定对应的颜色变化类型；

其中，颜色距离为0，对应纯色；颜色距离相等且不为0，对应渐变色；颜色距离不相等，对应通用颜色变化类型。

步骤9：获取目标图像显示区域的尺寸，计算目标图像的边缘像素与目标图像显示区域的边缘限速之间的像素值间距；

像素值间距决定需要在目标图像边缘到图像显示区域边缘之间，计算颜色值的次数，颜色值的次数为：像素值间距/分区的像素值间距。

步骤10：计算第二背景区域的颜色信息，并将其绘制在画布上，当全部绘制完成是，将画布上的内容导出为base64；

设置图像显示区域的背景，包括：

步骤11：获取图像显示区域在页面上的dom实例；

步骤12：设置dom的背景属性，将属性值设置为上一步生成的base64图片资源；

图像显示区域的背景调整步骤，包括

步骤13：监听图像显示区域的尺寸变化，在图像显示区域的尺寸发生变化，重复执行上述计算并绘制图像显示区域的空白区域的背景、以及设置图像显示区域的背景的步骤。

综上所述，本说明书实施例提供的图像显示方法，通过对目标图像的第一背景区域的颜色信息进行分析，确定出图像显示区域中的第二背景的颜色信息，使第二背景的颜色信息与第一背景的颜色信息相适配，通过这种方式对图像显示区域中的背景区域进行填充，使图像显示区域中的背景区域能够自适应的根据目标图像的背景区域进行调整，使最终的显示效果更加协调，有效改善了目标图像在图像显示区域中的显示效果。

第二方面，基于同一发明构思，本说明书实施例提供一种图像显示装置，如图3所示，该装置包括：

获取模块31，用于获取待显示的目标图像，确定所述目标图像的第一背景区域；

颜色变化类型确定模块32，用于基于所述第一背景区域中包含的颜色信息，确定所述第一背景区域的目标颜色变化类型；

颜色信息确定模块33，用于基于所述目标颜色变化类型，确定图像显示区域中除所述目标图像所在区域以外的第二背景区域的颜色信息；

显示模块34，用于基于所述第二背景区域的颜色信息，对所述第二背景区域进行填充并将所述目标图像显示在所述图像显示区域中。

可选地，获取模块31，用于：

将所述目标图像划分为多个分区；

针对每个分区，基于该分区包含的所有像素的颜色信息，确定该分区的颜色值；

针对所述每个分区，基于该分区的颜色值，以及该分区的相邻分区的颜色值，确定该分区与相邻分区之间的颜色距离；

基于所述多个分区中相邻两个分区之间的颜色距离，确定所述第一背景区域。

可选地，获取模块31，用于：

按照分区位置由所述目标图像边缘到所述目标图像中间的顺序，依次选取每个分区作为目标分区，并执行以下步骤：确定所述目标分区与相邻分区之间的颜色距离是否大于阈值，若是，将所述目标分区的相邻分区标记为非背景分区，若否，将所述目标分区的相邻分区标记为背景分区；

基于所述背景分区，确定所述第一背景区域。

可选地，颜色变化类型确定模块32，用于：

确定所述第一背景区域中目标行或目标列对应的N个分区，N为正整数；

确定所述N个分区中每两个相邻分区之间的颜色距离是否满足预设颜色变化规律，若是，将所述预设颜色变化规律对应的颜色变化类型作为所述目标颜色变化类型，其中，所述预设颜色变化规律为预设的颜色变化规律库中的规律。

可选地，颜色信息确定模块33，用于：

基于所述目标颜色变化类型，以及颜色变化类型与颜色信息预测方式之间的预设对应关系，确定与所述目标颜色变化类型对应的目标颜色信息预测方式；

基于所述目标颜色信息预测方式，确定所述第二背景区域的颜色信息。

可选地，颜色信息确定模块33，用于：

基于与所述目标图像相同的分区方式，将所述第二背景区域进行分区；

基于所述第一背景区域中包含的多个分区的颜色值，以及所述目标颜色信息预测方式，确定所述第二背景区域中各个分区的颜色信息。

可选地，所述装置还包括：

位置确定模块，用于确定所述目标图像在所述图像显示区域的显示位置；

背景区域确定模块，用于基于所述显示位置，以及所述图像显示区域的尺寸，在所述图像显示区域中确定所述第二背景区域。

可选地，所述位置确定模块，用于：

确定所述目标图像以所述目标图像的长边对所述图像显示区域填充显示。

关于上述装置，其中各个模块的具体功能已经在本说明书实施例提供的图像显示方法的实施例中进行了详细描述，此处将不做详细阐述说明。

第三方面，基于与前述实施例中图像显示方法同样的发明构思，本说明书实施例还提供一种图像显示装置，如图4所示，包括存储器404、处理器402及存储在存储器404上并可在处理器402上运行的计算机程序，所述处理器402执行所述程序时实现前文所述图像显示方法的步骤。

其中，在图3中，总线架构(用总线400来代表)，总线400可以包括任意数量的互联的总线和桥，总线400将包括由处理器402代表的一个或多个处理器和存储器404代表的存储器的各种电路链接在一起。总线400还可以将诸如外围设备、稳压器和功率管理电路等之类的各种其他电路链接在一起，这些都是本领域所公知的，因此，本文不再对其进行进一步描述。总线接口406在总线400和接收器401和发送器403之间提供接口。接收器401和发送器403可以是同一个元件，即收发机，提供用于在传输介质上与各种其他装置通信的单元。处理器402负责管理总线400和通常的处理，而存储器404可以被用于存储处理器402在执行操作时所使用的数据。

第四方面，基于与前述实施例中基于图像显示方法的发明构思，本说明书实施例还提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现前文所述图像显示方法的任一方法的步骤。

本说明书是参照根据本说明书实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的设备。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令设备的制造品，该指令设备实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本说明书的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本说明书范围的所有变更和修改。

显然，本领域的技术人员可以对本说明书进行各种改动和变型而不脱离本说明书的精神和范围。这样，倘若本说明书的这些修改和变型属于本说明书权利要求及其等同技术的范围之内，则本说明书也意图包含这些改动和变型在内。

Claims (10)

1.一种图像显示方法，其特征在于，所述方法包括：

获取待显示的目标图像，确定所述目标图像的第一背景区域；

基于所述第一背景区域中包含的颜色信息，确定所述第一背景区域的目标颜色变化类型；

基于所述目标颜色变化类型，确定图像显示区域中除所述目标图像所在区域以外的第二背景区域的颜色信息；

基于所述第二背景区域的颜色信息，对所述第二背景区域进行填充并将所述目标图像显示在所述图像显示区域中。

2.根据权利要求1所述的方法，其特征在于，所述确定所述目标图像的第一背景区域，包括：

将所述目标图像划分为多个分区；

针对每个分区，基于该分区包含的所有像素的颜色信息，确定该分区的颜色值；

针对所述每个分区，基于该分区的颜色值，以及该分区的相邻分区的颜色值，确定该分区与相邻分区之间的颜色距离；

基于所述多个分区中相邻两个分区之间的颜色距离，确定所述第一背景区域。

3.根据权利要求2所述的方法，其特征在于，所述基于所述多个分区中相邻两个分区之间的颜色距离，确定所述第一背景区域，包括：

按照分区位置由所述目标图像边缘到所述目标图像中间的顺序，依次选取每个分区作为目标分区，并执行以下步骤：确定所述目标分区与相邻分区之间的颜色距离是否大于阈值，若是，将所述目标分区的相邻分区标记为非背景分区，若否，将所述目标分区的相邻分区标记为背景分区；

基于所述背景分区，确定所述第一背景区域。

4.根据权利要求2所述的方法，其特征在于，所述基于所述第一背景区域中包含的颜色信息，确定所述第一背景区域的目标颜色变化类型，包括：

确定所述第一背景区域中目标行或目标列对应的N个分区，N为正整数；

确定所述N个分区中每两个相邻分区之间的颜色距离是否满足预设颜色变化规律，若是，将所述预设颜色变化规律对应的颜色变化类型作为所述目标颜色变化类型，其中，所述预设颜色变化规律为预设的颜色变化规律库中的规律。

5.根据权利要求2所述的方法，其特征在于，所述基于所述目标颜色变化类型，确定图像显示区域中除所述目标图像所在区域的第二背景区域的颜色信息，包括：

基于所述目标颜色变化类型，以及颜色变化类型与颜色信息预测方式之间的预设对应关系，确定与所述目标颜色变化类型对应的目标颜色信息预测方式；

基于所述目标颜色信息预测方式，确定所述第二背景区域的颜色信息。

6.根据权利要求5所述的方法，其特征在于，所述基于所述目标颜色信息预测方式，确定所述第二背景区域的颜色信息，包括：

基于与所述目标图像相同的分区方式，将所述第二背景区域进行分区；

基于所述第一背景区域中包含的多个分区的颜色值，以及所述目标颜色信息预测方式，确定所述第二背景区域中各个分区的颜色信息。

7.根据权利要求1所述的方法，其特征在于，在所述基于所述目标颜色变化类型，确定图像显示区域中除所述目标图像所在区域以外的第二背景区域的颜色信息之前，所述方法还包括：

确定所述目标图像在所述图像显示区域的显示位置；

基于所述显示位置，以及所述图像显示区域的尺寸，在所述图像显示区域中确定所述第二背景区域。

8.一种图像显示装置，其特征在于，所述装置包括：

获取模块，用于获取待显示的目标图像，确定所述目标图像的第一背景区域；

颜色变化类型确定模块，用于基于所述第一背景区域中包含的颜色信息，确定所述第一背景区域的目标颜色变化类型；

颜色信息确定模块，用于基于所述目标颜色变化类型，确定图像显示区域中除所述目标图像所在区域以外的第二背景区域的颜色信息；

显示模块，用于基于所述第二背景区域的颜色信息，对所述第二背景区域进行填充并将所述目标图像显示在所述图像显示区域中。

9.一种电子设备，其特征在于，包括：至少一个处理器、以及与处理器连接的至少一个存储器、总线；其中，所述处理器、所述存储器通过所述总线完成相互间的通信；所述处理器用于调用所述存储器中的程序指令，以执行权利要求1～7中任一项所述的图像显示方法。

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

Images