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

Abstract

本公开提供了一种图像显示方法及装置、存储介质及电子设备，涉及显示技术领域。该方法包括：获取多个图像的分辨率信息，建立多组图像容器，其中，每组图像容器用于容纳在分辨率信息上属于同类型的图像；根据显示区域的分辨率信息和所述多组图像容器，确定所述多组图像容器在所述显示区域的排列布局；渲染显示所述多组图像容器中容纳的图像。实现了图像容器的动态划分以及动态计算图像容器的排列布局；由于图像容器容纳了在分辨率信息上属于同类型的图像，并未对图像进行压缩或拉伸处理，也未对图像进行剪裁，实现了图片保真，保证图片显示的还原度，提升了图像辨识度。

Description

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

技术领域

本公开涉及显示技术领域，尤其涉及一种图像显示方法及装置、存储介质及电子设备。

背景技术

在展示图像时，经常需要将不同分辨率大小图像的放在一起展示，现有的展示图像的方式是在屏幕上划定统一尺寸的容器，将分辨率不同的图片进行压缩、拉伸甚至剪裁处理以填充满该容器，这样会导致展示的图片失真及变形，造成图像辨识度较差的问题。

需要说明的是，在上述背景技术部分公开的信息仅用于加强对本公开的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。

发明内容

本公开提供一种图像显示方法及装置、存储介质及电子设备，至少在一定程度上克服图片失真变形的问题。

本公开的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本公开的实践而习得。

根据本公开的一个方面，提供了一种图像显示方法，包括：获取多个图像的分辨率信息，建立多组图像容器，其中，每组图像容器用于容纳在分辨率信息上属于同类型的图像；根据显示区域的分辨率信息和所述多组图像容器，确定所述多组图像容器在所述显示区域的排列布局；渲染显示所述多组图像容器中容纳的图像。

在一些实施例中，获取多个图像的分辨率信息，建立多组图像容器，包括：获取多个图像的分辨率信息，确定每一图像的像素数据；根据每一图像的像素数据，确定在分辨率信息上属于同类型的图像；根据在分辨率信息上属于同类型的图像，建立多组图像容器。

在一些实施例中，所述每一图像的像素数据，包括：横向像素数据和纵向像素数据；根据每一图像的像素数据，确定在分辨率信息上属于同类型的图像，包括：将每一图像的横向像素数据和纵向像素数据分别进行排序，确定横向像素数据集合和纵向像素数据集合；将所述横向像素数据集合或所述纵向像素数据集合中像素数值相同的图像或像素数值相近的图像确定为在分辨率信息上属于同类型的图像，其中，所述像素数值相近的图像是指像素数值小于所述像素数值相等的图像的像素数值且大于控制阈值的图像。

在一些实施例中，根据在分辨率信息上属于同类型的图像，建立多组图像容器，包括：将在分辨率信息上属于同类型的图像划分为一组，确定出每组图像中最大的横向像素数值或最大的纵向像素数值；将所述最大的横向像素数值或最大的纵向像素数值作为图像容器宽度值，建立多组图像容器宽度值不同的图像容器。

在一些实施例中，根据显示区域的分辨率信息和所述多组图像容器，确定所述多组图像容器在所述显示区域的排列布局，包括：根据显示区域的分辨率信息，确定显示区域的横向像素数值和纵向像素数值；根据显示区域的横向像素数值和纵向像素数值与所述多组图像容器中每一图像容器的图像容器宽度值，确定所述多组图像容器在所述显示区域的排列布局。

在一些实施例中，根据显示区域的横向像素数值和纵向像素数值与所述多组图像容器中每一图像容器的图像容器宽度值，确定所述多组图像容器在所述显示区域的排列布局，包括：根据显示区域的横向像素数值和纵向像素数值，建立显示页面容器；根据所述多组图像容器中每一图像容器的图像容器宽度值，将所多组图像容器在所述显示页面容器中按照横向或纵向进行排列，直至排满所述显示页面容器，确定所述多组图像容器在所述显示页面容器的排列布局。

在一些实施例中，还包括：当所述显示页面容器排满时，若所述图像容器仍有剩余，则在下一显示页面中新建与所述显示页面容器相同的下一显示页面容器；将剩余的图像容器排列在下一显示页面容器。

