CN113592872A - 一种图片展示的方法、装置以及计算机存储介质 - Google Patents

Abstract

本公开提供了一种图片展示的方法、装置以及计算机存储介质，其中，该方法包括：获取媒体内容中至少一张目标图片对应的第一图片，以及第一图片的裁剪位置信息；根据裁剪位置信息，对第一图片进行裁剪，得到裁剪后的第二图片；展示媒体内容中的第二图片；响应于针对第二图片的触发事件，从展示第二图片切换到展示第一图片。本公开实施例中，服务器在下发第一图片的同时，会下发第一图片的裁剪位置信息，这样，客户端可以根据该裁剪位置信息对第一图片进行图片裁剪，得到裁剪后的第二图片，也即缩略图，由于服务端对图片中重点内容有判断能力，因此通过这种方式可以得到能够体现完整图片重点内容的缩略图，同时可以节省服务器处理资源。

Description

一种图片展示的方法、装置以及计算机存储介质

技术领域

本公开涉及计算机技术领域，具体而言，涉及一种图片展示的方法、装置以及计算机存储介质。

背景技术

随着互联网技术的不断发展，互联网的信息数据呈现指数级增长，由于终端的图形用户界面的展示尺寸有限，因此在以信息流卡片的形式展示信息时一般会将信息中包含的图片以缩略图的形式进行展示。

目前，一般采用服务端下发完整图片、客户端进行图片裁剪及裁剪后缩略图的展示；或者服务端对完整图片进行裁剪，并将裁剪后的缩略图下发至客户端，客户端直接展示获取到的裁剪后的缩略图；第一种方式中，客户端对图片进行裁剪时一般裁剪的为图片中间区域部分，由于不同图片的重点内容不一致，裁剪后的缩略图中可能不包含完整图片的重点内容的问题；第二种方式中，通过服务器将完整图片中的重点内容裁剪出来，该方式数据处理量较大，需要耗费大量的服务器处理资源，并且在客户端无法展示完整图片。

发明内容

本公开实施例至少提供一种图片展示的方法、装置以及计算机存储介质。

第一方面，本公开实施例提供了一种图片展示的方法，包括：

获取媒体内容中至少一张目标图片对应的第一图片，以及所述第一图片的裁剪位置信息；所述第一图片的清晰度低于所述目标图片的清晰度；

根据所述裁剪位置信息，对所述第一图片进行裁剪，得到裁剪后的第二图片；

展示所述媒体内容中的所述第二图片；

响应于针对所述第二图片的触发事件，从展示所述第二图片切换到展示所述第一图片。

在一种可能的实施方式中，获取媒体内容中的至少一张目标图片对应的第一图片，以及所述第一图片的裁剪位置信息，包括：

获取所述目标图片对应的访问路径和图片处理信息，所述图片处理信息包括图片尺寸信息和目标裁剪策略信息；

基于所述访问路径和所述图片处理信息，获取所述第一图片，以及所述第一图片中与所述图片处理信息匹配的裁剪位置信息，其中，所述裁剪位置信息为基于所述图片尺寸信息指示的第一图片的尺寸，以及所述目标裁剪策略信息指示的待裁剪的第二图片与第一图片的相对位置关系确定的。

在一种可能的实施方式中，根据所述裁剪位置信息，对所述第一图片进行裁剪，得到裁剪后的第二图片，包括：

基于所述裁剪位置信息中指示的待裁剪的第二图片的任一顶点位置在对应的第一图片中的位置信息，确定裁剪起点位置信息；基于所述裁剪位置信息中指示的所述第一图片和所述第二图片的宽度比，确定所述第二图片的宽度信息；以及，基于所述裁剪位置信息中指示的所述第一图片和所述第二图片的高度比，确定所述第二图片的高度信息；

基于确定的所述裁剪起点位置信息、和所述第二图片的宽度信息以及所述第二图片的高度信息，对所述第一图片进行裁剪，得到所述第二图片。

在一种可能的实施方式中，从展示所述第二图片切换到展示所述第一图片，包括：

在页面中添加第一视图窗口；其中，所述第一视图窗口内初始展示的图片内容与所述第二图片的图片内容相同，且所述第一视图窗口的初始尺寸等于所述第二图片的尺寸；

通过调整所述第一视图窗口的尺寸由小到大变化，播放从所述第二图片扩展到所述第一图片的全屏图片内容的动画效果。

在一种可能的实施方式中，在页面中添加第一视图窗口，包括：

将所述第二图片在屏幕中的展示位置，确定为待添加的第一视图窗口的初始位置，根据该初始位置，在所述页面中添加所述第一视图窗口。

在一种可能的实施方式中，所述调整所述第一视图窗口的尺寸由小到大变化，包括：

根据所述第一图片的宽高比和屏幕宽高比，确定最终展示的所述第一图片的全屏图片内容在页面中的最终位置；

根据所述初始位置和所述最终位置，将第一视图窗口的尺寸从所述初始尺寸调整至匹配所述最终位置的尺寸。

在一种可能的实施方式中，根据所述第一图片的宽高比和屏幕宽高比，确定最终展示的所述第一图片的全屏图片内容在页面中的最终位置，包括：

若所述第一图片的宽高比大于或等于所述屏幕宽高比，确定所述第一图片的全屏图片内容在页面的高度方向上居中展示，且所述全屏图片内容的展示宽度等于屏幕宽度；

若所述第一图片的宽高比小于屏幕宽高比，确定所述第一图片的全屏图片内容在页面的高度方向上置顶展示，且所述全屏图片内容的展示宽度等于屏幕宽度。

在一种可能的实施方式中，在页面中添加第一视图窗口之后，所述方法还包括：

下载所述目标图片；

在下载完成所述目标图片后，采用所述目标图片替换所述第一图片进行展示。

在一种可能的实施方式中，若所述全屏图片内容为所述第一图片的部分内容，所述方法还包括：

响应作用在屏幕的滑动操作，展示所述第一图片的其它部分内容。

在一种可能的实施方式中，所述方法还包括：

响应目标触发操作，播放从所述第一图片的全屏图片内容缩小到所述第二图片的图片内容的动画效果。

在一种可能的实施方式中，播放从所述第一图片的全屏图片内容缩小到所述第二图片的图片内容的动画效果，包括：

在展示所述第一图片的全屏图片内容的页面的浮层上，添加第二视图窗口，所述第二视图窗口的初始尺寸与所述全屏图片内容占用的屏幕尺寸匹配；

通过控制所述第二视图窗口的尺寸由大到小变化，播放从所述全屏图片内容缩小到所述第二图片的图片内容的动画效果。

在一种可能的实施方式中，在页面的浮层上展示的所述全屏图片内容根据以下步骤确定：

若所述全屏图片内容中完整包含所述第二图片的图片内容，将所述全屏图片内容作为在浮层上展示的所述第一图片的全屏图片内容；

若所述全屏图片内容中不完整包含所述第二图片的图片内容，调整所述全屏图片内容，使得全屏图片内容中完整包含所述第二图片的图片内容，并将调整后的全屏图片内容作为在浮层上展示的所述第一图片的全屏图片内容。

第二方面，本公开实施例还提供了一种图片展示的装置，包括：

获取模块，用于获取媒体内容中至少一张目标图片对应的第一图片，以及所述第一图片的裁剪位置信息；所述第一图片的清晰度低于所述目标图片的清晰度；

裁剪模块，用于根据所述裁剪位置信息，对所述第一图片进行裁剪，得到裁剪后的第二图片；

第一展示模块，用于展示所述媒体内容中的所述第二图片；

第二展示模块，用于响应于针对所述第二图片的触发事件，从展示所述第二图片切换到展示。

在一种可能的实施方式中，所述获取模块，具体用于获取所述目标图片对应的访问路径和图片处理信息，所述图片处理信息包括图片尺寸信息和目标裁剪策略信息；基于所述访问路径和所述图片处理信息，获取所述第一图片，以及所述第一图片中与所述图片处理信息匹配的裁剪位置信息，其中，所述裁剪位置信息为基于所述图片尺寸信息指示的第二图片的尺寸，以及所述目标裁剪策略信息指示的待裁剪的第二图片与第一图片的相对位置关系确定的。

在一种可能的实施方式中，所述裁剪模块，具体用于基于所述裁剪位置信息中指示的待裁剪的第二图片的任一顶点位置在对应的第一图片中的位置信息，确定裁剪起点位置信息；基于所述裁剪位置信息中指示的所述第一图片和所述第二图片的宽度比，确定所述第二图片的宽度信息；以及，基于所述裁剪位置信息中指示的所述第一图片和所述第二图片的高度比，确定所述第二图片的高度信息；基于确定的所述裁剪起点位置信息、和所述第二图片的宽度信息以及所述第二图片的高度信息，对所述第一图片进行裁剪，得到所述第二图片。

在一种可能的实施方式中，所述第二展示模块，具体用于在页面中添加第一视图窗口；其中，所述第一视图窗口内初始展示的图片内容与所述第二图片的图片内容相同，且所述第一视图窗口的初始尺寸等于所述第二图片的尺寸；通过调整所述第一视图窗口的尺寸由小到大变化，播放从所述第二图片扩展到所述第一图片的全屏图片内容的动画效果。

