界面处理方法和装置与流程

本技术涉及终端，尤其涉及一种界面处理方法和装置。

背景技术：

1、随着互联网的普及和发展，人们对于终端设备的功能需求也越发多样化。例如，为了满足用于对于图像的编辑功能，较多终端设备可以实现用于对于图像的裁剪、旋转、以及添加文字等功能。

2、通常情况下，终端设备可以在显示裁剪功能对应的界面中，基于用户移动裁剪框或者移动图像的操作，对裁剪框外侧的部分图像进行模糊处理。然而，上述模糊处理过程的耗能较高。

技术实现思路

1、本技术实施例提供一种界面处理方法和装置，使得终端设备可以在接收到用户打开裁剪功能对应的第二界面时，对第一图像进行模糊处理得到第二图像，进而终端设备可以在接收到第二操作时，在裁剪框的外侧显示该第二图像的部分内容，避免基于第二操作对第一图像实时进行模糊处理的耗能情况。

2、第一方面，本技术实施例提供一种界面处理方法，终端设备显示第一界面；第一界面中包括第一图像；终端设备接收到第一操作；响应于第一操作，终端设备对第一图像进行模糊处理，得到第二图像，以及，显示第二界面，第二界面包括第一图像以及裁剪框；终端设备接收到第二操作；响应于第二操作，终端设备显示第三界面，第三界面包括裁剪框，第三界面的裁剪框内的图像为第一图像的第一部分内容，第三界面的裁剪框外的图像为第二图像的部分内容。这样，使得终端设备可以在接收到用户打开裁剪功能对应的第二界面时，对第一图像进行模糊处理得到第二图像，进而终端设备可以在接收到第二操作时，在裁剪框的外侧显示该第二图像的部分内容，避免基于第二操作对第一图像实时进行模糊处理的耗能情况。

3、在一种可能的实现方式中，终端设备对第一图像进行模糊处理，得到第二图像，包括：终端设备利用第一图像生成第三图像；其中，第三图像的尺寸为第一图像的预设倍数，第三图像中包括第一图像；在第三图像所占内存小于或等于预设内存的情况下，终端设备对第三图像进行模糊处理，得到第二图像。这样，终端设备可以基于对包含第一图像以及黑色边框的第三图像进行模糊处理，得到第二图像，使得第二图像可以在第一图像以及黑色边框的中间存在模糊渐变的效果，提高用户在裁剪功能中查看该第二图像的体验感。

4、在一种可能的实现方式中，方法还包括：在第三图像所占内存大于预设内存的情况下，终端设备基于预设内存对预设倍数进行调整，得到调整后的倍数；终端设备基于调整后的倍数以及第一图像生成第四图像；第四图像中包括第一图像；在第三图像所占内存小于或等于预设内存的情况下，终端设备对第三图像进行模糊处理，得到第二图像，包括：在第四图像所占内存小于或等于预设内存的情况下，终端设备对第四图像进行模糊处理，得到第二图像。这样，终端设备可以基于第三图像所占内存的判断，防止生成模糊图像的过程中发生内存溢出，进而节省生成模糊图像过程的耗能情况。

5、在一种可能的实现方式中，方法还包括：终端设备接收针对第三界面的第三操作；响应于第三操作，终端设备显示第四界面；其中，第四界面中包括裁剪框，第四界面的裁剪框内的图像为第五图像的部分内容，第四界面的裁剪框外的图像为第六图像的部分内容，第五图像为对第一图像进行放大后得到的图像；第六图像为对第二图像进行放大后得到的图像。这样，当终端设备对第一图像进行放大时，也可以同步对第二图像进行放大，并且放大倍数越多，该第二图像的模糊程度可以越高，提高用户在裁剪功能中查看该第二图像的体验感

6、在一种可能的实现方式中，方法还包括：终端设备接收针对第三界面的第四操作；响应于第四操作，终端设备显示第五界面；其中，第五界面中包括裁剪框，第五界面的裁剪框内的图像为第一部分内容，第五界面的裁剪框外的图像为第一图像的第二部分内容。这样，在终端设备接收到用户针对第三界面中的第一图像或第二图像的第四操作时，终端设备可以在裁剪框的外侧显示第一图像，使得用户可以在第五界面中查看到裁剪框内的部分内容位于第一图像中的位置，便于用户裁剪。

