一种图片的分段式显示方法、装置、设备及介质

技术领域

本申请涉及显示技术领域，尤其涉及一种图片的分段式显示方法、装置、设备及介质。

背景技术

长图片的处理环节是显示技术领域不可缺少的部分，它的作用对于用户浏览各种长图片来说至关重要，当前的长图片的处理环节中，通常是将图片进行压缩，然后再一次性展示在设备上。一方面，压缩后的图片，展示后会变得模糊，并且展示效果差；另一方面，进行压缩后的图片在一些低端的设备上展示时，可能会出现内存溢出的情况，导致图片无法正常使用，用户的体验感非常差。

因此，如何更好的显示长图，以便于提供更好的展示效果，提升用户体验成为亟待解决的问题。

发明内容

基于此，本申请实施例提供了一种图片的分段式显示方法、装置、设备及介质，以解决目前压缩后的图片，展示后会变得模糊，并且展示效果差的问题。

第一方面，本申请实施例提供一种图片的分段式显示方法，包括：

获取待显示的长图片，所述长图片的高度大于显示终端的屏幕高度；

对所述长图片进行解码分割处理，所述解码分割处理后得到n张分割图，各个所述分割图的高度均小于或等于所述显示终端的屏幕高度，n>1；

在n张所述分割图中选取m张用于显示的分割图，m≤n；

基于瀑布流框架，分段式加载m张所述分割图。

第二方面，本申请实施例提供一种图片的分段式显示装置，包括：

图片信息获取模块，用于获取待显示的长图片，所述长图片的高度大于显示终端的屏幕高度；

分割图信息获取模块，用于对所述长图片进行解码分割处理，所述解码分割处理后得到n张分割图，各个所述分割图的高度均小于所述显示终端的屏幕高度，n>1；

分割图选取模块，用于在n张所述分割图中选取m张用于显示的分割图，m≤n；

分割图加载模块，基于瀑布流框架，分段式加载m张所述分割图。

第三方面，本申请实施例提供一种终端设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述第一方面所述的分段式显示方法。

第四方面，本申请实施例提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现所述的分段式显示方法的步骤。

本申请实施例相对于现有技术相比存在的有益效果是：

本申请的一种图片的分段式显示方法、装置、设备及介质，首先对待显示的长图片进行解码分割处理，得到n张分割图，再从n张分割图中筛选获取在显示终端的当前屏幕内进行显示的m张分割图，基于瀑布流框架分段式加载展示m张分割图，本申请的一种图片的分段式显示方法通过分割长图，得到n个分割图，再从n个分割图中筛选得到m个分割图，将筛选得到的m个分割图分段式的依次加载到瀑布流框架中，以更加高效流畅的方式加载显示了长图片，提高了图片的质量，在保证展示效果的同时，提高了用户体验。

附图说明

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

图1是本申请一实施例提供的一种图片的分段式显示方法的一应用环境示意图；

图2是本申请一实施例提供的一种图片的分段式显示方法的流程示意图；

图3是本申请一实施例提供的一种图片的分段式显示方法的另一流程示意图；

图4是本申请一实施例提供的一种图片的分段式显示方法的另一流程示意图；

图5是本申请一实施例提供的一种图片的分段式显示方法的另一流程示意图；

图6是本申请一实施例提供的一种图片的分段式显示装置的结构示意图；

图7是

具体实施方式

以下描述中，为了说明而不是为了限定，提出了诸如特定系统结构、技术之类的具体细节，以便透彻理解本申请实施例。然而，本领域的技术人员应当清楚，在没有这些具体细节的其它实施例中也可以实现本申请。在其它情况中，省略对众所周知的系统、装置、电路以及方法的详细说明，以免不必要的细节妨碍本申请的描述。

应当理解，当在本申请说明书和所附权利要求书中使用时，术语“包括”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。

还应当理解，在本申请说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。

如在本申请说明书和所附权利要求书中所使用的那样，术语“如果”可以依据上下文被解释为“当...时”或“一旦”或“响应于确定”或“响应于检测到”。类似地，短语“如果确定”或“如果检测到[所描述条件或事件]”可以依据上下文被解释为意指“一旦确定”或“响应于确定”或“一旦检测到[所描述条件或事件]”或“响应于检测到[所描述条件或事件]”。

