一种页面展示的方法和装置与流程

本发明涉及计算机，尤其涉及一种页面展示的方法和装置。

背景技术：

1、在页面展示过程中，同一页面的多个楼层上通常会展示多个不同的栏目，且需要为每个栏目设置可作为背景图片的展示图片，为了提升展示效果，通常以连贯的多张图片作为连续排列的多个栏目的背景图片，以保证背景的连贯(例如将某一背景大图切割为多个小图分别展示在多个连续排列的栏目中)。为了实现这一效果，现有技术中需要设计人员根据每个栏目的大小，对背景大图进行手动剪裁，并将剪裁后的图片进行存储，以便于在展示时直接加载使用，自动化程度低，且需要大量的运营以及维护成本。

技术实现思路

1、有鉴于此，本发明实施例提供一种页面展示的方法和装置，可以自动根据访问页面的展示尺寸、与访问页面对应的栏目数据以及第一图片的图片尺寸，得到分别适配于各个栏目的图片剪裁尺寸，并进一步根据图片剪裁尺寸，确定出各个栏目分别对应的目标图片，无需设计人员手动计算裁剪，实现了将一张大背景图自动裁剪成多个栏目分别对应的小背景图并展示的过程。

2、为实现上述目的，根据本发明实施例的一个方面，提供了一种页面展示的方法。

3、本发明实施例的一种页面展示的方法包括：响应于页面触发操作，确定与访问页面对应的一个或多个栏目分别对应的栏目数据、以及与所述访问页面对应的第一图片；

4、根据所述访问页面的展示尺寸、所述栏目数据以及所述第一图片的图片尺寸，得到分别适配于各个所述栏目的图片剪裁尺寸；

5、根据所述图片剪裁尺寸，确定各个所述栏目分别对应的目标图片；

6、根据所述目标图片生成所述访问页面，以在所述访问页面的所述一个或多个栏目中分别展示对应的目标图片。

7、可选地，该方法应用于终端设备，所述根据所述图片剪裁尺寸，确定各个所述栏目分别对应的目标图片，包括：根据所述第一图片的链接地址以及所述图片剪裁尺寸，生成各个所述栏目分别对应的目标链接地址；将所述目标链接地址发送给所述服务端，以使所述服务端根据所述目标链接地址对所述第一图片进行剪裁，得到所述目标图片；接收所述服务端根据所述目标链接地址发送的各个所述栏目分别对应的目标图片。

8、可选地，所述根据所述访问页面的展示尺寸、所述栏目数据以及所述第一图片的图片尺寸，得到分别适配于各个所述栏目的图片剪裁尺寸，包括：根据所述终端设备的展示尺寸以及所述栏目数据，确定各个所述栏目分别对应的栏目尺寸；根据所述栏目尺寸以及所述图片尺寸，得到各个所述栏目分别对应的图片剪裁尺寸。

9、可选地，所述栏目数据包括栏目宽高比；所述根据所述终端设备的展示尺寸以及所述栏目数据，确定各个所述栏目分别对应的栏目尺寸，包括：以所述展示尺寸中的展示宽度作为所述栏目尺寸中的栏目宽度；根据所述栏目宽度与所述宽高比的乘积，确定所述栏目尺寸中的栏目高度。

10、可选地，所述根据所述栏目尺寸以及所述图片尺寸，得到各个所述栏目分别对应的图片剪裁尺寸，包括：根据所述栏目数据中的栏目布局数据，确定一个或多个所述栏目的滑动方向；根据所述滑动方向、所述栏目尺寸以及所述图片尺寸，确定各个所述栏目分别对应的图片剪裁尺寸。

11、可选地，所述根据所述滑动方向、所述栏目尺寸以及所述图片尺寸，确定各个所述栏目分别对应的图片剪裁尺寸，包括以下任意一项：

12、在所述滑动方向为竖向滑动的情况下，根据所述栏目高度、以及所述图片尺寸中的宽度与所述栏目宽度的比例，确定各个所述栏目分别对应的图片剪裁尺寸中的剪裁高度；

13、在所述滑动方向为横向滑动的情况下，根据所述栏目宽度、以及所述图片尺寸中的高度与所述栏目高度的比例，确定各个所述栏目分别对应的图片剪裁尺寸中的剪裁宽度。

14、可选地，所述根据所述第一图片的链接地址以及所述图片剪裁尺寸，生成各个所述栏目分别对应的目标链接地址，包括：在所述访问页面对应的展示区域建立坐标系；根据所述坐标系、所述展示尺寸、所述栏目数据以及所述图片尺寸，确定各个所述栏目分别对应的图片剪裁尺寸；将所述图片剪裁尺寸添加至所述链接地址中，生成各个所述栏目分别对应的目标链接地址。

15、可选地，在所述接收所述服务端根据所述目标链接地址发送的各个所述栏目分别对应的目标图片之后，还包括：将所述目标图片与所述目标链接地址对应存储在所述终端设备的本地缓存中；