7、在一种可能的实现方式中，方法还包括：终端设备接收针对第五界面的第五操作；响应于第五操作，终端设备显示第三界面。这样，终端设备可以在接收到用户抬手的第五操作时，对裁剪框外侧的第二图像进行动态显示，使得动态显示的效果更符合用户使用裁剪功能的使用需求。

8、在一种可能的实现方式中，终端设备包括：预览图像管理模块、视图系统以及显示驱动，响应于第二操作，终端设备显示第三界面，包括：响应于第二操作，预览图像管理模块向视图系统发送第一消息；第一消息用于指示第二图像的透明度由100％调整至0％；视图系统基于第一消息生成第一动画，并向显示驱动发送第一动画；显示驱动基于第一动画显示第一界面。这样，终端设备可以在接收到第二操作时，对裁剪框外侧的第二图像进行动态显示，使得动态显示的效果更符合用户使用裁剪功能的使用需求。

9、在一种可能的实现方式中，终端设备还包括：裁剪框管理模块，方法还包括：响应于第二操作，裁剪框管理模块向视图系统发送第二消息；第二消息用于指示裁剪框内的三等分线的透明度由0％调整至100％；视图系统基于第一消息生成第一动画，包括：视图系统基于第一消息以及第二消息生成第一动画。这样，终端设备可以在接收到第二操作时，对裁剪框外侧的第二图像以及裁剪框内侧的三等分线进行动态显示，使得动态显示的效果更符合用户使用裁剪功能的使用需求。

10、在一种可能的实现方式中，响应于第四操作，终端设备显示第五界面，包括：响应于第四操作，预览图像管理模块向视图系统发送第三消息；第三消息用于指示第二图像的透明度由0％调整至100％；视图系统基于第三消息生成第二动画，并向显示驱动发送第二动画；显示驱动调用显示器显示第二动画。这样，在终端设备接收到用户针对第三界面中的第一图像或第二图像的第四操作时，终端设备可以在裁剪框的外侧显示第一图像，使得用户可以在第五界面中查看到裁剪框内的部分内容位于第一图像中的位置，便于用户裁剪。

11、在一种可能的实现方式中，方法还包括：响应于第四操作，裁剪框管理模块向视图系统发送第四消息；第四消息用于指示三等分线的透明度由100％调整至0％；视图系统基于第三消息生成第二动画，包括：视图系统基于第三消息以及第四消息生成第二动画。这样，在终端设备接收到用户针对第三界面中的第一图像或第二图像的第四操作时，终端设备可以在裁剪框的外侧显示第一图像并且在裁剪框的内侧显示三等分线，使得用户可以在第五界面中查看到裁剪框内的部分内容的宽高比例以及位于第一图像中的位置，便于用户裁剪。

12、在一种可能的实现方式中，第三界面中还包括：用于对图像进行旋转的第一控件，方法还包括：终端设备接收针对第一控件的第六操作；响应于第六操作，终端设备对第一图像以及第二图像进行旋转处理，显示第六界面并跳转至第七界面；其中，第六界面中包括：旋转后的第一部分内容；第七界面中包括旋转后的裁剪框，第七界面中旋转后的裁剪框内的图像为旋转后的第一部分内容，第七界面中旋转后的裁剪框外的图像为旋转后的第二图像的部分内容。这样，终端设备可以基于用户的旋转操作，对第一图像、第二图像以及裁剪框进行动态显示，使得动态显示的效果更符合用户使用裁剪功能的使用需求。

13、在一种可能的实现方式中，终端设备还包括：界面控件管理模块，响应于第六操作，终端设备对第一图像以及第二图像进行旋转处理，显示第六界面并跳转至第七界面，包括：响应于第六操作，界面控件管理模块向裁剪功能管理模块发送第五消息；第五消息用于指示对第一图像以及第二图像进行旋转处理，第五消息中包括旋转角度；裁剪功能管理模块向预览图像管理模块发送第五消息；预览图像管理模块基于第五消息向视图系统发送第六消息；第六消息用于指示第二图像的透明度由0％调整至100％，再由100％调整至0％，第六消息中包括旋转角度；视图系统基于第六消息，对第二图像的透明度进行调整，以及对第一图像以及第二图像进行旋转，生成第三动画，并向显示驱动发送第三动画；显示驱动基于第三动画显示第六界面并跳转至第七界面。这样，终端设备可以基于用户的旋转操作，对第一图像以及第二图像进行动态显示，使得动态显示的效果更符合用户使用裁剪功能的使用需求。