在一种可能的实施方式中，所述第二展示模块，具体用于将所述第二图片在屏幕中的展示位置，确定为待添加的第一视图窗口的初始位置，根据该初始位置，在所述页面中添加所述第一视图窗口。

在一种可能的实施方式中，所述第二展示模块，具体用于根据所述第一图片的宽高比和屏幕宽高比，确定最终展示的所述第一图片的全屏图片内容在页面中的最终位置；根据所述初始位置和所述最终位置，将第一视图窗口的尺寸从所述初始尺寸调整至匹配所述最终位置的尺寸。

在一种可能的实施方式中，所述第二展示模块，具体用于若所述第一图片的宽高比大于或等于所述屏幕宽高比，确定所述第一图片的全屏图片内容在页面的高度方向上居中展示，且所述全屏图片内容的展示宽度等于屏幕宽度；若所述第一图片的宽高比小于屏幕宽高比，确定所述第一图片的全屏图片内容在页面的高度方向上置顶展示，且所述全屏图片内容的展示宽度等于屏幕宽度。

在一种可能的实施方式中，所述第二展示模块，还用于下载所述目标图片；在下载完成所述目标图片后，采用所述目标图片替换所述第一图片进行展示。

在一种可能的实施方式中，所述第二展示模块，具体用于响应作用在屏幕的滑动操作，展示所述第一图片的其它部分内容。

在一种可能的实施方式中，所述第二展示模块，还用于响应目标触发操作，播放从所述第一图片的全屏图片内容缩小到所述第二图片的图片内容的动画效果。

在一种可能的实施方式中，所述第二展示模块，具体用于在展示所述第一图片的全屏图片内容的页面的浮层上，添加第二视图窗口，所述第二视图窗口的初始尺寸与所述全屏图片内容占用的屏幕尺寸匹配；通过控制所述第二视图窗口的尺寸由大到小变化，播放从所述全屏图片内容缩小到所述第二图片的图片内容的动画效果。

在一种可能的实施方式中，所述第二展示模块，具体用于若所述全屏图片内容中完整包含所述第二图片的图片内容，将所述全屏图片内容作为在浮层上展示的所述第一图片的全屏图片内容；若所述全屏图片内容中不完整包含所述第二图片的图片内容，调整所述全屏图片内容，使得全屏图片内容中完整包含所述第二图片的图片内容，并将调整后的全屏图片内容作为在浮层上展示的所述第一图片的全屏图片内容。

第三方面，本公开可选实现方式还提供一种计算机设备，处理器、存储器，所述存储器存储有所述处理器可执行的机器可读指令，所述处理器用于执行所述存储器中存储的机器可读指令，所述机器可读指令被所述处理器执行时，所述机器可读指令被所述处理器执行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。

第四方面，本公开可选实现方式还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被运行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。

本公开实施例提供的图片展示的方法、装置以及计算机存储介质，客户端获取媒体内容中的多张第一图片，并获取各张第一图片的裁剪位置信息，客户端根据获取到裁剪位置信息，对第一图片进行裁剪，得到裁剪后的第二图片，并展示第二图片；在本公开实施例中，服务器在下发第一图片的同时，会下发第一图片的裁剪位置信息，这样，客户端可以根据该裁剪位置信息对第一图片进行图片裁剪，得到裁剪后的第二图片，也即缩略图，由于服务端对图片中重点内容有判断能力，因此通过这种方式可以得到能够体现完整图片重点内容的缩略图，同时可以节省服务器处理资源。

另外，本公开实施例还可以在触发裁剪后的第二图片后，从展示裁剪后的第二图片，切换到展示完整的第一图片；该过程通过播放展示缩略图片到展示全屏图片内容的过渡动画的方式实现，从而展示图片内容的平滑过渡过程，降低了视觉冲击感。

另外，本公开实施例提供的上述过渡动画的实现方式可以为：在页面中添加第一视图窗口(第一视图窗口也即在该视图窗口中展示的图片的父视图，起到滤镜的作用)、以及第一图片，采用控制第一视图窗口的尺寸变化的方式控制第一图片的展示内容，过渡动画的首帧只展示与裁剪后的第二图片对应的图片内容，通过控制第一视图窗口尺寸逐步扩展，来展示更多图片内容，最后过渡到展示全屏图片内容，如此实现图片内容的平滑过渡。

另外，本公开实施例能够根据裁剪后的第二图片在信息流页面中的展示位置，以及裁剪后的第二图片在所述第一图片中的裁剪位置信息，确定第一图片在页面中的初始占位位置，从而使得与所述裁剪后的第二图片的图片内容一致的内容在屏幕中的展示位置，与过渡动画播放前裁剪后的第二图片在屏幕中的展示位置重合，从而避免了因位置移动带来的视觉上的闪动。

总之，本公开实施例可以在节省服务器处理资源的同时，在客户端实现对第一图片中重点内容的裁剪及展示，此外，还可以在用户触发裁剪后的第二图片后，在页面中展示从裁剪后的第二图片内容顺滑过渡到全屏图片内容的动画特效。

另外，本公开实施例在实现从展示第一图片的全屏图片内容切换到展示第二图片时，同理可以采用类似方式实现平滑过渡，详见实施例的描述。

关于上述图片展示的装置、计算机设备、及计算机可读存储介质的效果描述参见上述图片展示的方法的说明，这里不再赘述。

为使本公开的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本公开实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，此处的附图被并入说明书中并构成本说明书中的一部分，这些附图示出了符合本公开的实施例，并与说明书一起用于说明本公开的技术方案。应当理解，以下附图仅示出了本公开的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本公开实施例所提供的一种图片展示的方法的流程图；

图2示出了本公开实施例所提供的图片展示的方法中，获取第一图片以及该第一图片的裁剪位置信息的具体交互流程图；

图3示出了本公开实施例所提供的图片展示的方法中，一种具体的裁剪后的第二图片与第一图片之间的相对位置关系的示意图；

图4示出了本公开实施例所提供的图片展示的方法中，一种媒体内容中各张第一图片对应的裁剪后的第二图片在展示时的分布情况示意图；

图5示出了本公开实施例所提供的图片展示的方法中，一种包含裁剪后的第二图片的媒体内容具体展示界面的示意图；

图6示出了本公开实施例所提供的图片展示的方法中，一种具体的第一图片在页面中的初始占位位置的示意图；

图7示出了本公开实施例所提供的图片展示的方法中，一种具体的第一图片的全屏图片内容在页面中居中展示的示意图；

图8示出了本公开实施例所提供的图片展示的方法中，一种具体的第一图片的全屏图片内容在页面中置顶展示的示意图；

图9示出了本公开实施例所提供的另一种图片展示的方法的流程图；

图10示出了本公开实施例所提供的又一种图片展示的方法的流程图；

图11示出了本公开实施例所提供的一种图片展示的装置的示意图；

图12示出了本公开实施例所提供的一种计算机设备的示意图。

具体实施方式

为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。通常在此处描述和示出的本公开实施例的组件可以以各种不同的配置来布置和设计。因此，以下对本公开的实施例的详细描述并非旨在限制要求保护的本公开的范围，而是仅仅表示本公开的选定实施例。基于本公开的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本公开保护的范围。

一般服务器可以将清晰度相对较低的完整图片发送给客户端，客户端可以根据系统自带的裁图策略，对接收到的完整图片进行裁剪，从而得到能够在列表页展示的缩略图；但是，根据客户端自带的裁图策略对图片进行裁剪，可能会造成图片裁剪区域不准确，导致无法将该图片重要的部分展示给用户。为了解决该问题，可以通过服务器智能裁图的方法，将图片中重要内容部分裁剪出来，并将该重要内容部分返回给客户端，以便客户端在列表页中展示该经过裁剪后的重要内容部分；但是，此方法数据处理量较大，需要耗费大量的服务器处理资源，而且，当服务器将经过裁剪后的重要内容部分下发给客户端后，若用户存在浏览完整图片的需求时，用户会在屏幕上看到由缩略图变化为完整图片的过程，由于缩略图和完整图片之间存在尺寸的差异，且并不确定缩略图与完整图片之间的相对位置关系，因此，在进行尺寸变化时会给用户造成较强的视觉冲击，影响用户观感。

基于上述研究，本公开提供了一种图片展示的方法、装置以及计算机存储介质，服务器在下发第一图片的同时，会下发第一图片的裁剪位置信息，这样，客户端可以根据该裁剪位置信息对第一图片进行图片裁剪，得到裁剪后的第二图片，也即缩略图，由于服务端对图片中重点内容有判断能力，因此通过这种方式可以得到能够体现完整图片重点内容的缩略图，同时可以节省服务器处理资源。

另外，本公开实施例还可以在用户触发裁剪后的第二图片后，从展示第二图片切换到展示第一图片的全屏图片内容，该过程通过播放展示第二图片到展示全屏图片内容的过渡动画的方式实现，从而展示图片内容的平滑过渡过程，降低了视觉冲击感。