根据本公开的另一个方面，还提供了一种图像显示装置，包括：图像容器建立模块，用于获取多个图像的分辨率信息，建立多组图像容器，其中，每组图模块，用于像容器用于容纳在分辨率信息上属于同类型的图像；图像容器排列布局确定模块，用于根据显示区域的分辨率信息和所述多组图像容器，确定所述多组图像容器在所述显示区域的排列布局；渲染显示模块，用于渲染显示所述多组图像容器中容纳的图像。

根据本公开的另一个方面，还提供了一种电子设备，该电子设备包括：处理器；以及存储器，用于存储所述处理器的可执行指令；其中，所述处理器配置为经由执行所述可执行指令来执行上述任意一项所述的图像显示方法。

根据本公开的另一个方面，还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述任意一项所述的图像显示方法。

根据本公开的另一个方面，还提供了一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现上述任意一项的图像显示方法。

本公开的实施例中提供的图像显示方法及装置、存储介质及电子设备，通过获取多个图像的分辨率信息，建立多组图像容器，将在分辨率信息上属于同类型的图像容纳至同一组图像容器中，实现了图像容器的动态划分；根据显示区域的分辨率信息和多组图像容器，确定多组图像容器在显示区域的排列布局，实现了动态计算图像容器的排列布局；由于图像容器容纳了在分辨率信息上属于同类型的图像，并未对图像进行压缩或拉伸处理，也未对图像进行剪裁，实现了图片保真，保证图片显示的还原度，提升了图像辨识度。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1示出本公开实施例中一种图像显示方法的系统结构的示意图；

图2示出本公开实施例中一种图像显示方法示意图。

图3示出本公开实施例中一种图像显示方法的建立多组图像容器示意图。

图4示出本公开实施例中一种图像显示方法的确定在分辨率信息上属于同类型的图像过程示意图。

图5示出本公开实施例中一种图像显示方法的建立多组图像容器具体过程示意图。

图6示出本公开实施例中一种图像显示方法的横向图像容器示意图。

图7示出本公开实施例中一种图像显示方法的纵向图像容器示意图。

图8示出本公开实施例中一种图像显示方法的确定多组图像容器在显示区域的排列布局示意图。

图9示出本公开实施例中一种图像显示方法的确定多组图像容器在显示区域的排列布局具体过程示意图。

图10示出本公开实施例中一种图像显示方法的图像容器横向排列布局示意图。

图11示出本公开实施例中一种图像显示方法的图像容器横向排列布局示意图。

图12示出本公开实施例中一种图像显示方法的纵向排列布局的多组图像容器示意图。

图13示出本公开实施例中一种图像显示方法的横向排列的多组图像容器示意图。

图14示出本公开实施例中一种图像显示装置示意图。

图15示出本公开实施例中一种图像显示方法的计算机设备的结构框图。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。

此外，附图仅为本公开的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

下面结合附图，对本公开实施例的具体实施方式进行详细说明。

图1示出了可以应用本公开实施例中图像显示方法的示例性应用系统架构示意图。如图1所示，该系统架构可以包括终端设备101、网络102和服务器103。

网络102用以在终端设备101和服务器103之间提供通信链路的介质，可以是有线网络，也可以是无线网络。

可选地，上述的无线网络或有线网络使用标准通信技术和/或协议。网络通常为因特网、但也可以是任何网络，包括但不限于局域网(Local Area Network，LAN)、城域网(Metropolitan Area Network，MAN)、广域网(Wide Area Network，WAN)、移动、有线或者无线网络、专用网络或者虚拟专用网络的任何组合)。在一些实施例中，使用包括超文本标记语言(Hyper Text Mark-up Language，HTML)、可扩展标记语言(ExtensibleMarkupLanguage，XML)等的技术和/或格式来代表通过网络交换的数据。此外还可以使用诸如安全套接字层(Secure Socket Layer，SSL)、传输层安全(Transport Layer Security，TLS)、虚拟专用网络(Virtual Private Network，VPN)、网际协议安全(InternetProtocolSecurity，IPsec)等常规加密技术来加密所有或者一些链路。在另一些实施例中，还可以使用定制和/或专用数据通信技术取代或者补充上述数据通信技术。

终端设备101可以是各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机、台式计算机、可穿戴设备、增强现实设备、虚拟现实设备等。