14、在一种可能的实现方式中，方法还包括：裁剪功能管理模块向裁剪框管理模块发送第五消息；裁剪框管理模块基于第五消息向视图系统发送第七消息；第七消息用于指示裁剪框的透明度由0％调整至100％，再由100％调整至0％；视图系统基于第六消息，对第二图像的透明度进行调整，以及对第一图像以及第二图像进行旋转，生成第三动画，包括：视图系统基于第六消息以及第七消息，对第二图像的透明度和裁剪框的透明度进行调整，以及对第一图像以及第二图像进行旋转，生成第三动画。这样，终端设备可以基于用户的旋转操作，对第一图像、第二图像以及裁剪框进行动态显示，使得动态显示的效果更符合用户使用裁剪功能的使用需求。

15、在一种可能的实现方式中，终端设备对第一图像进行模糊处理，得到第二图像，包括：裁剪功能管理模块向预览图像管理模块发送第八消息；第八消息用于指示对第二界面进行初始化；预览图像管理模块基于第八消息对第一图像进行模糊处理，得到第二图像。这样，使得裁剪功能管理模块可以在接收到用户打开裁剪功能对应的第二界面时指示预览图像管理模块对第一图像进行模糊处理得到第二图像，避免对第一图像实时进行模糊处理的耗能情况。

16、在一种可能的实现方式中，在第三界面中，裁剪框的内侧显示有三等分线；三等分线用于对裁剪框的宽以及裁剪框的高分别进行三等分。

17、第二方面，本技术实施例提供一种界面处理装置，显示单元，用于显示第一界面；第一界面中包括第一图像；处理单元，用于接收到第一操作；响应于第一操作，处理单元，还用于对第一图像进行模糊处理，得到第二图像，以及，显示单元，还用于显示第二界面，第二界面包括第一图像以及裁剪框；处理单元，还用于接收到第二操作；响应于第二操作，显示单元，还用于显示第三界面，第三界面包括裁剪框，第三界面的裁剪框内的图像为第一图像的第一部分内容，第三界面的裁剪框外的图像为第二图像的部分内容。

18、在一种可能的实现方式中，处理单元，具体用于利用第一图像生成第三图像；其中，第三图像的尺寸为第一图像的预设倍数，第三图像中包括第一图像；在第三图像所占内存小于或等于预设内存的情况下，处理单元，还具体用于对第三图像进行模糊处理，得到第二图像。

19、在一种可能的实现方式中，在第三图像所占内存大于预设内存的情况下，处理单元，还用于基于预设内存对预设倍数进行调整，得到调整后的倍数；处理单元，还用于基于调整后的倍数以及第一图像生成第四图像；第四图像中包括第一图像；在第四图像所占内存小于或等于预设内存的情况下，处理单元，还用于对第四图像进行模糊处理，得到第二图像。

20、在一种可能的实现方式中，处理单元，还用于接收针对第三界面的第三操作；响应于第三操作，显示单元，还用于显示第四界面；其中，第四界面中包括裁剪框，第四界面的裁剪框内的图像为第五图像的部分内容，第四界面的裁剪框外的图像为第六图像的部分内容，第五图像为对第一图像进行放大后得到的图像；第六图像为对第二图像进行放大后得到的图像。

21、在一种可能的实现方式中，处理单元，还用于接收针对第三界面的第四操作；响应于第四操作，显示单元，还用于显示第五界面；其中，第五界面中包括裁剪框，第五界面的裁剪框内的图像为第一部分内容，第五界面的裁剪框外的图像为第一图像的第二部分内容。

22、在一种可能的实现方式中，处理单元，还用于接收针对第五界面的第五操作；响应于第五操作，显示单元，还用于显示第三界面。