另外，本公开实施例能够根据裁剪后的第二图片在信息流页面中的展示位置，以及裁剪后的第二图片在所述第一图片中的裁剪位置信息，确定第一图片在页面中的初始占位位置，从而使得与所述裁剪后的第二图片的图片内容一致的内容在屏幕中的展示位置，与过渡动画播放前裁剪后的第二图片在屏幕中的展示位置重合，从而避免了因位置移动带来的视觉上的闪动。

总之，本公开实施例可以在节省服务器处理资源的同时，在客户端实现对第一图片中重点内容的裁剪及展示，此外，还可以在用户触发裁剪后的第二图片后，在页面中展示从裁剪后的第二图片内容自然过渡到第一图片的全屏图片内容的动画特效；并且还可以在用户触发第一图片的全屏图片内容后，展示第一图片的全屏图片内容自然过渡到裁剪后的第二图片内容的动画特效。

针对以上方案所存在的缺陷以及所提出的解决方案，均是发明人在经过实践并仔细研究后得出的结果，因此，上述问题的发现过程以及文中本公开针对上述问题所提出的解决方案，都应该是发明人在本公开过程中对本公开做出的贡献。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

为便于对本实施例进行理解，首先对本公开实施例所公开的一种图片展示的方法进行详细介绍，本公开实施例所提供的图片展示的方法的执行主体一般为具有一定计算能力的计算机设备，该计算机设备例如包括：客户端或服务器或其它处理设备，客户端可以为用户设备(User Equipment，UE)、移动设备、用户终端、终端、蜂窝电话、无绳电话、个人数字助理(Personal Digital Assistant，PDA)、手持设备、计算设备、车载设备、可穿戴设备等。在一些可能的实现方式中，该图片展示的方法可以通过处理器调用存储器中存储的计算机可读指令的方式来实现。

下面以执行主体为客户端为例对本公开实施例提供的图片展示的方法加以说明。

参见图1所示，为本公开实施例提供的图片展示的方法的流程图，所述方法包括步骤S101～S104，其中：

S101、获取媒体内容中至少一张目标图片对应的第一图片，以及所述第一图片的裁剪位置信息；所述第一图片的清晰度低于所述目标图片的清晰度。

其中，媒体内容为信息流中的一条多媒体内容；该媒体内容中可以包括文字内容和至少一张目标图片；这里，可以根据前端工程设计(Front End Engineering Design，FEED)技术，对媒体内容中的文字内容进行分析，得到能够以信息流卡片的呈现方式呈现在图形用户界面上的部分内容；并对媒体内容中的至少一张目标图片进行分析，得到能够以信息流卡片的呈现方式呈现在图形用户界面上的第一图片；第一图片为媒体内容中包含目标图片对应的低清图片。

在具体实施中，可以通过下述方法获取媒体内容中的至少一张目标图片对应的第一图片，以及第一图片的裁剪位置信息，具体描述如下述所示：获取目标图片对应的访问路径和图片处理信息；基于访问路径和图片处理信息，获取第一图片，以及第一图片中与图片处理信息匹配的裁剪位置信息。

其中，图片处理信息包括图片尺寸信息和目标裁剪策略信息；这里，图片尺寸信息例如可以包括但不限于：第一图片的尺寸信息和裁剪后的第二图片的尺寸信息；其中，第一图片的尺寸信息中可以包含第一图片的宽度值和高度值，裁剪后的第二图片的尺寸信息中可以包含第二图片的宽度值和高度值；目标裁剪策略信息为信息流服务端根据相关算法对第一图片进行分析，得到该第一图片对应的分析结果，基于该分析结果从预存的多个裁剪策略信息挑选出来的，可以包括左裁策略信息、上裁策略信息、中裁策略信息、右裁策略信息、下裁策略信息等多种策略信息中的至少一种。

其中，裁剪位置信息为基于图片尺寸信息指示的第二图片的尺寸，以及目标裁剪策略信息指示的待裁剪的第二图片与第一图片的相对位置关系确定的；这里，目标裁剪策略信息指示的待裁剪的第二图片与第一图片的相对位置关系例如可以包括但不限于：裁剪后的第二图片的任一顶点位置在对应的第一图片中的位置信息、和裁剪后的第二图片与对应的第一图片的宽度比以及裁剪后的第二图片与对应的第一图片的高度比。

第二图片的任一顶点例如可以包括但不限于：第二图片的左上角顶点、右上角顶点、左下角顶点、右下角顶点中的至少一种；该裁剪后的第二图片的任一顶点位置在对应的第一图片中的位置信息用来表征裁剪起点位置坐标，即裁剪后的第二图片的该顶点在第一图片中的位置坐标；该裁剪后的第二图片与对应的第一图片的宽度比用来计算裁剪后的第二图片的宽度，即将第一图片的宽度与该宽度比相乘，得到裁剪后的第二图片的宽度；该裁剪后的第二图片与对应的第一图片的高度比用来计算裁剪后的第二图片的高度，即将第一图片的高度与该高度比相乘，得到裁剪后的第二图片的高度。

具体的，在媒体内容对应的信息流卡片滑动到屏幕的预设展示位置时，信息流服务端201将该媒体内容中包含的至少一张目标图片对应的统一资源定位符(UniformResource Locator，URL)信息、以及图片处理信息发送给客户端200；客户端200获取到URL信息、以及图片处理信息后，可以基于URL信息、以及图片处理信息，向图片服务端202发送信息获取请求，图片服务端202在获取到客户端200发送的信息获取请求后，将目标图片对应的第一图片、以及第一图片中与图片处理信息匹配的裁剪位置信息反馈至客户端200。

其中，信息流服务端201中存储有多条媒体内容、以及每条媒体内容中包含的目标图片对应的URL信息、以及图片处理信息；图片服务端202中存储有多张目标图片、以及目标图片对应的清晰度相对较低的第一图片。

具体的获取第一图片以及该第一图片的裁剪位置信息的流程如图2所示。

在具体实施中，由于在信息流页面中展示的媒体内容中包含的图片均为经过裁剪后的缩略图，即第二图片，因此，在基于步骤S101获取到第一图片以及该第一图片对应的裁剪位置信息之后，可以基于下述步骤S102，对第一图片进行裁剪，得到裁剪后的第二图片，具体描述如下：

S102、根据所述裁剪位置信息，对所述第一图片进行裁剪，得到裁剪后的第二图片。

在具体实施中，客户端获取到第一图片以及第一图片的裁剪位置信息后，可以基于该裁剪位置信息中指示的待裁剪的第二图片的任一顶点位置在对应的第一图片中的位置信息，确定裁剪起点位置信息；基于裁剪位置信息中指示的第一图片和第二图片的宽度比，确定第二图片的宽度信息；以及，基于裁剪位置信息中指示的第一图片和第二图片的高度比，确定第二图片的高度信息；基于确定的裁剪起点位置信息、和第二图片的宽度信息以及第二图片的高度信息，对第一图片进行裁剪，得到第二图片。

示例性的，可以基于裁剪位置信息中包含的裁剪后的第二图片的任一顶点在第一图片中的位置信息，确定裁剪起点位置坐标；将第一图片的尺寸信息中的宽度值、和裁剪后的第二图片与对应的第一图片的宽度比相乘，得到裁剪后的第二图片的宽度值；将第一图片的尺寸信息中的高度值、和裁剪后的第二图片与对应的第一图片的高度比相乘，得到裁剪后的第二图片的高度值；客户端基于上述确定的裁剪起点位置坐标、和裁剪后的第二图片的宽度值以及裁剪后的第二图片的高度值，对第一图片进行裁剪，得到裁剪后的第二图片。

这里，裁剪后的第二图片的宽高比符合用户界面(User Interface，UI)设计规范；这里，UI设计规范中包含一条媒体内容中包含不同数量的第一图片时，该第一图片对应裁剪后的第二图片的宽高比。

示例性的，若一条媒体内容中包含的第一图片的数量为多张时，每张第一图片对应的裁剪后的第二图片的宽高比为1:1；若一条媒体内容中包含的第一图片的数量为单张、且该张第一图片的宽高比小于等于1:3，则确定该张第一图片对应的裁剪后的第二图片的宽高比为1:3；若一条媒体内容中包含的第一图片的数量为单张、且该张第一图片的宽高比小于等于2:3且大于1:3，则确定将该张第一图片的宽高比作为该第一图片对应的裁剪后的第二图片的宽高比；若一条媒体内容中包含的第一图片的数量为单张、且该张第一图片的宽高比大于2:3，则确定该张第一图片对应的裁剪后的第二图片的宽高比为2:3。