可选地，不同的终端设备101中安装的应用程序的客户端是相同的，或基于不同操作系统的同一类型应用程序的客户端。基于终端平台的不同，该应用程序的客户端的具体形态也可以不同，比如，该应用程序客户端可以是手机客户端、PC客户端等。

服务器103可以是提供各种服务的服务器，例如对用户利用终端设备101所进行操作的装置提供支持的后台管理服务器。后台管理服务器可以对接收到的请求等数据进行分析等处理，并将处理结果反馈给终端设备。

可选地，服务器可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN(Content Delivery Network，内容分发网络)、以及大数据和人工智能平台等基础云计算服务的云服务器。终端可以是智能手机、平板电脑、笔记本电脑、台式计算机、智能音箱、智能手表等，但并不局限于此。终端以及服务器可以通过有线或无线通信方式进行直接或间接地连接，本申请在此不做限制。

本领域技术人员可以知晓，图1中的终端设备、网络和服务器的数量仅仅是示意性的，根据实际需要，可以具有任意数目的终端设备、网络和服务器。本公开实施例对此不作限定。

在上述系统架构下，本公开实施例中提供了一种图像显示方法，该方法可以由任意具备计算处理能力的电子设备执行。

在一些实施例中，本公开实施例中提供的图像显示方法可以由上述系统架构的终端设备执行；在另一些实施例中，本公开实施例中提供的图像显示方法可以由上述系统架构中的服务器执行；在另一些实施例中，本公开实施例中提供的图像显示方法可以由上述系统架构中的终端设备和服务器通过交互的方式来实现。

在图片展示时，将不同分辨率大小的图片在一起展示，如果划定了统一固定尺寸的容器，那么就会对不符合和容器尺寸的图进行压缩或拉伸甚至剪裁，造成图片拉伸或显示变形，这样由于统一尺寸显示，失去了原本的没关系和艺术性，造成整体艺术的确实，尤其是在一些艺术作品展示上，对用户不够友好。

图2示出本公开实施例中一种图像显示方法流程图，如图2所示，本公开实施例中提供的图像显示方法包括如下步骤：

步骤S202：获取多个图像的分辨率信息，建立多组图像容器，其中，每组图像容器用于容纳在分辨率信息上属于同类型的图像；

步骤S204：根据显示区域的分辨率信息和多组图像容器，确定多组图像容器在显示区域的排列布局；

步骤S206：渲染显示多组图像容器中容纳的图像。

图像的分辨率(Resolution)信息，是指该图像包含的像素数量，例如一张图像的分辨率是“300×200”，那么就表示这个图片在横向上具有300个像素，在纵向上有200个像素，该图片的总像素数量为300×200＝60000；而显示区域的分辨率信息(Pixels PerInch，PPI)，是指显示设备在进行显示时对应显示区域所包含的显示像素数量，该显示像素是指显示设备显示一个像素的物理实体，例如一个像素单元，该像素单元可以是包括红绿蓝三色的LED(Light Emitting Diode，发光二极管)或OLED(Organic Light-EmittingDiode，有机发光二极管)；当显示设备的分辨率是“1920×1080”时，表示该显示设备在横向上具有1920个像素单元，在纵向上具有1080个像素单元，那么该显示设备总共具有2073600个像素单元；当显示区域为整个显示设备时，那么显示区域的分辨率等于显示设备的分辨率，即显示区域的分辨率为“1920×1080”；当显示区域为显示设备的部分区域时，例如使用显示设备纵向上中间的三分之一，两边各自剩余三分之一不使用，那么显示区域的分辨率就是“640×1080”，例如使用显示设备横向上的上半部分时，剩余的下半部分不使用，那么显示区域的分辨率就是“1920×540”。当显示区域在显示图像时，实现图片显示保真的方式就是显示区域的一个像素单元显示图片中的一个像素，也就是图像的像素与显示区域的像素单元一一对应；本公开通过获取多个图像的分辨率信息，建立多组图像容器，将在分辨率信息上属于同类型的图像容纳至同一组图像容器中，实现了图像容器的动态划分；根据显示区域的分辨率信息和多组图像容器，确定多组图像容器在显示区域的排列布局，实现了动态计算图像容器的排列布局；由于图像容器容纳了在分辨率信息上属于同类型的图像，并未对图像进行压缩或拉伸处理，也未对图像进行剪裁，实现了图片保真，保证图片显示的还原度，提升了图像辨识度。