另外，在本申请说明书和所附权利要求书的描述中，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

在本申请说明书中描述的参考“一个实施例”或“一些实施例”等意味着在本申请的一个或多个实施例中包括结合该实施例描述的特定特征、结构或特点。由此，在本说明书中的不同之处出现的语句“在一个实施例中”、“在一些实施例中”、“在其他一些实施例中”、“在另外一些实施例中”等不是必然都参考相同的实施例，而是意味着“一个或多个但不是所有的实施例”，除非是以其他方式另外特别强调。术语“包括”、“包含”、“具有”及它们的变形都意味着“包括但不限于”，除非是以其他方式另外特别强调。

应理解，以下实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。

为了说明本申请的技术方案，下面通过具体实施例来进行说明。

本申请一实施例提供的一种图片的分段式显示方法，可应用在如图1的应用环境中，具体地，本申请的一种图片的分段式显示方法应用在计算机系统中，该系统包括如图1所示的客户端和服务器，客户端与服务器通过网络进行通信，客户端又称为显示终端，是指与服务器相对应，为客户提供本地服务的程序。客户端可安装在但不限于各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备上。服务器可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

参见图2，是本申请的一种图片的分段式显示方法的流程示意图，上述基于图片的分段式显示方法应用于图1中的客户端中，例如，平板电脑，笔记本电脑等设备。

在一实施例中，如图2所示，所述一种图片的分段式显示方法可以包括以下步骤：

步骤S21，获取待显示的长图片，所述长图片的高度大于显示终端的屏幕高度；

具体地，待显示的长图片是需要在显示屏幕内进行显示的图片，显示终端发送展示图片指令，并从服务器获取相应的待展示图片信息，并在显示终端的屏幕上显示，获取的信息有待展示长图片的信息以及对应的图片控件，长图片的信息指图片的高度信息和宽度信息，图片控件是指专门用于加载图片的控件，其可能包含的信息包括图片本身、图片描述，如高度信息、宽度信息等。

本步骤中，长图片的高度数值大于显示终端的屏幕高度数值，长图片的宽度数值与显示屏幕的宽度数值相同。

步骤S22，对所述长图片进行解码分割处理，所述解码分割处理后得到n张分割图，各个所述分割图的高度均小于或等于所述显示终端的屏幕高度，n>1；

具体地，针对长图片进行解码分割处理，可以是对长图片进行横向分割，也可以是对长图片进行纵向分割，也可以既有横向分割，也有纵向分割，解码分割后得到n个分割图，分割图的高度可以小于显示终端的屏幕的高度，也可以等于显示终端的屏幕高度。因此，针对不同的长图片可以预先设置不同的分割规则，以对图片起到较好的分割效果。

步骤S23，在n张所述分割图中选取m张用于显示的分割图，m≤n；

具体地，在对长图片进行解码分割处理之后，获取到n张分割图，针对n张分割图，从n张分割图再次筛选获取m张分割图，m张分割图的选取规则是：选取在显示终端的当前屏幕内进行显示的分割图，即选取显示在用户视野范围内中间区域的分割图，且m张分割图的数量小于n张分割图的数量。

举例说明，对一张待展示的长图片进行横向平均分割，分割五次，得到n＝6的六张高度数值和宽度数值都相等的分割图，对六张分割图进行编号，按照顺序依次排列为n1,n2...n6，从六张分割图中再次筛选获取m＝2的两张分割图，这两张分割图是在显示终端的当前屏幕内进行显示的分割图。

步骤S24，基于瀑布流框架，分段式加载m张所述分割图。

具体地，长图片中包含n个分割图，n个分割图中又包含m个分割图，针对于获取的n张分割图，每个分割图均关联一个预设的图片控件，同理，m张分割图也关联相对应的预设的图片控件。基于已获取的m张分割图的具体信息，依次将m张分割图和分割图对应的预设的图片控件按照顺序分段式的依次加载到瀑布流框架上，即加载到显示屏幕的页面上。