示例性的，若裁剪后的第二图片的任一顶点为裁剪后的第二图片的左上角顶点，第二图片的左上角顶点在第一图片中的位置坐标为(20，20)、且第一图片的尺寸信息为300×500(这里，一般图片的尺寸信息用该图片包含的像素点个数来表征，即该第一图片的宽度值为300个像素点，高度值为500个像素点，且第一图片的左上角顶点为原点)、且第二图片与对应的第一图片的宽度比为1:3、第二图片与对应的第一图片的高度比为1:5，则第二图片的宽度值为100个像素点、高度值为100个像素点；客户端以第二图片的左上角顶点的为裁剪起点，根据确定的第二图片的宽度值和高度值，对第一图片进行裁剪，得到第二图片，具体的第二图片与第一图片之间的相对位置关系如图3所示，图3中示出裁剪后的第二图片的左上角顶点在第一图片中的坐标为(20，20)、第二图片的尺寸信息为：100×100、第一图片的左上角顶点坐标(0，0)、第一图片的右上角顶点坐标(300，0)、第一图片的左下角顶点坐标(0，500)、第一图片的右下角顶点坐标(300，500)、以及第一图片的尺寸信息：300×500。

承接上述S102，本公开实施例提供的图片展示的方法还包括：

S103、展示所述媒体内容中的所述第二图片。

在具体实施中，根据步骤S102得到裁剪后的第二图片后，可以根据第二图片的宽高比、以及屏幕尺寸信息、以及媒体内容中第一图片的数量、以及UI设计规范中的至少一种，确定第二图片在屏幕上的展示尺寸信息，以基于该展示尺寸信息对第二图片进行展示。

这里，不同型号客户端的屏幕尺寸信息不同，该屏幕尺寸信息中可以包含但不限于屏幕大小、分辨率、屏幕密度、独立像素密度、展示宽度值和展示高度值中的至少一种；一般手机的屏幕尺寸信息可以用屏幕所包含的像素点数表征，例如可以包括320×480(即该手机的屏幕宽度值为320个像素点、高度值为480个像素点)、320×640(即该手机的屏幕宽度值为320个像素点、高度值为640个像素点)、720×1080(即该手机的屏幕宽度值为720个像素点、高度值为1080个像素点)中的至少一种。

其中，可以根据裁剪后的第二图片的宽度值与高度值，通过第二图片的宽度值与高度值的比值，确定第二图片的宽高比；UI设计规范中指示出：在不同屏幕尺寸信息下，一条媒体内容中包含不同数量的第一图片时，相邻的两张第一图片对应的第二图片在屏幕中展示时的间隔值(该间隔值包括宽度间隔值和高度间隔值)、以及第一张第一图片对应的第二图片距离屏幕左边界的左边距值、以及最后一张第一图片对应的第二图片距离屏幕右边界的右边距值。

比如，若屏幕尺寸信息为720×1080，若一条媒体内容中仅包含一张第一图片，则UI规范中会规定在展示该第一图片对应的裁剪后的第二图片时，该第二图片距离屏幕左边界的左边距值为：40个像素点、距离屏幕右边界的右边距值为200个像素点；再比如，若屏幕尺寸信息为320×480，若一条媒体内容中仅包含一张第一图片，则UI规范中会规定在展示该第一图片对应的裁剪后的第二图片时，该第二图片距离屏幕左边界的左边距值为：10个像素点、距离屏幕右边界的右边距值为50个像素点；再比如，若屏幕尺寸信息为720×1080，若一条媒体内容中包含三张第一图片，则UI规范中会规定在展示每张第一图片对应的裁剪后的第二图片时，相邻的两张第二图片之间的宽度间隔值为5个像素点、以及第一张第一图片对应的裁剪后的第二图片距离屏幕左边界的左边距值为10个像素点、以及第三张第一图片对应的裁剪后的第二图片距离屏幕右边界的右边距值为10个像素点。

具体的，可以根据媒体内容中的第一图片的图片数量，在UI设计规范中，确定在展示该媒体内容中包含的第一图片分别对应的裁剪后的第二图片时，相邻两张裁剪后的第二图片之间宽度间隔值和高度间隔值、以及第一张第一图片对应的裁剪后的第二图片距离屏幕左边界的左边距值、以及最后一张第一图片对应的裁剪后的第二图片距离屏幕右边界的右边距值，然后根据屏幕尺寸信息、以及该媒体内容中第一图片的图片数量，确定每张第一图片对应的裁剪后第二图片的展示宽度值；再根据各第二图片的宽高比，确定各第二图片的展示高度值，从而确定第二图片的展示尺寸信息。

示例性的，若媒体内容中包含的第一图片的图片数量为三张(包括第一图片1、第一图片2、第一图片3)，根据UI设计规范确定裁剪后的第二图片的宽高比为1:1，屏幕尺寸信息为720×1080(即该手机的屏幕宽度值为720个像素点、高度值为1080个像素点)，若UI设计规范中规定当一条媒体内容中包含三张第一图片时，在展示每张第一图片对应的裁剪后的第二图片时，相邻的两张第一图片分别对应的裁剪后的第二图片在屏幕中展示时的宽度间隔值为5个像素点、以及第一张第一图片对应的裁剪后的第二图片距离屏幕左边界的左边距值为10个像素点、以及第三张第一图片对应的裁剪后的第二图片距离屏幕右边界的右边距值为10个像素点；则通过屏幕尺寸信息中的宽度值720个像素点、减去第一图片1对应的裁剪后的第二图片1与第一图片2对应的裁剪后的第二图片2在屏幕中展示时的宽度间隔值5个像素点、再减去第一图片2对应的裁剪后的第二图片2与第一图片3对应的裁剪后的第二图片3在屏幕中展示时的宽度间隔值5个像素点、再减去第一图片1对应的裁剪后的第二图片1距离屏幕左边界的左边距值为10个像素点、再减去第一图片3对应的裁剪后的第二图片3距离屏幕右边界的右边距值为10个像素点(即720－5－5－10－10＝690个像素点)；然后在通过上述计算结果690个像素点与该媒体内容中包含的第一图片的图片数量3相除，得到每张第一图片对应的裁剪后的第二图片的展示宽度值：230个像素点(即690÷3＝230个像素点)；在确定每张第一图片对应的裁剪后的第二图片的宽度值之后，根据上述裁剪后的第二图片的宽高比1:1，确定每张裁剪后的第二图片的展示高度值为：230个像素点，具体的该媒体内容中各张第一图片对应的裁剪后的第二图片在展示时的分布情况示意图可以为如图4所示，以客户端为手机为例。

在具体实施中，在基于步骤S103，确定裁剪后的第二图片的展示尺寸信息后，可以基于展示尺寸信息，在客户端的屏幕上展示包含裁剪后的第二图片的媒体内容。