图3示出了建立多组图像容器示意图，如图3所示，在一个实施例中，获取多个图像的分辨率信息，建立多组图像容器，包括：

步骤S302：获取多个图像的分辨率信息，确定每一图像的像素数据；

步骤S304：根据每一图像的像素数据，确定在分辨率信息上属于同类型的图像；

步骤S306：根据在分辨率信息上属于同类型的图像，建立多组图像容器。

通过前端或后端接口多个图像中每一个图像的分辨率信息，确定每一图像的像素数据。例如，多个图像包括图像1、图像2、图像3和图像4，获取图像1的分辨率信息为“300×200”，确定图像1的像素数据，获取图像2的分辨率信息为“300×100”，确定图像2的像素数据，获取图像3的分辨率信息为“200×100”，确定图像3的像素数据，获取图像4的分辨率信息为“200×200”，确定图像4的像素数据，获取图像5的分辨率信息为“195×195”，确定图像5的像素数据；根据以上获取的每一个图像的像素数据来确定在分辨率信息上属于同类型的图像，在分辨率信息上属于同类型的图像可以划分为一组，根据在分辨率信息上属于同类型的图像，建立多组图像容器。利用同类型的图像来建立图像容器，与固定尺寸的容器相比，实现了图像容器尺寸的动态变化，能够适配图像的原始分辨率，实现图像的保真显示。

图4示出了确定在分辨率信息上属于同类型的图像过程示意图，如图4所示，在一个实施例中，每一图像的像素数据，包括：横向像素数据和纵向像素数据；

根据每一图像的像素数据，确定在分辨率信息上属于同类型的图像，包括：

步骤S402：将每一图像的横向像素数据和纵向像素数据分别进行排序，确定横向像素数据集合和纵向像素数据集合；

步骤S404：将横向像素数据集合或纵向像素数据集合中像素数值相同的图像或像素数值相近的图像确定为在分辨率信息上属于同类型的图像，其中，像素数值相近的图像是指像素数值小于像素数值相等的图像的像素数值且大于控制阈值的图像。

利用上述获取的图像1、图像2、图像3、图像4和图像5的分辨率信息得到的像素数据中，图像1的横向像素数据为300，纵向像素数据为200，图像2的横向像素数据为300，纵向像素数据为100，图像3的横向像素数据为200，纵向像素数据为100，图像4的横向像素数据为200，纵向像素数据为200，图像5的横向像素数据为195，纵向像素数据为195。将多个图像中每一图的横向像素数据和纵向像素数据分别进行排序，确定横向像素数据集合和纵向像素数据集合；例如，将图像1、图像2、图像3、图像4和图像5的横向像素数据进行排序，得到{195，200，200，300，300}作为横向像素数据集合；将图像1、图像2、图像3和图像4的纵向像素数据进行排序，得到{100，100，195，200，200}作为纵向像素数据集合。将横向像素数据集合或纵向像素数据集合中像素数值相同的图像或像素数值相近的图像确定为在分辨率信息上属于同类型的图像。

例如，在横向像素数据集合中{195，200，200，300，300}，像素数值相同是200和300，对应的像素数值相同的图像为两组，第一组为图像3和图像4，横向像素均为200；第二组为图像1和图像2，横向像素均为300。设定控制阈值为190像素值，那么190<195<200，图像5为像素数值相近的图像，因此可以将图像5划入第一组；从横向上进行分类得到的在分辨率信息上属于同类型的图像具有两组，第一组包括图像3、图像4和图像5，第二组包括图像1和图像2。

例如，在纵向像素数据集合中{100，100，195，200，200}，像素数值相同是100和200，对应的像素数值相同的图像为两组，第一组为图像2和图像3，纵向像素均为100；第二组为图像1和图像4，纵向像素均为200。设定控制阈值为190像素值，那么190<195<200，图像5为像素数值相近的图像，因此可以将图像5划入第二组；从纵向上进行分类得到的在分辨率信息上属于同类型的图像具有两组，第一组包括图像2和图像3，第二组包括图像1、图像4和图像5。