图片控件是指专门用于加载图片的控件，其可能包含的信息包括图片本身、图片描述如高度信息、宽度信息等。这里的“基于瀑布流框架，分段式加载m张所述分割图”可以与现有技术中将各个图片控件和对应的图片加载到瀑布流中的方式一致，在此不再进行进一步的说明。

本申请实施例的一种图片的分段式显示方法，首先对待显示的长图片进行解码分割处理，得到n张分割图，再从n张分割图中选取用于显示的m张分割图，基于瀑布流框架分段式加载展示m张分割图，本申请的一种图片的分段式显示方法通过分割长图，得到n个分割图，再从n个分割图中筛选得到m个分割图，将筛选得到的m个分割图分段式的依次加载到瀑布流框架中，以更加高效流畅的方式加载显示了长图片，提高了图片的质量，在保证展示效果的同时，提高了用户体验。

在一实施例中，如图3所示，步骤S22中，对所述长图片进行解码分割处理，所述解码分割处理后得到n张分割图，可以包括以下步骤：

步骤S31，获取所述长图片的高度和宽度；

具体地，对待显示的长图片进行解析，获取长图片的具体信息，该长图片信息包括待展示的图片本身、待展示的图片描述，如高度数值、宽度数值等

步骤S32，根据所述长图片的高度和宽度，计算得到各个所述分割图的高度和宽度；

具体地，在得到长图片的高度数值和宽度数值之后，首先预设一个图像分割规则，根据预设的图像分割规则，计算得到各个分割图的高度和宽度，预设的图像分割规则可以是对长图片进行纵向分割，也可以是对长图片进行横向分割，分割的次数和分割的比例，根据具体的使用情况设置。

步骤S33，按照各个所述分割图的高度和宽度，对所述长图片进行分割，得到n张所述分割图。

具体地，在计算得到各个分割图的高度数值和宽度数值之后，根据高度数值和宽度数值对长图片进行分割，得到相应的n张分割图。

举例说明，对于一张高度数值为100，宽度数值为60的长图片，预设图像分割规则是对长图片进行横向平均分割，且分割三次，则根据预设图像分割规则可以计算得到n＝4的4张分割图，对四张分割图进行编号，分别为n1、n2，n3，n4，每个分割图的高度数值均为25，宽度数值均为60。

本申请实施例的一种图片的分段式显示方法，通过获取长图片的高度、宽度信息，预设图像的分割规则，根据分割规则得到分割图的高度、宽度信息，基于分割图的高度、宽度信息进行分割，得到n张分割图，以便后续步骤中得到在显示终端的屏幕内进行展示的m张分割图。

在一实施例中，对所述长图片进行分割之后，得到各个所述分割图的高度相等，各个所述分割图的宽度相等。

具体地，预设图像的分割规则，根据分割规则对长图片进行分割，在对长图片进行分割之后，得到各个分割图的高度信息、宽度信息，各个分割图的高度相等、宽度相等。

举例说明，一张待展示的长图片高度数值为100，宽度数值为80，预设图像规则是对该长图片进行横向平均分割，且分割一次，则可以得到n＝2的两张分割图，对两张分割图进行编号，分别为n1、n2，其中，n1、n2的高度数值和宽度数值均相同，高度数值为50，宽度数值为80。

本申请实施例的一种图片的分段式显示方法，首先预设图像的分割规则，根据分割规则分割长图片，得到分割后图片的高度信息、宽度信息，以便后续步骤中得到在显示终端的屏幕内进行展示的m张分割图。

在一实施例中，对所述长图片进行分割之后，得到所有分割图中存在部分分割图的高度大于另一部分分割图的高度。

具体地，基于图像分割规则的设置，在对长图片进行分割之后，可以得到每个分割图的高度信息和宽度信息，还可以得到分割图中部分分割图的高度大于另一部分分割图的高度的信息。