示例性的，若媒体内容1中包含的一张第一图片；在媒体内容达到屏幕上的预设展示位置时，信息流服务端会下发该媒体内容中包含的目标图片对应的URL信息和图片处理信息，客户端获取到信息流服务端下发的URL信息后和图片处理信息，可以根据该URL信息和图片处理信息，向图片服务端发送信息获取请求；图片服务端接收到信息获取请求，将第一图片、以及裁剪位置信息发送至客户端；这里裁剪位置信息是基于图片尺寸信息(该图片尺寸信息中包含第一图片的尺寸信息960×1080(即该第一图片的宽度值为960个像素点、高度值为1080个像素点)、以及目标裁剪策略信息指示的裁剪后的第二图片和第一图片之间的相对位置关系确定的，该裁剪位置信息包括：裁剪后的第二图片的左上角顶点在第一图片中的位置坐标为(0，0)、裁剪后的第二图片与对应的第一图片的宽度比为1:2、裁剪后的第二图片与对应的第一图片的高度比为2:3。

客户端在获取到第一图片以及该第一图片对应的裁剪位置信息后，可以根据裁剪后的第二图片与对应的第一图片的宽度比1:2、以及第一图片的宽度值960个像素点，确定该裁剪后的第二图片的宽度值为480个像素点；并根据裁剪后的第二图片与对应的第一图片的高度比2:3、以及第一图片的高度值1080个像素点，确定该裁剪后的第二图片的高度值为720个像素点；客户端根据该裁剪后的第二图片的宽度值和高度值、以及裁剪位置信息中包含的裁剪后的第二图片的左上角顶点在第一图片中的位置坐标为(0，0)，对第一图片进行裁剪，得到该第一图片对应的裁剪后的第二图片。

在得到该第一图片对应的裁剪后的第二图片之后，根据屏幕尺寸信息720×1080(即该屏幕的宽度值为720个像素点、高度值为1080个像素点)、以及UI设计规范中若屏幕尺寸信息为720×1080，在展示单张第一图片对应的裁剪后的第二图片时，第二图片与屏幕左边界之间的左边距为40个像素点、第二图片与屏幕右边界之间的右边距为200个像素点，则确定第一图片对应的裁剪后的第二图片的展示宽度值为480个像素点；根据上述确定的裁剪后的第二图片的展示宽度值480个像素点、以及该裁剪后的第二图片的宽高比(即480:720＝2:3)2:3，确定该裁剪后的第二图片的展示高度值为720个像素点。

在根据上述方法确定该裁剪后的第二图片的展示尺寸信息后，在信息流页面中展示包含该裁剪后的第二图片的媒体内容，具体的展示界面可以为如图5所示，以客户端为手机为例。

本公开实施例中，服务器在下发第一图片的同时，会下发图片的裁剪位置信息，这样，客户端可以根据该裁剪位置信息进行图片裁剪得到裁剪后的第二图片，也即缩略图，由于服务端对图片中重点内容有判断能力，因此通过这种方式可以得到能够体现完整图片重点内容的缩略图，同时可以节省服务器处理资源。

在本公开实施例中，在基于步骤S103在客户端的屏幕上展示包含裁剪后的第二图片的媒体内容后，用户可以对屏幕上展示的媒体内容中包含的裁剪后的第二图片进行触发，以获取该裁剪后的第二图片对应的第一图片，这里，可以通过为从裁剪后的第二图片过渡到第一图片，添加过渡动画的方式，使用户看到由裁剪后的第二图片平滑过渡到第一图片时的裁剪位置以及比例的过渡，减少由于尺寸变化给用户造成的视觉冲击，具体描述如下：

S104、响应于针对所述第二图片的触发事件，从展示所述第二图片切换到展示所述第一图片。

其中，触发事件例如可以包括但不限于用户对媒体内容中包含的裁剪后的第二图片的单击操作、双击操作、连击操作等点击操作中的至少一种。

具体的，用户对屏幕上展示的媒体内容中包含的裁剪后的第二图片进行触发操作后，客户端可以响应用户对信息流页面中展示的媒体内容中包含的裁剪后的第二图片的触发操作，在页面中添加第一视图窗口；通过调整第一视图窗口的尺寸由小到大变化，播放从第二图片扩展到第一图片的全屏图片内容的动画效果。

其中，第一视图窗口用于控制第一图片的展示内容；第一图片的展示内容为位于第一视图窗口范围内的图片内容，超出第一视图窗口范围的图片内容不展示，该第一视图窗口可以看作一个用来控制图片展示内容的滤镜；第一视图窗口内初始展示的图片内容与第二图片的图片内容相同，且第一视图窗口的初始尺寸等于第二图片的尺寸；第一图片的全屏图片内容为在屏幕上全屏展示的第一图片的图片内容；当第一图片在屏幕中居中展示时，则该第一图片的全屏图片内容为第一图片的完整图片内容；当第一图片在屏幕中置顶展示时，则该第一图片的全屏图片内容为第一图片置顶展示的部分图片内容。

在具体实施中，可以通过下述方法实现在页面中添加第一视图窗口：将第二图片在屏幕中的展示位置，确定为待添加的第一视图窗口的初始位置；根据该初始位置，在页面中添加第一视图窗口。

在页面中添加第一视图窗口后，还需要添加第一图片作为占位图，以实现通过调整第一视图窗口的尺寸由大到小变化时，播放从第二图片扩展到第一图片的全屏图片内容的动画效果。

具体的，可以通过下述方法添加第一图片作为占位图：根据裁剪后的第二图片在信息流页面中的展示位置，以及裁剪后的第二图片在第一图片中的裁剪位置信息，确定第一图片在页面中的初始占位位置；根据该初始占位位置，将第一图片添加至页面中，以将第一图片作为占位图。其中，位于初始占位位置的第一图片中，与该裁剪后的第二图片的图片内容一致的内容在屏幕中的展示位置，与过渡动画播放前该裁剪后的第二图片在屏幕中的展示位置重合。

这里，可以根据下述方法确定第一图片在页面中的初始占位位置，具体描述如下：根据裁剪后的第二图片在第一图片中的裁剪位置信息，确定裁剪后的第二图片与第一图片的宽度比和高度比，以及裁剪后的第二图片的任一顶点到第一图片的第一目标边界的第一距离与第一图片的宽度之间的第一比例、裁剪后的第二图片的任一顶点到第一图片的第二目标边界的第二距离与第一图片的高度之间的第二比例；根据裁剪后的第二图片的任一顶点在信息流页面中的展示位置、宽度比和高度比、第一比例和第二比例、以及裁剪后的第二图片在信息流页面中的展示宽度和展示高度，确定第一图片在页面中的初始占位位置。

其中，第一目标边界与第二目标边界垂直；第一目标边界可以包括左边界和右边界中的至少一种；第二目标边界可以包括上边界和下边界中的至少一种。

具体的，可以在裁剪后的第二图片的裁剪位置信息中提取该裁剪后的第二图片与对应的第一图片的宽度比、和该裁剪后的第二图片与对应的第一图片的高度比；并根据裁剪后的第二图片的裁剪位置信息中包含的裁剪后的第二图片的左上角顶点在对应的第一图片中的位置坐标，确定裁剪后的第二图片的左上角顶点与第一图片的左边界之间的第一距离、以及裁剪后的第二图片的左上角顶点与第一图片的上边界之间的第一距离；基于上述确定的第一距离和第二距离、以及第一图片的宽度值和高度值，确定裁剪后的第二图片的左上角顶点到第一图片左边界的第一距离与该第一图片的宽度之间的第一比例、并确定裁剪后的第二图片的左上角顶点到第一图片上边界的第二距离与该第一图片的高度之间的第二比例；然后，通过将裁剪后的第二图片在信息流中的展示宽度、与上述计算得到的第一比例相乘、再除以裁剪后的第二图片与对应的第一图片的宽度比，计算得到占位图左边界与裁剪后的第二图片的左上角顶点之间的宽度距离；通过将裁剪后的第二图片在信息流中的展示高度、与上述计算得到的第二比例相乘、再除以裁剪后的第二图片与对应的第一图片的高度比，计算得到占位图上边界与裁剪后的第二图片的左上角顶点之间的高度距离；然后，根据裁剪后的第二图片的左上角顶点在屏幕坐标系下的位置坐标、以及上述确定的宽度距离和高度距离，确定占位图左上角顶点在屏幕坐标系下的位置坐标，从而确定第一图片的左上角顶点在页面中的初始占位位置；然后通过将裁剪后的第二图片在信息流中的展示宽度、除以裁剪后的第二图片与对应的第一图片的宽度比，确定该第一图片在大图浏览页的宽度值；通过将裁剪后的第二图片在信息流中的展示高度、除以裁剪后的第二图片与对应的第一图片的高度比，确定该第一图片在页面中的高度值；基于上述确定的第一图片的左上角顶点在页面中的初始占位位置、以及该第一图片在页面中的高度值、以及该第一图片在页面中的宽度值，确定第一图片在页面中的初始占位位置。

示例性的，若裁剪后的第二图片对应的第一图片的尺寸信息为300×600(即该第一图片的宽度值为300个像素点、高度值为600个像素点)、且若基于上述步骤S103确定的裁剪后的第二图片的展示尺寸信息为150×150(即该展示尺寸信息的宽度值为150个像素点、高度值为150个像素点)若在裁剪后的第二图片的裁剪位置信息中提取的该裁剪后的第二图片与对应的第一图片的宽度比为1:2、该裁剪后的第二图片与对应的第一图片的高度比为2:3；若裁剪后的第二图片的裁剪位置信息中包含的裁剪后的第二图片的左上角顶点在对应的第一图片中的位置坐标(30，50)，确定裁剪后的第二图片的左上角顶点与第一图片的左边界之间的第一距离为30个像素点、以及裁剪后的第二图片的左上角顶点与第一图片的上边界之间的第一距离为50个像素点；基于上述确定的第一距离和第二距离、以及第一图片的宽度值300个像素点和高度值600个像素点，确定裁剪后的第二图片的左上角顶点到第一图片左边界的第一距离与该第一图片的宽度之间的第一比例为1:10(即30:300)、并确定裁剪后的第二图片的左上角顶点到第一图片上边界的第二距离与该第一图片的高度之间的第二比例1:12(即50:600)；然后，通过将裁剪后的第二图片在信息流中的展示宽度值150个像素点、与计算得到的第一比例1:10相乘、再除以裁剪后的第二图片与对应的第一图片的宽度比1:2，计算得到占位图左边界与裁剪后的第二图片的左上角顶点之间的宽度距离为30个像素点(即150×(1/10)÷(1/2)＝30个像素点)；通过将裁剪后的第二图片在信息流中的展示高度值150个像素点、与上述计算得到的第二比例1:12相乘、再除以裁剪后的第二图片与对应的第一图片的高度比2:3，计算得到占位图上边界与裁剪后的第二图片的左上角顶点之间的高度距离18.75个像素点(即150×(1/12)÷(2/3)＝18.75个像素点)；然后，根据裁剪后的第二图片的左上角顶点在屏幕坐标系下的位置坐标为(50，30)、以及上述确定的宽度距离30个像素点和高度距离18.75个像素点，通过将裁剪后的第二图片的左上角顶点在屏幕坐标系下的横坐标50、减去宽度距离30个像素点，确定占位图左上角顶点在屏幕坐标系下的横坐标20；通过将裁剪后的第二图片的左上角顶点在屏幕坐标系下的纵坐标30、减去宽度距离18.75个像素点，确定占位图左上角顶点在屏幕坐标系下的纵坐标11.25，即确定占位图左上角顶点在屏幕坐标系下的位置坐标为(30，11.25)；然后通过将裁剪后的第二图片在信息流中的展示宽度值150个像素点、除以裁剪后的第二图片与对应的第一图片的宽度比1:2，确定该第一图片在页面中的宽度值300个像素点；通过将裁剪后的第二图片在信息流中的展示高度值150个像素点、除以裁剪后的第二图片与对应的第一图片的高度比2:3，确定该第一图片在页面中的高度值为225个像素点；从而确定该第一图片在页面中的初始占位位置，具体的第一图片在页面中的初始占位位置的示意图如图6所示，以客户端为手机为例，该示意图中包含裁剪后的第二图片的左上角顶点在屏幕坐标系下的位置坐标为(50，30)、以及该屏幕尺寸信息720×1080、以及第一图片的左上角顶点在页面中的初始占位位置坐标(30，11.25)、以及该第一图片在页面中的初始占位位置。

在确定第一图片在页面中的初始占位位置后，可以根据第一图片的宽高比和屏幕宽高比，确定最终展示的第一图片的全屏图片内容在页面中的最终位置；根据初始位置和最终位置，将第一视图窗口的尺寸从初始尺寸调整至匹配最终位置的尺寸。

这里，根据第一图片宽高比与屏幕宽高比之间的大小关系，确定第一图片的全屏图片内容在页面的展示方式，比如在高度方向上居中展示或置顶展示，进而通过控制第一视图窗口的尺寸变化，使其展示出的第一图片的图片内容从第二图片内容变化到按照确定的展示方式展示的全屏图片内容。

在具体实施中，可以根据下述方法确定最终展示的第一图片的全屏图片内容在页面中的最终位置，具体描述如下：若第一图片宽高比大于或等于屏幕宽高比，确定第一图片的全屏图片内容在页面的高度方向上居中展示，且全屏图片内容的展示宽度等于屏幕宽度；若第一图片的宽高比小于屏幕宽高比，确定第一图片的全屏图片内容在页面的高度方向上置顶展示，且全屏图片内容的展示宽度等于屏幕宽度。

示例性的，若第一图片宽高比大于等于屏幕宽高比，则将第一图片的全屏图片内容在页面中居中展示，具体的居中展示的展示界面可以为如图7所示，以客户端为手机为例，将屏幕宽度作为该全屏图片内容的展示宽度，然后根据第一图片的全屏图片内容的图片宽高比、以及屏幕宽度，确定该第一图片的全屏图片内容在页面中的展示高度；若图片宽高比小于屏幕宽高比，则将第一图片的全屏图片内容在页面中置顶展示，具体的置顶展示的展示界面可以为如图8所示，以客户端为手机为例，将屏幕宽度作为该全屏图片内容的展示宽度，然后根据第一图片的全屏图片内容的图片宽高比、以及屏幕宽度，确定该第一图片的全屏图片内容在页面中的展示高度。

在一种可能的实施方式中，若全屏图片内容为第一图片的部分内容，响应作用在屏幕的滑动操作，展示第一图片的其它部分内容。

示例性的，在将第一图片的全屏图片内容在页面中置顶展示时，若第一图片的全屏图片内容的展示高度大于屏幕高度，用户可以通过上下滑动操作，对当前未在屏幕上展示的第一图片的全屏图片内容进行浏览。

在具体实施中，在基于上述方法确定第一图片在页面中的初始占位位置、以及最终展示的第一图片的全屏图片内容在页面中的最终位置后，通过控制第一视图窗口的尺寸由与初始位置匹配的初始尺寸，变化到与最终展示的第一图片的全屏图片内容在页面中的最终位置匹配的最终尺寸，播放从第二图片扩展到第一图片的全屏图片内容的动画效果。

在播放从第二图片扩展到第一图片的全屏图片内容的动画效果时，可以从服务器下载该第一图片对应的目标图片，在下载完成目标图片(即获取到目标图片)后，采用目标图片替换第一图片进行展示，从而在页面中展示第一图片对应的高清图片；其中，目标图片的图片内容与第一图片的图片内容相同，且目标图片的清晰度高于第一图片的清晰度。

本公开实施例中，可以在用户触发信息流页面中的裁剪后的第二图片后，在页面中，播放从展示第二图片，过渡到展示第一图片的全屏图片内容的过渡动画。这种动画播放形式，可以展示图片内容的平滑过渡过程，视觉冲击感较弱；该过渡动画的实现方式可以为：在页面中添加第一视图窗口(第一视图窗口相当于滤镜)、以及第一图片，采用控制第一视图窗口的尺寸变化的方式控制第一图片的展示内容，过渡动画的首帧只展示与裁剪后的第二图片对应的图片内容，通过控制第一视图窗口尺寸逐步扩展，来展示更多图片内容，最后过渡到展示全屏图片内容，如此实现图片内容的平滑过渡。

另外，本公开实施例能够根据裁剪后的第二图片在信息流页面中的展示位置，以及裁剪后的第二图片在所述第一图片中的裁剪位置信息，确定第一图片在页面中的初始占位位置，从而使得与所述裁剪后的第二图片的图片内容一致的内容在屏幕中的展示位置，与过渡动画播放前裁剪后的第二图片在屏幕中的展示位置重合，从而避免了因位置移动带来的视觉上的闪动。

在一种可能的实施方式中，客户端会将获取到的第一图片进行存储，且同时储存该第一图片对应的裁剪位置信息、以及第一图片和该第一图片对应的裁剪位置信息之间的关联关系；在存储时，会将第一图片、与该第一图片对应的裁剪位置信息存储在不同的数据库中；当第一图片被删除时，可以根据存储的第一图片和该第一图片对应的裁剪位置信息之间的关联关系，在对应的数据库中查找到该第一图片对应的裁剪位置信息，并将其删除。

在一种可能的实施方式中，当用户对页面中展示的第一图片进行目标触发操作后，响应目标触发操作，播放从第一图片的全屏图片内容缩小到第二图片的图片内容的动画效果。

其中，目标触发操作例如可以包括但不限于：对页面中的第一图片的点击操作和拖住大图浏览页中的第一图片的滑动操作中的至少一种。这里，与上述展示从第二图片内容逐步扩大到展示所述第一图片的过程相反，展示从第一图片的全屏图片内容缩小到第二图片的图片内容，同样采用添加视图窗口的方式，实现平滑过渡的效果。

具体地，可以通过下述方式播放从第一图片的全屏图片内容缩小到第二图片的图片内容的动画效果，具体描述如下：在展示第一图片的全屏图片内容的页面的浮层上，添加第二视图窗口，所述第二视图窗口的初始尺寸与所述全屏图片内容占用的屏幕尺寸匹配；通过控制第二视图窗口的尺寸由大到小变化，播放从全屏图片内容缩小到第二图片的图片内容的动画效果。

其中，第二视图窗口用于控制第一图片的展示内容；第一图片的展示内容为位于第二视图窗口范围内的图片内容，超出第二视图窗口范围的图片内容不展示，该第二视图窗口可以看作一个用来控制图片展示内容的滤镜；第二视图窗口内初始展示的图片内容与截图图片的图片内容相同，且第二视图窗口的初始尺寸等于第一图片的全屏图片内容占用的屏幕尺寸。

这里，可以通过下述方法在页面的浮层上展示全屏图片内容，具体描述如下：若当前在页面中展示的全屏图片内容中完整包含裁剪后的第二图片内容，将全屏图片内容作为在浮层上展示的第一图片的全屏图片内容；若当前在页面中展示的全屏图片内容中不完整包含裁剪后的第二图片内容，调整页面中的全屏图片内容，使得全屏图片内容中完整包含裁剪后的第二图片内容，并将调整后的全屏图片内容作为在浮层上展示的第一图片的全屏图片内容。

示例性的，当用户在页面中拖住第一图片进行滑动操作或在页面中对第一图片进行点击操作后，客户端会首先根据当前屏幕展示的第一图片的全屏图片内容，确定当前在页面中展示的全屏图片内容中是否完整包含裁剪后的第二图片内容；若确定当前在页面中展示的全屏图片内容完整包含裁剪后的第二图片内容，则将当前在页面中展示的全屏图片内容作为在浮层上展示的第一图片的全屏图片内容；然后在浮层上添加到初始尺寸与全屏图片内容占用的屏幕尺寸匹配的第二视图窗口，通过控制第二视图窗口的尺寸由屏幕尺寸变小到裁图后的第二图片展示尺寸，播放从全屏图片内容，过渡到展示第二图片的图片内容的过渡动画。

若确定当前在页面中展示的全屏图片内容不完整包含裁剪后的第二图片内容，则调整页面中的全屏图片内容，将完整包含裁剪后的第二图片内容的图片内容调整到当前屏幕进行展示；然后在展示全屏图片内容的浮层上添加到初始尺寸与全屏图片内容占用的屏幕尺寸匹配的第二视图窗口，通过控制第二视图窗口的尺寸由屏幕尺寸变小到裁图后的第二图片展示尺寸，播放从全屏图片内容，过渡到展示第二图片的图片内容的过渡动画。

本公开实施例中，可以在用户触发第一图片的全屏图片内容后，播放从第一图片的全屏图片内容，过渡到展示裁剪后的第二图片的图片内容的过渡动画。这种动画播放形式，可以展示图片内容的平滑过渡过程，视觉冲击感较弱；该过渡动画的实现方式可以为：在展示第一页面的全屏图片内容的浮层上添加第二视图窗口，采用控制第二视图窗口尺寸的方式来控制全屏图片内容的展示内容，通过控制第二视图窗口尺寸逐步缩小，逐渐展示更少的图片内容，最后过渡到展示裁剪后的第二图片内容，如此实现图片内容的平滑过渡。

下面以执行主体为服务器为例对本公开实施例提供的图片展示的方法加以说明。

参见图9所示，为本公开实施例提供的图片展示的方法的流程图，所述方法包括步骤S901～S903，其中：

S901、接收客户端的信息获取请求；所述信息获取请求中包含目标图片对应的访问路径、以及图片处理信息；所述图片处理信息包括图片尺寸信息和目标裁剪策略信息。

在具体实施中，客户端在基于上述步骤S101从信息流服务端获取到的URL信息和图片处理信息后，向图片服务端发送信息获取请求，图片服务端接收客户端发送的信息获取请求。

承接上述S901，本公开实施例提供的图片展示的方法还包括：

S902、基于所述信息获取请求中的图片尺寸信息和目标裁剪策略信息，确定所述第一图片的裁剪位置信息。

在具体实施中，图片服务端可以根据第一图片的图片尺寸信息、以及裁剪后的第二图片的图片尺寸信息，通过将裁剪后的第二图片的图片尺寸信息中的宽度值、除以第一图片的图片尺寸信息中的宽度值，得到裁剪后的第二图片与对应的第一图片的宽度比；通过将裁剪后的第二图片的图片尺寸信息中的高度值、除以第一图片的图片尺寸信息中的高度值，得到裁剪后的第二图片与对应的第一图片的高度比；图片服务端可以根据目标裁剪策略信息，确定裁剪后的第二图片的任一顶点位置在对应的第一图片中的位置信息(即裁剪起点位置坐标)，并将第二图片的任一顶点位置在对应的第一图片中的位置信息、以及裁剪后的第二图片与对应的第一图片的宽度比以及裁剪后的第二图片与对应的第一图片的高度比作为裁剪位置信息。

S903、将所述第一图片以及所述裁剪位置信息发送给客户端。

需要说明的是，针对本公开实施例S901～S903所示的具体实施方式中的相应描述可参见本公开实施例S101～S104所示的具体实施方式中的描述，重复之处不再赘述。

本公开实施例中，服务器在下发第一图片的同时，会下发第一图片的裁剪位置信息，这样，客户端可以根据该裁剪位置信息对第一图片进行图片裁剪，得到裁剪后的第二图片，也即缩略图，由于服务端对图片中重点内容有判断能力，因此通过这种方式可以得到能够体现完整图片重点内容的缩略图，同时可以节省服务器处理资源。

在另一种实施中，若用户触发第二图片或第一图片的全屏图片内容，可以播放对应的动画效果，参见图10所示以执行主体为客户端为例，为本公开实施例提供的一种图片展示的方法的流程图，所述方法包括步骤S1001～S1002，其中：

S1001、响应针对裁剪后的第二图片的触发事件，从展示所述第二图片切换到展示所述第一图片。

S1002、响应目标触发操作，播放从所述第一图片的全屏图片内容缩小到所述第二图片的图片内容的动画效果。

这里，步骤S1001～S1002的具体描述可以参加本公开实施例S104中公开的具体实施方式中的描述，重复之处不再赘述。

本公开实施例中，可以在用户触发裁剪后的第二图片后，播放从展示裁剪后的第二图片，过渡到展示第一图片的全屏图片内容的过渡动画。这种动画播放形式，可以展示图片内容的平滑过渡过程，视觉冲击感较弱。

另外，本公开实施例能够根据裁剪后的第二图片的展示位置，以及裁剪后的第二图片在所述第一图片中的裁剪位置信息，确定第一图片在页面中的初始占位位置，从而使得与裁剪后的第二图片的图片内容一致的内容在屏幕中的展示位置，与过渡动画播放前裁剪后的第二图片在屏幕中的展示位置重合，从而避免了因位置移动带来的视觉上的闪动。

此外，可以在用户触发信息流页面中的裁剪后的第二图片后，在页面中，播放从展示第二图片，过渡到展示第一图片的全屏图片内容的过渡动画。这种动画播放形式，同样可以展示图片内容的平滑过渡过程，视觉冲击感较弱。

另外，本公开实施例能够根据裁剪后的第二图片在信息流页面中的展示位置，以及裁剪后的第二图片在第一图片中的裁剪位置信息，确定第一图片在页面中的初始占位位置，从而使得与所述裁剪后的第二图片的图片内容一致的内容在屏幕中的展示位置，与过渡动画播放前裁剪后的第二图片在屏幕中的展示位置重合，从而避免了因位置移动带来的视觉上的闪动。

本领域技术人员可以理解，在具体实施方式的上述方法中，各步骤的撰写顺序并不意味着严格的执行顺序而对实施过程构成任何限定，各步骤的具体执行顺序应当以其功能和可能的内在逻辑确定。

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

参照图11所示，为本公开实施例提供的一种图片展示的装置1100的示意图，所述装置包括：获取模块1101、裁剪模块1102、第一展示模块1103和第二展示模块1104；其中，

获取模块1101，用于获取媒体内容中至少一张目标图片对应的第一图片，以及所述第一图片的裁剪位置信息；所述第一图片的清晰度低于所述目标图片的清晰度。

裁剪模块1102，用于根据所述裁剪位置信息，对所述第一图片进行裁剪，得到裁剪后的第二图片。

第一展示模块1103，用于展示所述媒体内容中的所述第二图片。

第二展示模块1104，用于响应于针对所述第二图片的触发事件，从展示所述第二图片切换到展示。

在一种可能的实施方式中，获取模块1101，具体用于获取所述目标图片对应的访问路径和图片处理信息，所述图片处理信息包括图片尺寸信息和目标裁剪策略信息；基于所述访问路径和所述图片处理信息，获取所述第一图片，以及所述第一图片中与所述图片处理信息匹配的裁剪位置信息，其中，所述裁剪位置信息为基于所述图片尺寸信息指示的第二图片的尺寸，以及所述目标裁剪策略信息指示的待裁剪的第二图片与第一图片的相对位置关系确定的。

在一种可能的实施方式中，裁剪模块1102，具体用于基于所述裁剪位置信息中指示的待裁剪的第二图片的任一顶点位置在对应的第一图片中的位置信息，确定裁剪起点位置信息；基于所述裁剪位置信息中指示的所述第一图片和所述第二图片的宽度比，确定所述第二图片的宽度信息；以及，基于所述裁剪位置信息中指示的所述第一图片和所述第二图片的高度比，确定所述第二图片的高度信息；基于确定的所述裁剪起点位置信息、和所述第二图片的宽度信息以及所述第二图片的高度信息，对所述第一图片进行裁剪，得到所述第二图片。

在一种可能的实施方式中，第二展示模块1104，具体用于在所述页面中添加第一视图窗口；其中，所述第一视图窗口内初始展示的图片内容与所述第二图片的图片内容相同，且所述第一视图窗口的初始尺寸等于所述第二图片的尺寸；通过调整所述第一视图窗口的尺寸由小到大变化，播放从所述第二图片扩展到所述第一图片的全屏图片内容的动画效果。

在一种可能的实施方式中，第二展示模块1104，具体用于将所述第二图片在屏幕中的展示位置，确定为待添加的第一视图窗口的初始位置，根据该初始位置，在所述页面中添加所述第一视图窗口。

在一种可能的实施方式中，第二展示模块1104，具体用于根据所述第一图片的宽高比和屏幕宽高比，确定最终展示的所述第一图片的全屏图片内容在页面中的最终位置；根据所述初始位置和所述最终位置，将第一视图窗口的尺寸从所述初始尺寸调整至匹配所述最终位置的尺寸。

在一种可能的实施方式中，第二展示模块1104，具体用于若所述第一图片的宽高比大于或等于所述屏幕宽高比，确定所述第一图片的全屏图片内容在页面的高度方向上居中展示，且所述全屏图片内容的展示宽度等于屏幕宽度；若所述第一图片的宽高比小于屏幕宽高比，确定所述第一图片的全屏图片内容在页面的高度方向上置顶展示，且所述全屏图片内容的展示宽度等于屏幕宽度。

在一种可能的实施方式中，第二展示模块1104，还用于下载所述目标图片；在下载完成所述目标图片后，采用所述目标图片替换所述第一图片进行展示。

在一种可能的实施方式中，第二展示模块1104，具体用于响应作用在所述屏幕的滑动操作，展示所述第一图片的其它部分内容。

在一种可能的实施方式中，第二展示模块1104，还用于响应目标触发操作，播放从所述第一图片的全屏图片内容缩小到所述第二图片的图片内容的动画效果。

在一种可能的实施方式中，第二展示模块1104，具体用于在展示所述第一图片的全屏图片内容的页面的浮层上，添加第二视图窗口，所述第二视图窗口的初始尺寸与所述全屏图片内容占用的屏幕尺寸匹配；通过控制所述第二视图窗口的尺寸由大到小变化，播放从所述全屏图片内容缩小到所述第二图片的图片内容的动画效果。

在一种可能的实施方式中，第二展示模块1104，具体用于若所述全屏图片内容中完整包含所述第二图片的图片内容，将所述全屏图片内容作为在浮层上展示的所述第一图片的全屏图片内容；若所述全屏图片内容中不完整包含所述第二图片的图片内容，调整所述全屏图片内容，使得全屏图片内容中完整包含所述第二图片的图片内容，并将调整后的全屏图片内容作为在浮层上展示的所述第一图片的全屏图片内容。

关于装置中的各模块的处理流程、以及各模块之间的交互流程的描述可以参照上述方法实施例中的相关说明，这里不再详述。

基于同一技术构思，本申请实施例还提供了一种计算机设备。参照图12所示，为本申请实施例提供的计算机设备1200的结构示意图，包括处理器1201、存储器1202、和总线1203。其中，存储器1202用于存储执行指令，包括内存12021和外部存储器12022；这里的内存12021也称内存储器，用于暂时存放处理器1201中的运算数据，以及与硬盘等外部存储器12022交换的数据，处理器1201通过内存12021与外部存储器12022进行数据交换，当计算机设备1200运行时，处理器1201与存储器1202之间通过总线1203通信，使得处理器1201执行以下指令：

获取媒体内容中至少一张目标图片对应的第一图片，以及所述第一图片的裁剪位置信息；所述第一图片的清晰度低于所述目标图片的清晰度；根据所述裁剪位置信息，对所述第一图片进行裁剪，得到裁剪后的第二图片；展示所述媒体内容中的所述第二图片；响应于针对所述第二图片的触发事件，从展示所述第二图片切换到展示所述第一图片。

其中，处理器1201的具体处理流程可以参照上述方法实施例的记载，这里不再赘述。

本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述方法实施例中所述的图片展示的方法的步骤。其中，该存储介质可以是易失性或非易失的计算机可读取存储介质。

本公开实施例还提供一种计算机程序产品，该计算机程序产品承载有程序代码，所述程序代码包括的指令可用于执行上述方法实施例中所述的图片展示的方法的步骤，具体可参见上述方法实施例，在此不再赘述。

其中，上述计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选实施例中，所述计算机程序产品具体体现为计算机存储介质，在另一个可选实施例中，计算机程序产品具体体现为软件产品，例如软件开发包(Software Development Kit，SDK)等等。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统和装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。在本公开所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本公开各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个处理器可执行的非易失的计算机可读取存储介质中。基于这样的理解，本公开的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本公开各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-OnlyMemory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上所述实施例，仅为本公开的具体实施方式，用以说明本公开的技术方案，而非对其限制，本公开的保护范围并不局限于此，尽管参照前述实施例对本公开进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本公开揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本公开实施例技术方案的精神和范围，都应涵盖在本公开的保护范围之内。因此，本公开的保护范围应所述以权利要求的保护范围为准。

Claims (15)

1.一种图片展示的方法，其特征在于，包括：

获取媒体内容中至少一张目标图片对应的第一图片，以及所述第一图片的裁剪位置信息；所述第一图片的清晰度低于所述目标图片的清晰度；

根据所述裁剪位置信息，对所述第一图片进行裁剪，得到裁剪后的第二图片；

展示所述媒体内容中的所述第二图片；

响应于针对所述第二图片的触发事件，从展示所述第二图片切换到展示所述第一图片。

2.根据权利要求1所述的方法，其特征在于，获取媒体内容中的至少一张目标图片对应的第一图片，以及所述第一图片的裁剪位置信息，包括：

获取所述目标图片对应的访问路径和图片处理信息，所述图片处理信息包括图片尺寸信息和目标裁剪策略信息；

基于所述访问路径和所述图片处理信息，获取所述第一图片，以及所述第一图片中与所述图片处理信息匹配的裁剪位置信息，其中，所述裁剪位置信息为基于所述图片尺寸信息指示的第二图片的尺寸，以及所述目标裁剪策略信息指示的待裁剪的第二图片与第一图片的相对位置关系确定的。

3.根据权利要求2所述的方法，其特征在于，根据所述裁剪位置信息，对所述第一图片进行裁剪，得到裁剪后的第二图片，包括：

基于所述裁剪位置信息中指示的待裁剪的第二图片的任一顶点位置在对应的第一图片中的位置信息，确定裁剪起点位置信息；基于所述裁剪位置信息中指示的所述第一图片和所述第二图片的宽度比，确定所述第二图片的宽度信息；以及，基于所述裁剪位置信息中指示的所述第一图片和所述第二图片的高度比，确定所述第二图片的高度信息；

基于确定的所述裁剪起点位置信息、和所述第二图片的宽度信息以及所述第二图片的高度信息，对所述第一图片进行裁剪，得到所述第二图片。

4.根据权利要求1所述的方法，其特征在于，从展示所述第二图片切换到展示所述第一图片，包括：

在页面中添加第一视图窗口；其中，所述第一视图窗口内初始展示的图片内容与所述第二图片的图片内容相同，且所述第一视图窗口的初始尺寸等于所述第二图片的尺寸；

通过调整所述第一视图窗口的尺寸由小到大变化，播放从所述第二图片扩展到所述第一图片的全屏图片内容的动画效果。

5.根据权利要求4所述的方法，其特征在于，在页面中添加第一视图窗口，包括：

将所述第二图片在屏幕中的展示位置，确定为待添加的第一视图窗口的初始位置，根据该初始位置，在所述页面中添加所述第一视图窗口。

6.根据权利要求5所述的方法，其特征在于，所述调整所述第一视图窗口的尺寸由小到大变化，包括：

根据所述第一图片的宽高比和屏幕宽高比，确定最终展示的所述第一图片的全屏图片内容在页面中的最终位置；

根据所述初始位置和所述最终位置，将第一视图窗口的尺寸从所述初始尺寸调整至匹配所述最终位置的尺寸。

7.根据权利要求6所述的方法，其特征在于，根据所述第一图片的宽高比和屏幕宽高比，确定最终展示的所述第一图片的全屏图片内容在页面中的最终位置，包括：

若所述第一图片的宽高比大于或等于所述屏幕宽高比，确定所述第一图片的全屏图片内容在页面的高度方向上居中展示，且所述全屏图片内容的展示宽度等于屏幕宽度；

若所述第一图片的宽高比小于屏幕宽高比，确定所述第一图片的全屏图片内容在页面的高度方向上置顶展示，且所述全屏图片内容的展示宽度等于屏幕宽度。

8.根据权利要求4所述的方法，其特征在于，在页面中添加第一视图窗口之后，所述方法还包括：

下载所述目标图片；

在下载完成所述目标图片后，采用所述目标图片替换所述第一图片进行展示。

9.根据权利要求4所述的方法，其特征在于，若所述全屏图片内容为所述第一图片的部分内容，所述方法还包括：

响应作用在屏幕的滑动操作，展示所述第一图片的其它部分内容。

10.根据权利要求4所述的方法，其特征在于，所述方法还包括：

响应目标触发操作，播放从所述第一图片的全屏图片内容缩小到所述第二图片的图片内容的动画效果。

11.根据权利要求10所述的方法，其特征在于，播放从所述第一图片的全屏图片内容缩小到所述第二图片的图片内容的动画效果，包括：

在展示所述第一图片的全屏图片内容的页面的浮层上，添加第二视图窗口，所述第二视图窗口的初始尺寸与所述全屏图片内容占用的屏幕尺寸匹配；

通过控制所述第二视图窗口的尺寸由大到小变化，播放从所述全屏图片内容缩小到所述第二图片的图片内容的动画效果。

12.根据权利要求11所述的方法，其特征在于，在页面的浮层上展示的所述全屏图片内容根据以下步骤确定：

若所述全屏图片内容中完整包含所述第二图片的图片内容，将所述全屏图片内容作为在浮层上展示的所述第一图片的全屏图片内容；

若所述全屏图片内容中不完整包含所述第二图片的图片内容，调整所述全屏图片内容，使得全屏图片内容中完整包含所述第二图片的图片内容，并将调整后的全屏图片内容作为在浮层上展示的所述第一图片的全屏图片内容。

13.一种图片展示的装置，其特征在于，包括：

获取模块，用于获取媒体内容中至少一张目标图片对应的第一图片，以及所述第一图片的裁剪位置信息；所述第一图片的清晰度低于所述目标图片的清晰度；

裁剪模块，用于根据所述裁剪位置信息，对所述第一图片进行裁剪，得到裁剪后的第二图片；

第一展示模块，用于展示所述媒体内容中的所述第二图片；

第二展示模块，用于响应于针对所述第二图片的触发事件，从展示所述第二图片切换到展示。

14.一种计算机设备，其特征在于，包括：处理器、存储器，所述存储器存储有所述处理器可执行的机器可读指令，所述处理器用于执行所述存储器中存储的机器可读指令，所述机器可读指令被所述处理器执行时，所述处理器执行如权利要求1至12任一项所述的图片展示的方法的步骤。

15.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被计算机设备运行时，所述计算机设备执行如权利要求1至12任一项所述的图片展示的方法的步骤。

Images