图5示出了建立多组图像容器具体过程示意图，如图5所示，根据在分辨率信息上属于同类型的图像，建立多组图像容器，包括：

步骤S502：将在分辨率信息上属于同类型的图像划分为一组，确定出每组图像中最大的横向像素数值或最大的纵向像素数值；

步骤S504：将最大的横向像素数值或最大的纵向像素数值作为图像容器宽度值，建立多组图像容器宽度值不同的图像容器。

如图6所示的横向图像容器示意图，在横向分类时，将在分辨率信息上属于同类型的图像3、图像4和图像5划分为第一组，将在分辨率信息上属于同类型的图像1和图像2划分为第二组，确定出每组图像中最大的横向像素数值，第一组中最大的横向像素数值为200，第二组中最大的横向像素数值为300，将第一组中最大的横向像素数值200作为图像容器宽度值，建立第一组图像容器A1，将第二组中最大的横向像素数值300作为图像容器宽度值，建立第二组图像容器A2。得到的第一组图像容器A1与第二组图像容器A2在图像容器宽度值上不同。

如图7所示的纵向图像容器示意图，在纵向分类时，将在分辨率信息上属于同类型的图像2和图像3划分为第一组，将在分辨率信息上属于同类型的图像1、图像4和图像5划分为第二组，确定出每组图像中最大的纵向像素数值，第一组中最大的纵向像素数值为100，第二组中最大的纵向像素数值为200，将第一组中最大的纵向像素数值100作为图像容器宽度值，建立第一组图像容器B1，将第二组中最大的纵向像素数值200作为图像容器宽度值，建立第二组图像容器B2。得到的第一组图像容器B1与第二组图像容器B2在图像容器宽度值上不同。

由于在建立图像容器时仅限定了图像容器宽度值，并没有限定图像容器长度值，因此图像容器在长度上并没有限制，具体随着图像容器中所容纳的图像的多少而变化，这种只限制宽度不限制长度的图像布局方式称为瀑布流布局，当图像容器中的图像按照横向排列时，称为横向瀑布流布局，当图像容器中的图像按照纵向排列时，称为纵向瀑布流布局。

图8示出了确定多组图像容器在显示区域的排列布局示意图，如图8所示，根据显示区域的分辨率信息和多组图像容器，确定多组图像容器在显示区域的排列布局，包括：

步骤S802：根据显示区域的分辨率信息，确定显示区域的横向像素数值和纵向像素数值；

步骤S804：根据显示区域的横向像素数值和纵向像素数值与多组图像容器中每一图像容器的图像容器宽度值，确定多组图像容器在显示区域的排列布局。

显示区域用于显示图像容器以及图像容器中的图像，显示区域位于显示设备，以前述的分辨率为“1920×1080”的显示设备为例，显示区域的分辨率信息为“500×1080”，则显示区域的横向像素数值为500(个)，显示区域的纵向像素数值为1080(个)，根据显示区域的横向像素数值和纵向像素数值，与多组图像容器中每一图像容器的图像容器宽度值，确定多组图像容器在显示区域的排列布局。本实施例通过动态计算图像容器与显示区域的横向像素数值关系，以及图像容器与显示区域与纵向像素数值的关系，以得到多组图像容器在显示区域的排列布局，实现了图像容器的动态排列布局，提升了图像展示的美观性。

图9示出了确定多组图像容器在显示区域的排列布局具体过程示意图，如图9所示，根据显示区域的横向像素数值和纵向像素数值与多组图像容器中每一图像容器的图像容器宽度值，确定多组图像容器在显示区域的排列布局，包括：

步骤S902：根据显示区域的横向像素数值和纵向像素数值，建立显示页面容器；

步骤S904：根据多组图像容器中每一图像容器的图像容器宽度值，将所多组图像容器在显示页面容器中按照横向或纵向进行排列，直至排满显示页面容器，确定多组图像容器在显示页面容器的排列布局。

实施例中，根据上述的显示区域的横向像素数值500和纵向像素数值1080，建立显示页面容器。将显示区域的横向像素数值500作为显示页面容器的横向长度，将显示区域的纵向像素数值1080作为显示页面容器的纵向长度，根据显示页面容器的横向长度和显示页面容器的纵向长度建立显示页面容器。多组图像容器中，每一图像容器都具有图像容器宽度值。