举例说明，可以对一张待展示的长图片进行纵向分割之后，对于分割得到的各列图像再次进行横向分割，对于中间列的图像和非中间列的图像按照设置的不同比例分割，例如，对于中间列的图像的横向分割比例可以设置为1：2：1，分割后的图像编号从上到下依次排列为n12、n22、n32，对于非中间列(例如第一列)的图像的横向分割比例可以设置为1：1：1：1，分割后的图像编号从上到下依次排列为n11、n21、n31、n41；其中，各个分割图(n12、n22、n32、n11、n21、n31、n41)的宽度数值相同，图像编号为n22的分割图的高度数值大于其他分割图的高度数值。

本申请实施例的一种图片的分段式显示方法，基于预设的图像分割规则，对长图片进行分割，得到分割图的具体信息，以便在后续步骤中选择更加合适的分割图加载到瀑布流框架中。

在一实施例中，如图4所示，步骤S23中，在n张所述分割图中选取m张用于显示的分割图，可以包括以下步骤：

步骤S41，对n张所述分割图进行显示排版，得到n张所述分割图的排版顺序；

具体地，预设图像分割规则，根据预设的图像分割规则，对分割后得到的n张分割图可以按照从左到右、从上到下的排列顺序依次进行显示，得到n张分割图的排版顺序。

步骤S42，按照所述排版顺序，选取用于在所述显示终端的当前屏幕内进行显示m张分割图。

具体地，在获取到n张分割图的排版顺序之后，从n张分割图中选取m张分割图，m张分割图在显示终端的当前屏幕内进行显示，m张分割图的数量小于n张分割图的数量；

本申请实施例的一种图片的分段式显示方法，按照排版顺序，选取用于在显示终端的当前屏幕内进行显示的m张分割图，以便于在后续步骤中将m张分割图和对应预设的图片控件依次加载到瀑布流框架中。

在一实施例中，如图5所示，步骤S24中，基于瀑布流框架，分段式加载m张所述分割图，可以包括以下步骤：

步骤S51，在所述显示终端的屏幕显示页面滚动的过程中，依次将m张所述分割图和对应的图片控件分段式加载到所述瀑布流框架中；

具体地，在显示终端的屏幕显示页面滚动过程中，随着页面的滚动，显示终端向服务器发送待显示的图片加载请求，服务器在接收到图片加载请求后，将m张分割图和m张分割图对应的预设图片控件按照排版顺序依次加载至瀑布流框架中。

步骤S52，回收移出所述显示终端的屏幕的分割图及对应的图片控件。

具体地，在显示终端的屏幕显示页面滚动过程中，随着页面的滚动，随时回收移出显示终端的屏幕的分割图及对应预设的图片控件，并将回收移出的分割图及对应的图片控件放入服务器的数据池中。其中，数据池存放在服务器中，数据池用于存放移出的分割图及对应的图片控件。

本申请实施例一种图片的分段式显示方法，在显示终端的屏幕显示页面滚动的过程中，依次将m张分割图和分割图对应的图片控件分段式加载到瀑布流框架中，同时，回收移出显示终端的屏幕的分割图及对应的图片控件，本申请的一种图片的分段式显示方法以更加高效流畅的方式加载显示了长图片，在保证展示效果的同时，提高了用户体验。

在一实施例中，如图2所示，一种图片的分段式显示方法还可以包括以下步骤：

当所述长图片为背景图片时，在加载m张所述分割图时，位于屏幕显示页面的预设中间区域的所述分割图的高度为第一高度，位于屏幕显示页面的预设非中间区域的所述分割图的高度为第二高度，所述第一高度大于所述第二高度。

具体地，位于屏幕显示页面预设有两类区域，即中间区域和非中间区域，处于非中间区域可以包括左边缘区域和右边缘区域，即左边缘区域、中间区域和右边缘区域构成了屏幕显示页面的整个区域。对于用于在中间区域分布的分割图的高度预设为第一高度，对于用于在非中间区域分布的分割图的高度预设为第二高度，具体设置时使第一高度大于第二高度。

本申请实施例一种图片的分段式显示方法，将位于屏幕显示页面的预设中间区域的分割图的高度设第一高度，位于屏幕显示页面的预设非中间区域的分割图的高度设为第二高度，第一高度大于第二高度，其作用是在屏幕显示页面的滚动速度突然加快时，仍然可以清晰的显示在中间区域分布的分割图，提高图片的显示效果。