16、所述根据所述图片剪裁尺寸，确定各个所述栏目分别对应的目标图片，还包括：根据所述第一图片的链接地址以及所述图片剪裁尺寸，生成各个所述栏目分别对应的目标链接地址；在所述本地缓存中确定是否存在与所述目标链接地址相同的历史目标链接地址；如果是，则以所述本地缓存中获取与所述历史目标链接地址对应的历史目标图片作为所述目标图片。

17、可选地，所述根据所述目标图片生成所述访问页面，以在所述访问页面的所述一个或多个栏目中分别展示对应的目标图片，包括：根据所述图片剪裁尺寸与所述展示尺寸的比例，缩放展示所述目标图片。

18、为实现上述目的，根据本发明实施例的又一方面，提供了一种页面展示的装置。

19、本发明实施例的一种页面展示的装置包括：响应模块，用于响应于页面触发操作，确定与访问页面对应的一个或多个栏目分别对应的栏目数据、以及与所述访问页面对应的第一图片；计算模块，用于根据所述访问页面的展示尺寸、所述栏目数据以及所述第一图片的图片尺寸，得到分别适配于各个所述栏目的图片剪裁尺寸；确定模块，用于根据所述图片剪裁尺寸，确定各个所述栏目分别对应的目标图片；展示模块，用于根据所述目标图片生成所述访问页面，以在所述访问页面的所述一个或多个栏目中分别展示对应的目标图片。

20、为实现上述目的，根据本发明实施例的又一方面，提供了一种用于页面展示的电子设备。

21、本发明实施例的一种页面展示的电子设备包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明实施例的一种页面展示的方法。

22、为实现上述目的，根据本发明实施例的再一方面，提供了一种计算机可读存储介质。

23、本发明实施例的一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现本发明实施例的一种页面展示的方法。

24、上述发明中的一个实施例具有如下优点或有益效果：可以自动根据访问页面的展示尺寸、与访问页面对应的栏目数据以及第一图片的图片尺寸，得到分别适配于各个栏目的图片剪裁尺寸，并进一步根据图片剪裁尺寸，确定出各个栏目分别对应的目标图片，无需设计人员手动计算裁剪，实现了将一张大背景图自动裁剪成多个栏目分别对应的小背景图并展示的过程。

25、上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

技术特征：

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

2.根据权利要求1所述的方法，其特征在于，应用于终端设备，所述根据所述图片剪裁尺寸，确定各个所述栏目分别对应的目标图片，包括：

3.根据权利要求2所述的方法，其特征在于，所述根据所述访问页面的展示尺寸、所述栏目数据以及所述第一图片的图片尺寸，得到分别适配于各个所述栏目的图片剪裁尺寸，包括：

4.根据权利要求3所述的方法，其特征在于，所述栏目数据包括栏目宽高比；所述根据所述终端设备的展示尺寸以及所述栏目数据，确定各个所述栏目分别对应的栏目尺寸，包括：

5.根据权利要求3所述的方法，其特征在于，所述根据所述栏目尺寸以及所述图片尺寸，得到各个所述栏目分别对应的图片剪裁尺寸，包括：

6.根据权利要求5所述的方法，其特征在于，所述根据所述滑动方向、所述栏目尺寸以及所述图片尺寸，确定各个所述栏目分别对应的图片剪裁尺寸，包括以下任意一项：

7.根据权利要求3所述的方法，其特征在于，所述根据所述第一图片的链接地址以及所述图片剪裁尺寸，生成各个所述栏目分别对应的目标链接地址，包括：

8.根据权利要求2所述的方法，其特征在于，在所述接收所述服务端根据所述目标链接地址发送的各个所述栏目分别对应的目标图片之后，还包括：

9.根据权利要求1所述的方法，其特征在于，所述根据所述目标图片生成所述访问页面，以在所述访问页面的所述一个或多个栏目中分别展示对应的目标图片，包括：

10.一种页面展示的装置，其特征在于，包括：

11.一种用于页面展示的电子设备，其特征在于，包括：

12.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-9中任一所述的方法。

技术总结
本发明公开了一种页面展示的方法和装置，涉及计算机技术领域。该方法的具体实施方式包括：响应于页面触发操作，确定与访问页面对应的一个或多个栏目分别对应的栏目数据、以及与访问页面对应的第一图片；根据访问页面的展示尺寸、栏目数据以及第一图片的图片尺寸，得到分别适配于各个栏目的图片剪裁尺寸；根据图片剪裁尺寸，确定各个栏目分别对应的目标图片；根据目标图片生成访问页面，以在访问页面的一个或多个栏目中分别展示对应的目标图片。该实施方式可以自动得到各个栏目的图片剪裁尺寸，并根据图片剪裁尺寸剪裁第一图片得到目标图片，无需设计人员手动裁剪，实现了将一张大背景图自动裁剪成多个栏目分别对应的小背景图并展示的过程。

技术研发人员：李树鹏,陈勇,徐长青
受保护的技术使用者：北京沃东天骏信息技术有限公司
技术研发日：
技术公布日：2024/9/23