如图10所示的图像容器横向排列布局示意图，实施例中，当进行横向排列时，在显示设备P上具有显示区域Q，以上述的第一组图像容器A1和第二组图像容器A2为例，第一组图像容器A1的图像容器宽度值为200，第二组图像容器A2的图像容器宽度值为300，将横向分类的第一组图像容器A1按照横向排列的方式置入显示页面容器进行排列，再将第二组图像容器A2按照横向排列的方式置入显示页面容器进行排列，此时第一组图像容器A1和第二组图像容器A2的图像容器宽度值之和为200+300＝500，刚好等于显示区域的横向像素数值500，此时排满了显示页面容器，可以得到第一组图像容器A1和第二组图像容器A2在显示页面容器的排列布局。

如图11所示的图像容器横向排列布局示意图，实施例中，当进行纵向排列时，在显示设备P上具有显示区域Q，以上述的第一组图像容器B1和第二组图像容器B2为例，第一组图像容器B1的图像容器宽度值为100，第二组图像容器B2的图像容器宽度值为200，将纵向分类的第一组图像容器B1按照纵向排列的方式置入显示页面容器进行排列，再将第二组图像容器B2按照纵向排列的方式置入显示页面容器进行排列，此时第一组图像容器B1和第二组图像容器B2的图像容器宽度值之和为100+200＝300，而显示区域的纵向像素数值1080，还未达到排满显示页面容器的程度，但此时已无新的图像进行填充，因此就相当于第一组图像容器B1和第二组图像容器B2填充满了显示页面容器，将第一组图像容器B1和第二组图像容器B2设置于显示页面容器的居中位置，可以得到第一组图像容器B1和第二组图像容器B2在显示页面容器的排列布局。

实施例中，还包括：当显示页面容器排满时，若图像容器仍有剩余，则在下一显示页面中新建与显示页面容器相同的下一显示页面容器；将剩余的图像容器排列在下一显示页面容器。

例如当进行横向排列时，在第一组图像容器A1和第二组图像容器A2的基础上，额外还有第三组图像容器A3和第四组图像容器A4，第三组图像容器A3的图像容器宽度值为150，第四组图像容器A4的图像容器宽度值为250，第一组图像容器A1和第二组图像容器A2已经将显示页面容器排满，则在下一显示页面中新建与显示页面容器相同的下一显示页面容器，将第三组图像容器A3和第四组图像容器A4排列在下一显示页面容器，第三组图像容器A3和第四组图像容器A4的图像容器宽度值之和为150+250＝400，还未达到排满下一显示页面容器的程度，但此时已无新的图像进行填充，则相当于第三组图像容器A3和第四组图像容器A4填充满了下一显示页面容器，将第三组图像容器A3和第四组图像容器A4设置与下一显示页面容器的集中位置，可以得到第三组图像容器A3和第四组图像容器A4在下一显示页面容器的排列布局。

实施例中，渲染显示多组图像容器中容纳的图像，包括：渲染显示显示页面容器以及在显示页面容器中进行排列布局的多组图像容器；根据多个图像的分辨率信息，确定每一图像的标签；根据每一图像的标签，在多组图像容器中渲染显示图像。上述图像的标签为IMG标签。

图12示出了纵向排列布局的多组图像容器示意图，图13示出了横向排列的多组图像容器示意图，如图12和图13所示，当具有多个图像时，获取多个图像的分辨率，确定每一像素的像素数据，其中，每一图像的像素数据，包括：横向像素数据和纵向像素数据，将每一图像的横向像素数据和纵向像素数据分别进行排序，确定横向像素数据集合和纵向像素数据集合，将横向像素数据集合或纵向像素数据集合中像素数值相同的图像或像素数值相近的图像确定为在分辨率信息上属于同类型的图像，将在分辨率信息上属于同类型的图像划分为一组，确定出每组图像中最大的横向像素数值或最大的纵向像素数值，将最大的横向像素数值或最大的纵向像素数值作为图像容器宽度值，建立多组图像容器宽度值不同的图像容器，根据显示区域的分辨率信息，确定显示区域的横向像素数值和纵向像素数值，根据显示区域的横向像素数值和纵向像素数值，建立显示页面容器；根据多组图像容器中每一图像容器的图像容器宽度值，将所多组图像容器在显示页面容器中按照横向或纵向进行排列，直至排满显示页面容器，确定多组图像容器在显示页面容器的排列布局，渲染显示多组图像容器中容纳的图像。

