图片展示方法、图片展示装置和电子设备与流程

1.本技术涉及电子信息技术领域，例如涉及一种图片展示方法、图片展示装置和电子设备。


背景技术：

2.目前，在网页上展示一组尺寸不同的图片时，网页通常预设有位置固定的占位容器，通过对不同尺寸的图片进行缩放和重新排序等操作，将图片展示于预设的占位容器中，以实现网页的良好视觉效果。
3.在实现本公开实施例的过程中，发现相关技术中至少存在如下问题：
4.对于图片的顺序具有一定作用或含义时，通过上述方式进行图片的展示，会导致图片顺序被打乱，无法通过图片展示实现表达特定含义的展示目的。


技术实现要素：

5.为了对披露的实施例的一些方面有基本的理解，下面给出了简单的概括。所述概括不是泛泛评述，也不是要确定关键/重要组成元素或描绘这些实施例的保护范围，而是作为后面的详细说明的序言。
6.本公开实施例提供了一种图片展示方法、图片展示装置和电子设备，以解决现有的图片展示方式为了较好的视觉效果，将不同尺寸的图片顺序打乱进行展示，无法通过展示图片顺序表达含义的技术问题。
7.在一些实施例中，所述图片展示方法包括：确定目标展示区域，以及待展示的目标图片集，目标图片集包括多个图片；根据目标展示区域的目标展示宽度和多个图片的尺寸相关信息，确定多个图片各自关联的占位容器在目标展示区域的目标排布方式；将多个图片依次在其关联的占位容器中进行展示，以使目标图片集展示于目标展示区域。
8.在一些实施例中，所述图片展示装置包括：获取模块、确定模块和执行模块；获取模块，被配置为确定目标展示区域，以及待展示的目标图片集，目标图片集包括多个图片；确定模块，被配置为根据目标展示区域的目标展示宽度和多个图片的尺寸相关信息，确定多个图片各自关联的占位容器在目标展示区域的目标排布方式；执行模块，被配置为将多个图片依次在其关联的占位容器中进行展示，以使目标图片集展示于目标展示区域。
9.在一些实施例中，所述图片展示装置包括处理器和存储有程序指令的存储器，其中，处理器在运行程序指令时，执行上述的图片展示方法。
10.在一些实施例中，所述电子设备包括如上述的图片展示装置。
11.本公开实施例提供的图片展示方法、图片展示装置和电子设备，可以实现以下技术效果：
12.通过根据待展示的多个图片的尺寸相关信息以及目标展示区域的宽度信息，确定多个图片各自关联的占位容器在目标展示区域的目标排布方式；将多个图片依次在各自关联的占位容器中进行展示，以使目标图片集有效地展示于目标展示区域；这样，根据待展示
图片和目标展示区域的相关信息，重新确定占位容器的排布方式，进而将多个图片按顺序依次展示于各自关联的占位容器所在位置，既实现了在展示多个不同尺寸的图片时，不改变图片的排列顺序，能够通过展示图片表达更多信息，又兼顾了图片展示于目标展示区域的视觉效果，使图片展示更加美观。
13.以上的总体描述和下文中的描述仅是示例性和解释性的，不用于限制本技术。
附图说明
14.一个或多个实施例通过与之对应的附图进行示例性说明，这些示例性说明和附图并不构成对实施例的限定，附图中具有相同参考数字标号的元件示为类似的元件，附图不构成比例限制，并且其中：
15.图1是本公开实施例提供的一个图片展示方法的示意图；
16.图2是本公开实施例提供的一个网页的图片展示的示意图；
17.图3是本公开实施例提供的一个图片展示装置的示意图；
18.图4是本公开实施例提供的另一个图片展示装置的示意图。
19.附图标记：
20.10、获取模块；20、确定模块；30、执行模块；100、处理器；101、存储器；102、通信接口；103、总线；110、目标展示区域；111、占位容器。
具体实施方式
21.为了能够更加详尽地了解本公开实施例的特点与技术内容，下面结合附图对本公开实施例的实现进行详细阐述，所附附图仅供参考说明之用，并非用来限定本公开实施例。在以下的技术描述中，为方便解释起见，通过多个细节以提供对所披露实施例的充分理解。然而，在没有这些细节的情况下，一个或多个实施例仍然可以实施。在其它情况下，为简化附图，熟知的结构和装置可以简化展示。
22.本公开实施例的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开实施例的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含。
23.除非另有说明，术语“多个”表示两个或两个以上。
24.本公开实施例中，字符“/”表示前后对象是一种“或”的关系。例如，a/b表示：a或b。
25.术语“和/或”是一种描述对象的关联关系，表示可以存在三种关系。例如，a和/或b，表示：a或b，或，a和b这三种关系。
26.结合图1所示，本公开实施例提供一种图片展示方法，包括：
27.s01、确定目标展示区域，以及待展示的目标图片集，目标图片集包括多个图片。
28.s02、根据目标展示区域的目标展示宽度和多个图片的尺寸相关信息，确定多个图片各自关联的占位容器在目标展示区域的目标排布方式。
29.s03、将多个图片依次在其关联的占位容器中进行展示，以使目标图片集展示于目标展示区域。
30.采用本公开实施例提供的图片展示方法，能够通过根据待展示的多个图片的尺寸
相关信息以及目标展示区域的宽度信息，确定多个图片各自关联的占位容器在目标展示区域的目标排布方式；将多个图片依次在各自关联的占位容器中进行展示，以使目标图片集有效地展示于目标展示区域；这样，根据待展示图片和目标展示区域的相关信息，重新确定占位容器的排布方式，进而将多个图片按顺序依次展示于各自关联的占位容器所在位置，既实现了在展示多个不同尺寸的图片时，不改变图片的排列顺序，能够通过展示图片表达更多信息，又兼顾了图片展示于目标展示区域的视觉效果，使图片展示更加美观。
31.可选地，执行上述步骤的执行主体可以为服务器，服务器与需要展示图片的电子设备通过电子设备的通信模块建立通信连接。电子设备的通信模块将需要展示的目标图片集发送给服务器；服务器在接收到待展示的目标图片集的情况下，获取电子设备的目标展示区域，并确定目标展示区域的目标展示宽度；服务器确定目标图片集包含的多个图片的尺寸相关信息，并根据目标展示区域的目标展示宽度和多个图片的尺寸相关信息，确定多个图片各自关联的占位容器在目标展示区域的目标排布方式；服务器将确定的占位容器的目标排布方式发送给电子设备；电子设备根据接收到的目标排布方式，将多个图片依次在其关联的占位容器中进行展示以使目标图片集展示于电子设备的目标展示区域。
32.本公开实施例中，电子设备可以为电子显示屏；也可以为具有显示功能的手机、平板电脑等智能便携设备；还可以为具有显示功能的智能冰箱、智能电视、智能空调、智能音箱、智能洗衣机等智能家电设备；这里不做具体限定。本公开实施例以将图片展示方法应用于智能电视为例，本技术的其他实施例也将图片展示方法应用于其他电子设备。
33.在实际应用中，目标展示区域可以为电子设备显示的网页中用于显示图片的区域。一般地，网页的显示区域宽度即为电子设备显示界面的宽度，但页面的显示区域长度是可以随着网页滚动而根据待展示内容进行调整的。
34.可选地，占位容器可以用于表征目标展示区域用于展示图片的多个服务区域。
35.相关技术中，网页上展示图片时，如果确定了目标展示区域，目标展示区域中将存在预设的位置信息和尺寸信息固定的多个占位容器，将待展示的图片展示于各个占位容积中即可。然而，在本公开实施例中，确定的目标展示区域是没有预设的位置信息和尺寸信息的占位容器；而是根据待展示的多个图片的尺寸相关信息以及目标展示区域的宽度信息，来确定多个图片各自关联的占位容器在目标展示区域的目标排布方式；这里，目标排布方式包括确定的各个占位容器的位置信息和尺寸信息。从而根据待展示图片和目标展示区域的相关信息来确地占位容器的设置位置等情况，改变了相关技术中占位容器固定设置的图片展示方式，使图片能够美观、有效地展示于目标展示区域。
36.可选地，图片的尺寸相关信息包括图片的实际宽度数据、实际高度数据以及图片的宽高比数据。
37.可选地，获取图片的实际宽度数据和实际高度数据，包括：获取图片的像素参数；根据图片的像素参数，确定图片的实际宽度数据和实际高度数据。其中，图片的宽高比数据可以通过如下方式确定：将图片的实际宽度数据除以实际高度数据，以确定图片的宽高比数据。
38.可选地，如果尺寸相关信息包括图片的实际宽度数据、实际高度数据以及图片的宽高比数据；则根据目标展示区域的目标展示宽度和多个图片的尺寸相关信息，确定多个图片各自关联的占位容器在目标展示区域的目标排布方式，包括：根据多个图片的实际高
度数据，确定目标图片集中图片的平均高度数据；根据平均高度数据、多个图片的宽高比数据以及目标展示区域的目标展示宽度，确定多个图片各自关联的占位容器的尺寸信息；根据尺寸信息，确定目标排布方式。
39.可选地，占位容器的尺寸信息包括占位容器的高度参数和占位容器的宽度参数；占位容器的位置信息可以用于表征占位容器在目标展示区域中的设置位置情况。由于多个图片对应多个占位容器，那么，多个占位容器的目标排布方式包括：多个占位容器各自的尺寸信息以及多个占位容器各自在目标展示区域的位置信息。
40.可选地，根据多个图片的实际高度数据，确定目标图片集中图片的平均高度数据，包括：循环累加各图片的实际高度数据并计算出进入循环累加的图片的平均高度数据。
41.可选地，该图片展示方法还包括：将平均高度数据作为多个图片各自对应的占位容器的高度参数。如果根据获得的平均高度数据确定占位容器的高度参数，则根据目标排布方式排布的占位容器在每一行呈整齐状态，各个占位容器的宽度参数将根据其各自对应的待展示图片的尺寸相关信息进行不同的设置。这样的占位容器的排布方式，能够使展示于其中的图片更美观、有效地展示于目标展示区域。
42.可选地，尺寸信息包括占位容器的高度参数和宽度参数；根据平均高度数据、多个图片的宽高比数据以及目标展示区域的目标展示宽度，确定多个图片各自关联的占位容器的尺寸信息，包括：将平均高度数据与多个图片的宽高比数据的乘积作为多个图片各自对应的占位容器的宽度参数。此外，将平均高度数据作为多个图片各自对应的占位容器的高度参数。这样，可以确定多个图片对应的占位容器的目标排列方式。
43.可选地，尺寸信息包括占位容器的宽度参数；根据尺寸信息，确定目标排布方式，包括：根据多个图片各自关联的占位容器的宽度参数和目标展示区域的目标展示宽度，确定目标展示区域中可容纳的占位容器的数量；根据目标展示区域中可容纳的占位容器的数量，确定多个图片各自关联的占位容器的位置信息；将多个图片各自关联的占位容器根据其对应的位置信息进行排布。
44.可选地，该图片展示方法还包括：在获得了多个图片各自对应的占位容器的宽度参数的情况下，按照目标图片集中的图片排列顺序，依次累加各图片对应的占位容器的宽度参数，将累加获得的多个占位容器的宽度参数之和作为第一对比宽度。该第一对比宽度是一个动态变化的数值，每多累加一个占位容器的宽度参数，第一对比宽度就进行一次重新赋值。
45.可选地，第一对比宽度每重新赋值一次，将重新赋值后的第一对比宽度与目标展示区域的目标展示宽度进行比较，当第一对比宽度超过目标展示宽度时，将重新赋值之前的第一对比宽度所累加的宽度参数对应的占位容器作为一行排列的占位容器进行排布。循环进行上述过程，即可将待展示的多张图片各自对应的占位容器排列完成。
46.在实际应用中，如图2所示，网页的目标展示区域110中以目标排布方式设置有多个占位容器111；各占位容器的位置信息和尺寸信息均是根据待展示图片的情况和目标展示区域来确定的，而非固定的预设占位容器。根据上述方法排布的占位容器111，在横向上是呈整齐状态的，将图片展示于其关联的占位容器111，既能够不改变图片的排列顺序，通过展示图片表达更多信息，又能够使图片在目标展示区域110更美观、有效地进行展示。
47.可选地，可以获取预设的间隔阈值作为各行占位容器之间的间隔距离和每行的各
占位容器之间的间隔距离。
48.这样，可以有效确定目标展示区域中的各行的占位容器的排布数量；并确定各行占位容器的设置位置。为待展示的图片匹配展示于其对应的占位容器中提供基础。
49.可选地，通过以下方式将图片展示于占位容器：根据图片关联的占位容器的尺寸信息，将图片根据其宽高比数据进行缩放处理，以使图片与其关联的占位容器相匹配。这样，由于各图片对应的占位容器的排布方式是根据根据待展示的多个图片的尺寸相关信息以及目标展示区域的宽度信息确定的。通过至少包括居中设置等方式将多个图片依次展示于其各自关联的占位容器中；既能够实现在展示多个不同尺寸的图片时，不改变图片的排列顺序，能够通过展示图片表达更多信息，又能够使图片在目标展示区域更美观、有效地进行展示。
50.可选地，该图片展示方法还包括：将图片居中展示于其对应的占位容器中。具体地，如果图片的宽高比数据大于预设参考比例，则根据图片对应的占位容器的尺寸信息，将图片的实际宽度数据和实际高度数据根据宽高比数据进行缩放处理。
51.可选地，在确定目标图片集包括的多个图片之后，该图片展示方法还包括：从多个图片中筛选出不符合参考像素范围的图片，并对不符合参考像素范围的图片进行预处理操作；其中，预处理操作包括将图片根据预设参考像素进行缩放处理。其中，参考像素范围可以通过预设参考像素进行确定。例如，将预设参考像素设置为图片的宽度像素为200px，图片的高度像素为200px；其中，px为计算机语言中的像素。
52.以预设参考像素设置为图片的宽度像素为200px，图片的高度像素为200px为例，参考像素范围可以为图片的宽度像素小于或等于200px，和/或，图片的高度像素小于或等于200px；此时，不符合参考像素范围的图片即为图片的宽度像素大于200px，和/或，图片的高度像素大于200px的情况。
53.可选地，预处理操作包括将图片根据预设参考像素进行缩放处理。以预设参考像素设置为图片的宽度像素为200px，图片的高度像素为200px为例，如果检测到图片的宽度像素大于200px，但是图片的高度像素小于或等于200px，则在不改变图片的宽高比数据的情况下，对图片进行缩小操作，将图片的宽度像素缩小到200px。并将缩小后的图片的图片高度作为该图片的实际高度数据。
54.结合图3所示，本公开实施例提供一种图片展示装置，包括获取模块10、确定模块20和执行模块30。获取模块10被配置为确定目标展示区域，以及待展示的目标图片集，目标图片集包括多个图片；确定模块20被配置为根据目标展示区域的目标展示宽度和多个图片的尺寸相关信息，确定多个图片各自关联的占位容器在目标展示区域的目标排布方式；执行模块30被配置为将多个图片依次在其关联的占位容器中进行展示，以使目标图片集展示于目标展示区域。
55.采用本公开实施例提供的图片展示装置，能够通过根据待展示的多个图片的尺寸相关信息以及目标展示区域的宽度信息，确定多个图片各自关联的占位容器在目标展示区域的目标排布方式；将多个图片依次在各自关联的占位容器中进行展示，以使目标图片集有效地展示于目标展示区域；这样，根据待展示图片和目标展示区域的相关信息，重新确定占位容器的排布方式，进而将多个图片按顺序依次展示于各自关联的占位容器所在位置，既实现了在展示多个不同尺寸的图片时，不改变图片的排列顺序，能够通过展示图片表达
更多信息，又兼顾了图片展示于目标展示区域的视觉效果，使图片展示更加美观。
56.结合图4所示，本公开实施例提供一种图片展示装置，包括处理器(processor)100和存储器(memory)101。可选地，该装置还可以包括通信接口(communication interface)102和总线103。其中，处理器100、通信接口102、存储器101可以通过总线103完成相互间的通信。通信接口102可以用于信息传输。处理器100可以调用存储器101中的逻辑指令，以执行上述实施例的图片展示方法。
57.此外，上述的存储器101中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。
58.存储器101作为一种计算机可读存储介质，可用于存储软件程序、计算机可执行程序，如本公开实施例中的方法对应的程序指令/模块。处理器100通过运行存储在存储器101中的程序指令/模块，从而执行功能应用以及数据处理，即实现上述实施例中图片展示方法。
59.存储器101可包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据终端设备的使用所创建的数据等。此外，存储器101可以包括高速随机存取存储器，还可以包括非易失性存储器。
60.本公开实施例提供了一种电子设备，包含上述的图片展示装置。
61.采用本公开实施例提供的电子设备，能够通过根据待展示的多个图片的尺寸相关信息以及目标展示区域的宽度信息，确定多个图片各自关联的占位容器在目标展示区域的目标排布方式；将多个图片依次在各自关联的占位容器中进行展示，以使目标图片集有效地展示于目标展示区域；这样，根据待展示图片和目标展示区域的相关信息，重新确定占位容器的排布方式，进而将多个图片按顺序依次展示于各自关联的占位容器所在位置，既实现了在展示多个不同尺寸的图片时，不改变图片的排列顺序，能够通过展示图片表达更多信息，又兼顾了图片展示于目标展示区域的视觉效果，使图片展示更加美观。
62.可选地，电子设备可以为电子显示屏；也可以为具有显示功能的手机、平板电脑等智能便携设备；还可以为具有显示功能的智能冰箱、智能电视、智能空调、智能音箱、智能洗衣机等智能家电设备；这里不做具体限定。本公开实施例以将图片展示方法应用于智能电视为例，本技术的其他实施例也将图片展示方法应用于其他电子设备。
63.在实际应用中，目标展示区域可以为电子设备显示的网页中用于显示图片的区域。网页关联的服务器确定目标展示区域，以及待展示的目标图片集，目标图片集包括多个图片；根据目标展示区域的目标展示宽度和多个图片的尺寸相关信息，确定多个图片各自关联的占位容器在目标展示区域的目标排布方式；将多个图片依次在其关联的占位容器中进行展示，以使目标图片集展示于目标展示区域。
64.本公开实施例提供了一种计算机可读存储介质，存储有计算机可执行指令，所述计算机可执行指令设置为执行上述图片展示方法。
65.本公开实施例提供了一种计算机程序产品，所述计算机程序产品包括存储在计算机可读存储介质上的计算机程序，所述计算机程序包括程序指令，当所述程序指令被计算机执行时，使所述计算机执行上述图片展示方法。
66.上述的计算机可读存储介质可以是暂态计算机可读存储介质，也可以是非暂态计算机可读存储介质。
67.本公开实施例的技术方案可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括一个或多个指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本公开实施例所述方法的全部或部分步骤。而前述的存储介质可以是非暂态存储介质，包括：u盘、移动硬盘、只读存储器(rom，read
‑
only memory)、随机存取存储器(ram，random access memory)、磁碟或者光盘等多种可以存储程序代码的介质，也可以是暂态存储介质。
68.以上描述和附图充分地示出了本公开的实施例，以使本领域的技术人员能够实践它们。其他实施例可以包括结构的、逻辑的、电气的、过程的以及其他的改变。实施例仅代表可能的变化。除非明确要求，否则单独的部件和功能是可选的，并且操作的顺序可以变化。一些实施例的部分和特征可以被包括在或替换其他实施例的部分和特征。而且，本技术中使用的用词仅用于描述实施例并且不用于限制权利要求。如在实施例以及权利要求的描述中使用的，除非上下文清楚地表明，否则单数形式的“一个”(a)、“一个”(an)和“所述”(the)旨在同样包括复数形式。类似地，如在本技术中所使用的术语“和/或”是指包含一个或一个以上相关联的列出的任何以及所有可能的组合。另外，当用于本技术中时，术语“包括”(comprise)及其变型“包括”(comprises)和/或包括(comprising)等指陈述的特征、整体、步骤、操作、元素，和/或组件的存在，但不排除一个或一个以上其它特征、整体、步骤、操作、元素、组件和/或这些的分组的存在或添加。在没有更多限制的情况下，由语句“包括一个
…”
限定的要素，并不排除在包括所述要素的过程、方法或者设备中还存在另外的相同要素。本文中，每个实施例重点说明的可以是与其他实施例的不同之处，各个实施例之间相同相似部分可以互相参见。对于实施例公开的方法、产品等而言，如果其与实施例公开的方法部分相对应，那么相关之处可以参见方法部分的描述。
69.本领域技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，可以取决于技术方案的特定应用和设计约束条件。所述技术人员可以对每个特定的应用来使用不同方法以实现所描述的功能，但是这种实现不应认为超出本公开实施例的范围。所述技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
70.本文所披露的实施例中，所揭露的方法、产品(包括但不限于装置、设备等)，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，可以仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另外，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例。另外，在本公开实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。
71.附图中的流程图和框图显示了根据本公开实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这可以依所涉及的功能而定。在附图中的流程图和框图所对应的描述中，不同的方框所对应的操作或步骤也可以以不同于描述中所披露的顺序发生，有时不同的操作或步骤之间不存在特定的顺序。例如，两个连续的操作或步骤实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这可以依所涉及的功能而定。框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。