23、在一种可能的实现方式中，终端设备包括：预览图像管理模块、视图系统以及显示驱动，响应于第二操作，处理单元，还用于向视图系统发送第一消息；第一消息用于指示第二图像的透明度由100％调整至0％；处理单元，还用于基于第一消息生成第一动画，并向显示驱动发送第一动画；处理单元，还用于基于第一动画显示第一界面。

24、在一种可能的实现方式中，终端设备还包括：裁剪框管理模块，响应于第二操作，处理单元，还用于向视图系统发送第二消息；第二消息用于指示裁剪框内的三等分线的透明度由0％调整至100％；处理单元，还用于基于第一消息以及第二消息生成第一动画。

25、在一种可能的实现方式中，响应于第四操作，处理单元，还用于向视图系统发送第三消息；第三消息用于指示第二图像的透明度由0％调整至100％；处理单元，还用于基于第三消息生成第二动画，并向显示驱动发送第二动画；处理单元，还用于调用显示器显示第二动画。

26、在一种可能的实现方式中，响应于第四操作，处理单元，还用于向视图系统发送第四消息；第四消息用于指示三等分线的透明度由100％调整至0％；处理单元，还用于基于第三消息以及第四消息生成第二动画。

27、在一种可能的实现方式中，第三界面中还包括：用于对图像进行旋转的第一控件，处理单元，还用于接收针对第一控件的第六操作；响应于第六操作，处理单元，还用于对第一图像以及第二图像进行旋转处理，显示单元，还用于显示第六界面并跳转至第七界面；其中，第六界面中包括：旋转后的第一部分内容；第七界面中包括旋转后的裁剪框，第七界面中旋转后的裁剪框内的图像为旋转后的第一部分内容，第七界面中旋转后的裁剪框外的图像为旋转后的第二图像的部分内容。

28、在一种可能的实现方式中，终端设备还包括：界面控件管理模块，响应于第六操作，处理单元，还用于向裁剪功能管理模块发送第五消息；第五消息用于指示对第一图像以及第二图像进行旋转处理，第五消息中包括旋转角度；处理单元，还用于向预览图像管理模块发送第五消息；处理单元，还用于基于第五消息向视图系统发送第六消息；第六消息用于指示第二图像的透明度由0％调整至100％，再由100％调整至0％，第六消息中包括旋转角度；处理单元，还用于基于第六消息，对第二图像的透明度进行调整，以及对第一图像以及第二图像进行旋转，生成第三动画，并向显示驱动发送第三动画；处理单元，还用于基于第三动画显示第六界面并跳转至第七界面。

29、在一种可能的实现方式中，处理单元，还用于向裁剪框管理模块发送第五消息；处理单元，还用于基于第五消息向视图系统发送第七消息；第七消息用于指示裁剪框的透明度由0％调整至100％，再由100％调整至0％；处理单元，还用于基于第六消息以及第七消息，对第二图像的透明度和裁剪框的透明度进行调整，以及对第一图像以及第二图像进行旋转，生成第三动画。

30、在一种可能的实现方式中，处理单元，还用于向预览图像管理模块发送第八消息；第八消息用于指示对第二界面进行初始化；处理单元，还用于基于第八消息对第一图像进行模糊处理，得到第二图像。

31、在一种可能的实现方式中，在第三界面中，裁剪框的内侧显示有三等分线；三等分线用于对裁剪框的宽以及裁剪框的高分别进行三等分。

32、第三方面，本技术实施例提供一种终端设备，包括处理器和存储器，存储器用于存储代码指令；处理器用于运行代码指令，使得终端设备以执行如第一方面或第一方面的任一种实现方式中描述的方法。

33、第四方面，本技术实施例提供一种计算机可读存储介质，计算机可读存储介质存储有指令，当指令被执行时，使得计算机执行如第一方面或第一方面的任一种实现方式中描述的方法。

34、第五方面，一种计算机程序产品，包括计算机程序，当计算机程序被运行时，使得计算机执行如第一方面或第一方面的任一种实现方式中描述的方法。

35、应当理解的是，本技术的第二方面至第五方面与本技术的第一方面的技术方案相对应，各方面及对应的可行实施方式所取得的有益效果相似，不再赘述。