需要注意的是，本公开技术方案中对数据的获取、存储、使用、处理等均符合国家法律法规的相关规定，本公开实施例中获取的个人、客户和人群等相关的个人身份数据、操作数据、行为数据等多种类型的数据，均已获得授权。

基于同一发明构思，本公开实施例中还提供了一种图像显示装置，如下面的实施例。由于该装置实施例解决问题的原理与上述方法实施例相似，因此该装置实施例的实施可以参见上述方法实施例的实施，重复之处不再赘述。

图14示出本公开实施例中一种图像显示装置示意图，如图14所示，该装置包括：

图像容器建立模块1401，用于获取多个图像的分辨率信息，建立多组图像容器，其中，每组图模块，用于像容器用于容纳在分辨率信息上属于同类型的图像；

图像容器排列布局确定模块1402，用于根据显示区域的分辨率信息和多组图像容器，确定多组图像容器在显示区域的排列布局；

渲染显示模块1403，用于渲染显示多组图像容器中容纳的图像。

此处需要说明的是，上述图像容器建立模块1401、图像容器排列布局确定模块1402和渲染显示模块1403对应于方法实施例中的S202～S206，上述模块与对应的步骤所实现的示例和应用场景相同，但不限于上述方法实施例所公开的内容。需要说明的是，上述模块作为装置的一部分可以在诸如一组计算机可执行指令的计算机系统中执行。

所属技术领域的技术人员能够理解，本公开的各个方面可以实现为系统、方法或程序产品。因此，本公开的各个方面可以具体实现为以下形式，即：完全的硬件实施方式、完全的软件实施方式(包括固件、微代码等)，或硬件和软件方面结合的实施方式，这里可以统称为“电路”、“模块”或“系统”。

下面参照图15来描述根据本公开的这种实施方式的电子设备1500。图15显示的电子设备1500仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图15所示，电子设备1500以通用计算设备的形式表现。电子设备1500的组件可以包括但不限于：上述至少一个处理单元1510、上述至少一个存储单元1520、连接不同系统组件(包括存储单元1520和处理单元1510)的总线1530。

其中，所述存储单元存储有程序代码，所述程序代码可以被所述处理单元1510执行，使得所述处理单元1510执行本说明书上述“示例性方法”部分中描述的根据本公开各种示例性实施方式的步骤。例如，所述处理单元1510可以执行上述方法实施例的如下步骤：获取多个图像的分辨率信息，建立多组图像容器，其中，每组图像容器用于容纳在分辨率信息上属于同类型的图像；根据显示区域的分辨率信息和所述多组图像容器，确定所述多组图像容器在所述显示区域的排列布局；渲染显示所述多组图像容器中容纳的图像。

存储单元1520可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)15201和/或高速缓存存储单元15202，还可以进一步包括只读存储单元(ROM)15203。

存储单元1520还可以包括具有一组(至少一个)程序模块15205的程序/实用工具15204，这样的程序模块15205包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线1530可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备1500也可以与一个或多个外部设备1540(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备1500交互的设备通信，和/或与使得该电子设备1500能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口1550进行。并且，电子设备1500还可以通过网络适配器1560与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器1560通过总线1530与电子设备1500的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备1500使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、终端装置、或者网络设备等)执行根据本公开实施方式的方法。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机程序产品，该计算机程序产品包括：计算机程序，所述计算机程序被处理器执行时实现上述图像显示方法。

在本公开的示例性实施例中，还提供了一种计算机可读存储介质，该计算机可读存储介质可以是可读信号介质或者可读存储介质。其上存储有能够实现本公开上述方法的程序产品。在一些可能的实施方式中，本公开的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在终端设备上运行时，所述程序代码用于使所述终端设备执行本说明书上述“示例性方法”部分中描述的根据本公开各种示例性实施方式的步骤。

本公开中的计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

在本公开中，计算机可读存储介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

可选地，计算机可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

在具体实施时，可以以一种或多种程序设计语言的任意组合来编写用于执行本公开操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。