对应于上文实施例的一种图片的分段式显示方法，图6示出了本申请一实施例提供的一种图片的分段式显示装置的结构框图，上述图片的分段式显示装置应用于终端设备。为了便于说明，仅示出了与本申请实施例相关的部分。

在一实施例中，如图6所示，一种图片的分段式显示装置包括：

图片信息获取模块61，用于获取待显示的长图片，所述长图片的高度大于显示终端的屏幕高度；

图片分割处理模块62，用于对所述长图片进行解码分割处理，所述解码分割处理后得到n张分割图，各个所述分割图的高度均小于所述显示终端的屏幕高度，n>1；

分割图选取模块63，用于在n张所述分割图中选取m张用于显示的分割图，m≤n；

分割图加载模块64，基于瀑布流框架，分段式加载m张所述分割图。

可选的是，所述图片分割处理模块包括：

长图片信息获取单元，用于获取所述长图片的高度和宽度；

分割图信息获取单元，用于根据所述长图片的高度和宽度，计算得到各个所述分割图的高度和宽度；

分割图获取单元，用于按照各个所述分割图的高度和宽度，对所述长图片进行分割，得到n张所述分割图。

可选的是，所述图片分割处理模块还包括：

分割后信息获取单元，用于对所述长图片进行分割之后，得到各个所述分割图的高度相等，各个所述分割图的宽度相等。

可选的是，所述图片分割处理模块还包括：

高度信息获取单元，用于对所述长图片进行分割之后，得到所有分割图中存在部分分割图的高度大于另一部分分割图的高度。

可选的是，所述分割图选取模块还包括：

排版顺序获取单元，用于对n张所述分割图进行显示排版，得到n张所述分割图的排版顺序；

分割图显示单元，用于按照所述排版顺序，选取用于在所述显示终端的当前屏幕内进行显示m张分割图。

可选的是，所述分割图加载模块还包括：

分割图加载单元，用于在所述显示终端的屏幕显示页面滚动的过程中，依次将m张所述分割图和对应的图片控件分段式加载到所述瀑布流框架中；

分割图回收单元，用于回收移出所述显示终端的屏幕的分割图及对应的图片控件。

可选的是，所述图片的分段式显示装置还包括：

分割图信息获取模块，用于当所述长图片为背景图片时，在加载m张所述分割图时，位于屏幕显示页面的预设中间区域的所述分割图的高度为第一高度，位于屏幕显示页面的预设非中间区域的所述分割图的高度为第二高度，所述第一高度大于所述第二高度。

需要说明的是，上述模块之间的信息交互、执行过程等内容，由于与本申请方法实施例基于同一构思，其具体功能及带来的技术效果，具体可参见方法实施例部分，此处不再赘述。

本发明一实施例还提供一种终端设备，包括存储器、处理器，所述存储器中存储有可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述任意一实施例所述的图片的分段式显示方法的步骤。该终端设备可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如还可以包括网络接口、显示屏和输入装置等。

本发明实施例还提供一种具有处理器可执行的非易失的程序代码的计算机可读介质，所述程序代码使所述处理器执行上述实施例一种所述图片的分段式显示方法。除非另外具体说明，否则在这些实施例中阐述的部件和步骤的相对步骤、数字表达式和数值并不限制本发明的范围。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统和装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。在这里示出和描述的所有示例中，任何具体值应被解释为仅仅是示例性的，而不是作为限制，因此，示例性实施例的其他示例可以具有不同的值。附图中的流程图和框图显示了根据本发明的多个实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也要注意，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

在本中请所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。

基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤而前述的存储介质包括:盘、移动硬盘、只读存储器(ROM,Read-Only Memory)、随机存取存储器(RAM,Random AccessMemory)、磁碟或者光盘等各种可以存储程序代码的介质。最后应说明的是：以上所述实施例，仅为本发明的具体实施方式，用以说明本发明的技术方案，而非对其限制，本发明的保护范围并不局限于此，尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换：而这些修改、变化或者替换，并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。