此外，尽管在附图中以特定顺序描述了本公开中方法的各个步骤，但是，这并非要求或者暗示必须按照该特定顺序来执行这些步骤，或是必须执行全部所示的步骤才能实现期望的结果。附加的或备选的，可以省略某些步骤，将多个步骤合并为一个步骤执行，以及/或者将一个步骤分解为多个步骤执行等。

通过以上实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、移动终端、或者网络设备等)执行根据本公开实施方式的方法。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由所附的权利要求指出。

Claims (10)

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

获取多个图像的分辨率信息，建立多组图像容器，其中，每组图像容器用于容纳在分辨率信息上属于同类型的图像；

根据显示区域的分辨率信息和所述多组图像容器，确定所述多组图像容器在所述显示区域的排列布局；

渲染显示所述多组图像容器中容纳的图像。

2.根据权利要求1所述的图像显示方法，其特征在于，获取多个图像的分辨率信息，建立多组图像容器，包括：

获取多个图像的分辨率信息，确定每一图像的像素数据；

根据每一图像的像素数据，确定在分辨率信息上属于同类型的图像；

根据在分辨率信息上属于同类型的图像，建立多组图像容器。

3.根据权利要求2所述的图像显示方法，其特征在于，所述每一图像的像素数据，包括：横向像素数据和纵向像素数据；

根据每一图像的像素数据，确定在分辨率信息上属于同类型的图像，包括：

将每一图像的横向像素数据和纵向像素数据分别进行排序，确定横向像素数据集合和纵向像素数据集合；

将所述横向像素数据集合或所述纵向像素数据集合中像素数值相同的图像或像素数值相近的图像确定为在分辨率信息上属于同类型的图像，其中，所述像素数值相近的图像是指像素数值小于所述像素数值相等的图像的像素数值且大于控制阈值的图像。

4.根据权利要求2所述的图像显示方法，其特征在于，根据在分辨率信息上属于同类型的图像，建立多组图像容器，包括：

将在分辨率信息上属于同类型的图像划分为一组，确定出每组图像中最大的横向像素数值或最大的纵向像素数值；

将所述最大的横向像素数值或最大的纵向像素数值作为图像容器宽度值，建立多组图像容器宽度值不同的图像容器。

5.根据权利要求4所述的图像显示方法，其特征在于，根据显示区域的分辨率信息和所述多组图像容器，确定所述多组图像容器在所述显示区域的排列布局，包括：

根据显示区域的分辨率信息，确定显示区域的横向像素数值和纵向像素数值；

根据显示区域的横向像素数值和纵向像素数值与所述多组图像容器中每一图像容器的图像容器宽度值，确定所述多组图像容器在所述显示区域的排列布局。

6.根据权利要求5所述的图像显示方法，其特征在于，根据显示区域的横向像素数值和纵向像素数值与所述多组图像容器中每一图像容器的图像容器宽度值，确定所述多组图像容器在所述显示区域的排列布局，包括：

根据显示区域的横向像素数值和纵向像素数值，建立显示页面容器；

根据所述多组图像容器中每一图像容器的图像容器宽度值，将所多组图像容器在所述显示页面容器中按照横向或纵向进行排列，直至排满所述显示页面容器，确定所述多组图像容器在所述显示页面容器的排列布局。

7.根据权利要求6所述的图像显示方法，其特征在于，还包括：当所述显示页面容器排满时，若所述图像容器仍有剩余，则在下一显示页面中新建与所述显示页面容器相同的下一显示页面容器；

将剩余的图像容器排列在下一显示页面容器。

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

图像容器建立模块，用于获取多个图像的分辨率信息，建立多组图像容器，其中，每组图模块，用于像容器用于容纳在分辨率信息上属于同类型的图像；

图像容器排列布局确定模块，用于根据显示区域的分辨率信息和所述多组图像容器，确定所述多组图像容器在所述显示区域的排列布局；

渲染显示模块，用于渲染显示所述多组图像容器中容纳的图像。

9.一种电子设备，其特征在于，包括：

处理器；以及

存储器，用于存储所述处理器的可执行指令；

其中，所述处理器配置为经由执行所述可执行指令来执行权利要求1～7中任意一项所述的图像显示方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1～7中任意一项所述的图像显示方法。