CN114489409B - 一种图片处理方法、装置、电子设备以及存储介质 - Google Patents

Abstract

本公开提供了一种图片处理方法、装置、电子设备以及存储介质，其中，包括：检测对Flutter应用程序中待编辑图片的图片编辑指令；响应于图片编辑指令，在Flutter应用程序中所包含的多个预设图片编辑控件中确定用于执行所述图片编辑指令的目标编辑控件；基于目标编辑控件所在的图层，对待编辑图片执行图片编辑操作，编辑之后得到目标图片。本公开实施例通该Flutter应用程序中的多个预设图片编辑控件对待编辑图片进行编辑，得到目标图片，能够实现在Flutter应用程序中进行图片编辑，相对于现有技术中Flutter应用程序需要跨平台进行图片编辑的方式，本公开能够降低了跨平台应用程序对原生宿主平台的图片编辑功能的依赖性，同时减少了开发和运维成本，提高了用户的操作体验。

Description

一种图片处理方法、装置、电子设备以及存储介质

技术领域

本公开涉及图像处理技术领域，具体而言，涉及一种图片处理方法、装置、电子设备以及存储介质。

背景技术

随着各种多媒体应用程序的发展，对图片编辑功能的使用也越来越频繁，其中，在用户进行图片的选择、上传、发布等涉及到图片的功能时，现有的应用程序都会提供一个针对图片进行二次编辑的功能，功能大多包括：图片的缩放、旋转、画笔、贴图等。

然而，在现有的技术方案中，跨平台的Flutter应用程序针对图片的编辑功能并不十分的完善，现有的Flutter应用程序对图片的具体操作都是由该Flutter应用程序原生宿主平台，例如，Android、iOS系统等来对图片进行编辑操作，并通过平台通道(即，原生宿主平台和Flutter平台之间的通道)将处理的相关结果返回给Flutter应用程序进行展示或后续的操作，以实现在上述跨平台应用程序进行图片编辑的功能，无形中增加了跨平台应用程序的开发以及成本，同时，对图片的编辑也受限于原生宿主平台的图片编辑功能，降低了用户的操作体验。

发明内容

本公开实施例至少提供一种图片处理方法、装置、电子设备以及存储介质。

第一方面，本公开实施例提供了一种图片处理方法，应用于Flutter应用程序，所述方法包括：检测对Flutter应用程序中待编辑图片的图片编辑指令；其中，所述图片编辑指令中携带对所述待编辑图片进行编辑的编辑类型；响应于所述图片编辑指令，在所述Flutter应用程序中所包含的多个预设图片编辑控件中确定用于执行所述图片编辑指令的目标编辑控件；基于所述目标编辑控件所在的图层，对所述待编辑图片执行图片编辑操作，编辑之后得到目标图片。

本公开实施例通过Flutter应用程序中的多个预设图片编辑控件对待编辑图片进行编辑，得到目标图片，能够实现在Flutter应用程序中进行图片编辑，相对于现有技术中Flutter应用程序需要跨平台进行图片编辑的方式，本公开能够降低了跨平台应用程序对原生宿主平台的图片编辑功能的依赖性，同时减少了开发和运维成本，提高了用户的操作体验。

一种可选的实施方式中，所述基于所述目标编辑控件所在的图层，对所述待编辑图片执行图片编辑操作，编辑之后得到目标图片，包括：在所述目标编辑控件的数量为多个的情况下，确定多个所述目标编辑控件之间的嵌套关系；基于所述嵌套关系在所述Flutter应用程序的图片编辑区域中对多个所述目标编辑控件所在的图层进行叠加处理；基于叠加处理之后的图层，对所述待编辑图片执行图片编辑操作，编辑之后得到目标图片。

一种可选的实施方式中，所述基于所述目标编辑控件所在的图层，对所述待编辑图片执行图片编辑操作，编辑之后得到目标图片，包括：在所述图片编辑操作为目标操作的情况下，在所述目标编辑控件中确定布局控件；所述目标操作包括以下任一种：裁剪操作、旋转操作、缩放操作；对展示在所述布局控件所在图层中的待编辑图片执行所述目标操作，得到所述目标图片。

一种可选的实施方式中，所述方法还包括：在检测到所述布局控件所在图层上覆盖目标图层的情况下，对展示在所述布局控件所在图层中的待编辑图片和所述目标图层中的图层信息执行所述目标操作，得到所述目标图片。

一种可选的实施方式中，所述基于所述目标编辑控件所在的图层，对所述待编辑图片执行图片编辑操作，编辑之后得到目标图片，包括：在所述图片编辑操作为绘画操作的情况下，获取用户端在绘画控件所在图层中的绘画轨迹，其中，所述绘画控件为所述目标编辑控件中位于最上层的编辑控件；在所述绘画控件所在图层中绘制所述绘画轨迹，绘制之后得到所述目标图片。

一种可选的实施方式中，所述基于所述目标编辑控件所在的图层，对所述待编辑图片执行图片编辑操作，编辑之后得到目标图片，包括：在所述图片编辑操作为贴图操作的情况下，获取待添加的贴图；在贴图控件所在图层展示所述待添加的贴图，展示之后得到所述目标图片，其中，所述贴图控件为目标编辑控件中位于最上层的编辑控件。

一种可选的实施方式中，所述方法还包括：在所述贴图控件所在图层展示所述待添加的贴图之后，响应于针对所述贴图控件所在图层的图层编辑指令，对所述贴图控件所在图层执行相应图层编辑操作，其中，所述图层编辑操作包括以下至少之一：旋转、缩放、移动。

一种可选的实施方式中，所述图片编辑操作包括以下至少之一：裁剪操作、旋转操作、绘画操作、贴图操作。

一种可选的实施方式中，所述检测对Flutter应用程序中待编辑图片的图片编辑指令，包括：在检测到对所述Flutter应用程序的容器控件中目标按钮的点击操作的情况下，确定检测到对所述Flutter应用程序中待编辑图片的图片编辑指令。

第二方面，本公开实施例还提供一种图片处理装置，包括：检测模块：用于检测对Flutter应用程序中待编辑图片的图片编辑指令；其中，所述图片编辑指令中携带对所述待编辑图片进行编辑的编辑类型；确定模块：用于响应于所述图片编辑指令，在所述Flutter应用程序中所包含的多个预设图片编辑控件中确定用于执行所述图片编辑指令的目标编辑控件；编辑模块：用于基于所述目标编辑控件所在的图层，对所述待编辑图片执行图片编辑操作，编辑之后得到目标图片。

第三方面，本公开实施例还提供一种电子设备，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当电子设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。

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

通过背景技术部分描述可知，现有的Flutter应用程序针对图片的编辑功能并不十分的完善，现有的Flutter应用程序对图片的具体操作都是由该Flutter应用程序原生宿主平台，例如，Android、iOS系统等来对图片进行编辑操作，并通过平台通道(即，原生宿主平台和Flutter平台之间的通道)将处理的相关结果返回给Flutter应用程序进行展示或后续的操作，以实现在上述跨平台应用程序进行图片编辑的功能。因此，现有的技术图片处理方法无形中增加了跨平台应用程序的开发以及成本，同时，对图片的编辑也受限于原生宿主平台的图片编辑功能，降低了用户的操作体验。

基于此，本公开实施例提供了一种图片处理方法，该方法采用Flutter应用程序中的多个预设图片编辑控件对待编辑图片进行编辑，得到目标图片，该方法能够实现在Flutter应用程序中进行图片编辑，相对于现有技术中Flutter应用程序需要跨平台进行图片编辑的方式，降低了跨平台应用程序对原生宿主平台的图片编辑功能的依赖性，同时减少了开发和运维成本，提高了用户的操作体验。

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

附图说明

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

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

图2示出了本公开实施例所提供的图片处理方法中，多个预设图片编辑控件所对应图层之间的叠加关系的示意图；

图3示出了本公开实施例所提供的图片处理方法中，布局控件所在图层的示意图；

图4示出了本公开实施例所提供的图片处理方法中，对绘画轨迹进行绘制之后得到目标图片的示意图；

图5示出了本公开实施例所提供的图片处理方法中，贴图操作中不同的图层编辑操作对应的不同目标按钮的示意图；

图6示出了本公开实施例所提供的图片处理方法中，容器控件以及容器控件中所包含的目标按钮的示意图；

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

图8示出了本公开实施例所提供的一种电子设备的示意图。

具体实施方式

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

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

本文中术语“和/或”，仅仅是描述一种关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中术语“至少一种”表示多种中的任意一种或多种中的至少两种的任意组合，例如，包括A、B、C中的至少一种，可以表示包括从A、B和C构成的集合中选择的任意一个或多个元素。

经研究发现，通过背景技术部分描述可知，现有的Flutter应用程序针对图片的编辑功能并不十分的完善，现有的Flutter应用程序对图片的具体操作都是由该Flutter应用程序原生宿主平台，例如，Android、iOS系统等来对图片进行编辑操作，并通过平台通道(即，原生宿主平台和Flutter平台之间的通道)将处理的相关结果返回给Flutter应用程序进行展示或后续的操作，以实现在上述跨平台应用程序进行图片编辑的功能。因此，现有的技术图片处理方法无形中增加了跨平台应用程序的开发以及成本，同时，对图片的编辑也受限于原生宿主平台的图片编辑功能，降低了用户的操作体验。

基于上述研究，本公开提供了一种图片处理方法、装置、电子设备以及存储介质，应用于可跨平台的Flutter应用程序，通过该Flutter应用程序中的多个预设图片编辑控件对待编辑图片进行编辑，得到目标图片，从而实现在Flutter应用程序中进行图片编辑，相对于现有技术中Flutter应用程序需要跨平台进行图片编辑的方式，本公开能够降低了跨平台应用程序对原生宿主平台的图片编辑功能的依赖性，同时减少了开发和运维成本，提高了用户的操作体验。

为便于对本实施例进行理解，首先对本公开实施例所公开的一种图片处理方法进行详细介绍，本公开实施例所提供的图片处理方法的执行主体一般为具有一定计算能力的电子设备。在一些可能的实现方式中，该图片处理方法可以通过处理器调用存储器中存储的计算机可读指令的方式来实现。

本公开实施例所提供的图片处理方法适用于基于Flutter框架的应用程序中。该应用程序可以为在线教育类客户端、即时通信类客户端、图片编辑类客户端等需要对图片进行编辑并且具有跨平台分享图片需求的客户端中，此处不再一一列举。

参见图1所示，为本公开实施例提供的图片处理方法的流程图，该方法应用于Flutter应用程序，具体地，该方法包括步骤S101～S105，其中：

S101：检测对Flutter应用程序中待编辑图片的图片编辑指令；其中，所述图片编辑指令中携带对所述待编辑图片进行编辑的编辑类型。

在本公开实施例中，上述编辑类型可以为对待编辑图片进行裁剪、旋转、贴图、绘画等操作。

其中，裁剪操作可以为对上述待编辑图片的尺寸进行调整，即在该待编辑图片中截取目标尺寸的图片区域；旋转操作可以为按照逆时针或顺时针方向，将待编辑图片旋转目标角度，例如，顺时针旋转90°；贴图操作可以为在待编辑图片上的任意位置，以贴图的形式将目标贴图叠加在该待编辑图片上；绘画操作为用户通过用户端的显示屏幕或者鼠标等方式，手动对待编辑图片进行涂鸦。

S103：响应于所述图片编辑指令，在所述Flutter应用程序中所包含的多个预设图片编辑控件中确定用于执行所述图片编辑指令的目标编辑控件。

在本公开实施例中，上述Flutter应用程序为基于Flutter框架的开发的应用程序包，该应用程序包采用Flutter框架的编程语言进行开发，其中，该Flutter应用程序中包含用于对待编辑图片进行编辑的预设图片编辑控件。

需要说明的是，该应用程序包为开源程序包，即拥有该开源程序包开发权限的开发者都可以对该开源程序包中的预设图片编辑控件进行开发，例如，增加具有不同图片编辑功能的预设图片编辑控件，其中，不同功能的预设图片编辑控件对应不同的图片编辑指令。

另外的，上述不同的预设图片编辑控件包含不同功能的对待编辑图片进行编辑的控件，例如，该预设图片编辑控件可以为包含图片裁剪功能的控件，并且，预设图片编辑控件之间可以根据预设叠加关系进行叠加。比如，若具有贴图功能的预设图片编辑控件和具有旋转功能的预设图片编辑控件之间具有预设叠加关系，则在检测到上述图片编辑指令指示对待编辑图片进行贴图和旋转时，可以将具有贴图功能的预设图片编辑控件和具有旋转功能的预设图片编辑控件进行叠加，从而对待编辑图片进行贴图操作和旋转操作。

因此，应理解的是，根据上述预设图片编辑控件之间的叠加关系，上述目标编辑控件可以为至少一个预设图片编辑控件。例如，可以在一个关联表中设定各个编辑类型和预设图片编辑控件之间的关联关系。比如，编辑类型包含A1和A2，预设图片编辑控件包含B1至B4，此时，可以通过该关联表确定预设图片编辑控件B1至B4中与编辑类型A1具有关联关系的编辑控件，并将该具有关联关系的编辑控件确定为编辑类型A1的目标编辑控件。

S105：基于所述目标编辑控件所在的图层，对所述待编辑图片执行图片编辑操作，编辑之后得到目标图片。

在本公开实施例中，上述预设图片编辑控件分别位于不同的图层，其中，每个图层包含至少一个预设图片编辑控件。在根据上述图片编辑指令在预设图片编辑控件中确定出目标编辑控件之后，在一种可选的实施方式中，可以调出该目标编辑控件所属的图层，并在该图层上对该带编辑图片进行编辑，得到目标图片。

通过上述描述可知，在本公开实施例中，能够实现在Flutter应用程序中进行图片编辑，相对于现有技术中Flutter应用程序需要跨平台进行图片编辑的方式，降低了跨平台应用程序对原生宿主平台的图片编辑功能的依赖性，同时减少了开发和运维成本，提高了用户的操作体验。

需要说明的是，在本公开实施例中，多个预设图片编辑控件包含：容器控件，布局控件(对应photo view图层)，绘画控件(对应Canvas图层)，贴图控件(对应另一个仅覆盖贴图的photo view图层)。具体地，多个预设图片编辑控件所对应图层之间的叠加关系如图2所示，从图2中可以看出，通过该Flutter应用程序对待编辑图片进行编辑时，上述预设图片编辑控件之间具有嵌套关系，且控件所对应的图层从下到上依次叠加，位于最底端的是图片编辑区域，该图片编辑区域用于覆盖整个待编辑图片所在的区域，且能够适应用户端的显示屏幕尺寸调节自身区域尺寸；上述容器控件位于图片编辑区域上；上述绘画控件和贴图控件为最顶端的控件，且画控件和贴图控件为互斥控件，即无法同时通过图片编辑指令进行调用。

在一个可选的实施方式中，步骤S105，基于所述目标编辑控件所在的图层，对所述待编辑图片执行图片编辑操作，编辑之后得到目标图片，包括如下过程：

(1)在所述目标编辑控件的数量为多个的情况下，确定多个所述目标编辑控件之间的嵌套关系。

在本公开实施例中，若上述目标编辑控件的数量为多个，则可以确定多个目标编辑控件之间的嵌套关系。这里，可以根据多个目标编辑控件在多个预设图片编辑控件之间的嵌套关系确定多个目标编辑控件之间的嵌套关系。

例如，多个预设图片编辑控件包含以下控件：容器控件、布局控件、绘画控件和贴图控件，其中，绘画控件和贴图控件之间是互斥的，也即绘画控件和贴图控件之间不能同时出现。其中，布局控件嵌套在容器控件内，绘画控件和贴图控件嵌套在布局控件内。

当图片编辑操作为目标操作时，该多个目标编辑控件包含：容器控件和布局控件，此时，多个目标编辑编辑控件之间的嵌套关系为：布局控件嵌套在容器控件内。

当图片编辑操作为绘画操作时，该多个目标编辑控件包含：容器控件、布局控件和绘画控件，此时，多个目标编辑编辑控件之间的嵌套关系为：布局控件嵌套在容器控件内，绘画控件嵌套在布局控件内。

当图片编辑操作为贴图操作时，该多个目标编辑控件包含：容器控件、布局控件和贴图控件，此时，多个目标编辑编辑控件之间的嵌套关系为：布局控件嵌套在容器控件内，贴图控件嵌套在布局控件内。

(2)基于所述嵌套关系在所述Flutter应用程序的图片编辑区域中对多个所述目标编辑控件所在的图层进行叠加处理。

在本公开实施例中，在确定出嵌套关系之后，就可以按照设置的嵌套关系，对多个目标编辑控件所对应的图层进行叠加处理。

(3)基于叠加处理之后的图层，对所述待编辑图片执行图片编辑操作，编辑之后得到目标图片。

在对多个目标编辑控件所在的图层进行叠加处理之后，就可以基于叠加处理之后的图层对待编辑图片执行图片编辑操作。

例如，当图片编辑操作为目标操作时，可以将布局控件所在图层叠加在容器控件所在图层上，从而在布局控件所在图层对待编辑图片执行目标操作。

当图片编辑操作为绘画操作时，可以将布局控件所在图层叠加在容器控件所在图层上，并将绘画控件所在图层叠加在布局控件所在图层上，从而在绘画控件所在图层对待编辑图片执行绘画操作。

当图片编辑操作为贴图操作时，可以将布局控件所在图层叠加在容器控件所在图层上，并将贴图控件所在图层叠加在布局控件所在图层上，从而在贴图控件所在图层对待编辑图片执行贴图操作。

通过上述描述可知，在本公开实施例中，可以根据目标图片编辑控件之间的嵌套关系，对目标编辑控件所在的图层进行叠加处理，从而对待编辑图片进行编辑，实现了多种目标编辑控件的编辑效果的叠加，提高了操作的灵活性。

在一个可选的实施方式中，步骤S105，基于所述目标编辑控件所在的图层，对所述待编辑图片执行图片编辑操作，编辑之后得到目标图片，具体包括如下过程：

(1)在所述图片编辑操作为目标操作的情况下，在所述目标编辑控件中确定布局控件；所述目标操作包括以下任一种：裁剪操作、旋转操作、缩放操作。

(2)、对展示在所述布局控件所在图层中的待编辑图片执行所述目标操作，得到所述目标图片。

在图片编辑操作为目标操作的情况下，目标编辑控件中至少包含底层空间和布局控件。此时，可以在容器控件所对应图层的图片编辑区域中展示待编辑图片，其中，该图片编辑区域包含用于指示上述目标操作的指示按钮。

在检测到通过指示按钮对上述任一种目标操作的确认指令后，可以在目标编辑控件中确定布局控件，并对展示在布局控件所在图层中的待编辑图片执行目标操作。其中，上述布局控件所在图层可以为photo view图层。

如图3所示，photo view图层(布局控件所对应的图层)位于上述图片编辑区域上。

在本公开实施例中，若目标操作为旋转操作，则响应于针对上述待编辑图片的旋转操作，获取该旋转操作中所指定的目标角度以及旋转方向(该旋转方向可以为顺时针或者逆时针)，将该待编辑图片按照指定的旋转方向旋转目标角度，从而得到目标图片。

通过上述描述可知，在本公开实施例中，可以在确定上述图片编辑操作为目标操作之后，在该目标操作所对应的图层中对待编辑图片进行目标操作，从而得到目标图片，提高了图片编辑的效率。

在一个可选的实施方式中，在检测到所述布局控件所在图层上覆盖目标图层的情况下，对展示在所述布局控件所在图层中的待编辑图片和所述目标图层中的图层信息执行所述目标操作，得到所述目标图片。

这里，目标图层可以用于表示绘画控件所在图层，或者，贴图控件所在图层。若上述布局控件所在图层上覆盖目标图层，则可以表征在对待编辑图片进行目标操作之前，对待编辑图片进行了绘画操作或者贴图操作。

此时，在目标图层上可以包含绘画笔记或者对应的贴图。在此情况下，对待编辑图片和绘画笔记(或者贴图)同时执行目标操作，例如，裁剪操作、缩放操作、旋转操作。

通过上述描述可知，由于上述目标图层在布局控件所在图层的上层，因此在布局控件所在图层中对的待编辑图片进行目标操作时，目标图层中的图层信息(绘画笔记或者对应的贴图)也会对目标操作进行跟随。例如，上述目标操作为旋转操作时，上述待编辑图片跟随用户的操作指令进行旋转的同时，上述目标图层中的绘画轨迹也会跟随旋转相应的角度。

在本公开实施例一个可选的实施方式中，步骤S105，基于所述目标编辑控件所在的图层，对所述待编辑图片执行图片编辑操作，编辑之后得到目标图片，还包括如下过程：

(1)在所述图片编辑操作为绘画操作的情况下，获取用户端在绘画控件所在图层中的绘画轨迹，其中，所述绘画控件为所述目标编辑控件中位于最上层的编辑控件。

在本公开实施例中，若上述图片编辑操作为为绘画操作，则上述目标编辑控件中包含绘画控件，该绘画控件所对应的图层可以为画布图层(Canvas)则针对该绘画操作调出该绘画操作所对应的目标编辑控件的图层。在一种可选的实施方式中，该图层可以为Canvas画布图层，该Canvas画布图层可以通过Flutter应用程序所在用户端设备的显示界面的触控面板，捕捉用户的绘画轨迹，并以坐标的形式对该绘画轨迹进行记录。

(2)在所述绘画控件所在图层中绘制所述绘画轨迹，绘制之后得到所述目标图片。

在本公开实施例中，上述绘画控件所在图层在获取到用户的绘画轨迹之后，就可以在显示界面上，对该绘画轨迹进行渲染，具体地，可以根据预设的画笔颜色，对上述绘画轨迹的坐标点进行连接，得到渲染之后的绘画轨迹，并将该绘画轨迹叠加在待编辑图片上，得到上述目标图片，如图4所示。

这里，需要说明的是，在显示界面上展示出绘画轨迹之后，可以对绘画轨迹进行移动，以调整绘画轨迹在待编辑图片上的位置。

具体地，在绘画轨迹为多个的情况下，可以选中待移动的绘画轨迹，并点击图片编辑区域中的移动按钮，此时，用户就可以拖动该待移动的绘画轨迹，并将该绘画轨迹移动至指定的位置。当检测到该绘画轨迹在一段时间内处于静止状态时，则对该绘画轨迹移动完成。

通过上述描述可知，在本公开实施例中，可以通过获取用户端在绘画控件所在图层中的绘画轨迹，对待编辑图片进行绘制得到目标片，其中，上述绘画控件所在图层位于图片编辑区域的最上层，提高了对待编辑图片进行编辑的灵活性。

在本公开实施例中，在检测到所述布局控件所在图层上覆盖目标图层的情况下，还包括：对展示在所述布局控件所在图层中的待编辑图片和所述目标图层中的图层信息执行所述目标操作，得到所述目标图片。

在本公开实施例中，若上述布局控件所在图层上覆盖目标图层时，例如，上述目标图层为绘画控件所在图层，则针对该目标图层的目标操作可以为绘画操作，该绘画操作得到的绘画笔记即为上述图层信息。另外的，上述目标操作还可以为针对布局控件所在涂层的操作，如旋转操作等。

具体地，由于上述目标图层在上述布局控件所在图层的上层，因此在上述布局控件所在图层中对待编辑图片进行目标操作时，上述目标图层中的图层信息也会对目标操作进行跟随。例如，上述目标操作为旋转操作时，上述待编辑图片跟随用户的操作指令进行旋转的同时，上述目标土层中的绘画轨迹也会跟随旋转相应的角度。

在本公开实施例中，步骤S105，基于所述目标编辑控件所在的图层，对所述待编辑图片执行图片编辑操作，编辑之后得到目标图片，还包括如下过程：

(1)在所述图片编辑操作为贴图操作的情况下，获取待添加的贴图。

在本公开实施例中，待添加的贴图可以为Flutter应用程序所安装的终端设备的本地文件中用于存储图片的文件夹中的图片，待添加的贴图在获取上述待添加贴图时，可以获取本地文件中用于存储图片的文件夹，也可以为上述Flutter应用程序中提供的图片、或者卡通表情，或者艺术字等。

(2)在贴图控件所在图层展示所述待添加的贴图，展示之后得到所述目标图片，其中，所述贴图控件为目标编辑控件中位于最上层的编辑控件。

在本公开实施例中，在确定上述图片编辑操作为贴图操作后，就可以调出贴图控件所在图层，在一种可选的实施方式中，上述贴图控件所在图层展示待添加的贴图，其中，贴图控件所在图层可以为一个固定尺寸的photo view图层，该的photo view图层的尺寸随着添加的贴图尺寸进行适应性改变，以便对该photo view图层内的贴图进行图层编辑操作。

需要说明的是，上述贴图控件和绘画控件均为位于最上层的编辑控件，且贴图控件和绘画控件之间的嵌套关系为互斥的，即不能同时在图片编辑区域内调出其中一个控件所对应的图层，在需要对待编辑图片进行绘画操作和贴图操作时，需要依次调出贴图控件和绘画控件所对应的图层并进行目标操作。

通过上述描述可知，在本公开实施例中，可以通过贴图操作对待编辑图片进行贴图，得到目标图片，从而进一步完善了Flutter应用程序的图片编辑功能。

在本公开实施例中，在所述贴图控件所在图层展示所述待添加的贴图之后，本公开实施例还包括：可以响应于针对所述贴图控件所在图层的图层编辑指令，对所述贴图控件所在图层执行相应图层编辑操作，其中，所述图层编辑操作包括以下至少之一：旋转、缩放、移动。

在本公开实施例中，在上述贴图控件所在图层添加相应的贴图之后，还可以对该贴图进行图层编辑操作，例如，旋转、缩放、移动，其中，不同的图层编辑操作对应着不同的目标按钮，如图5所示，需要说明的是，上述贴图控件所在图层中可以添加至少一张贴图，并且可以针对其中每张贴图单独进行上述图层编辑操作。

通过上述描述可知，在本公开实施例中，可以通过图层编辑操作对上述贴图控件所在图层中添加的贴图进行编辑，提高了对图片编辑的操作裕度，更加适应用户对图片编辑的操作需求。

在本公开实施例中，步骤S101，检测对Flutter应用程序中待编辑图片的图片编辑指令，包括：在检测到对所述Flutter应用程序的容器控件中目标按钮的点击操作的情况下，确定检测到对所述Flutter应用程序中待编辑图片的图片编辑指令。

在本公开实施例中，上述Flutter应用程序中包含容器控件，该容器控件用于展示和图片编辑指令相对应的目标按钮，该容器控件将上述目标按钮展示在待编辑图片的图片编辑区域上，以便用户对待编辑图片进行相应的图片编辑操作，如图6所示。

需要说明的是，上述图片编辑操作包括以下至少之一：裁剪操作、旋转操作、绘画操作、贴图操作。

另外的，在对上述待编辑图片进行图片编辑操作并得到目标图片之后，可以将该目标图片存储到上述用户端的本地文件中，同时，也可以通过上述Flutter应用程序将该目标图片进行发布至目标平台，其中，该目标平台可以为上述用户端中的平台，也可以为支持图片发布功能的其他目标平台，例如，上述用户端中的平台可以为Android平台，上述其他目标平台可以为Android平台，也可以为ios等平台。

综上，在本公开实施例中，通过Flutter应用程序中的多个预设图片编辑控件对待编辑图片进行编辑，得到目标图片，从而实现在Flutter应用程序中进行图片编辑，相对于现有技术中Flutter应用程序需要跨平台进行图片编辑的方式，本公开能够降低了跨平台应用程序对原生宿主平台的图片编辑功能的依赖性，同时减少了开发和运维成本，提高了用户的操作体验。

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

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

参照图7所示，为本公开实施例提供的一种图片处理装置的示意图，所述装置包括：检测模块、确定模块、编辑模块；其中，

检测模块：用于检测对Flutter应用程序中待编辑图片的图片编辑指令；其中，所述图片编辑指令中携带对所述待编辑图片进行编辑的编辑类型；

确定模块：用于响应于所述图片编辑指令，在所述Flutter应用程序中所包含的多个预设图片编辑控件中确定用于执行所述图片编辑指令的目标编辑控件；

编辑模块：用于基于所述目标编辑控件所在的图层，对所述待编辑图片执行图片编辑操作，编辑之后得到目标图片。

本公开实施例通过可跨平台的Flutter应用程序中的多个预设图片编辑控件对待编辑图片进行编辑，得到目标图片，从而降低了跨平台应用程序对原生宿主平台的图片编辑功能的依赖性，减少了开发和运维成本，同时打破了原生宿主平台的图片编辑功能的限制，可以进行更多样化的图片编辑，提高了用户的操作体验。

一种可能的实施方式中，编辑模块，还用于：在所述目标编辑控件的数量为多个的情况下，确定多个所述目标编辑控件之间的嵌套关系；基于所述嵌套关系在所述Flutter应用程序的图片编辑区域中对多个所述目标编辑控件所在的图层进行叠加处理；基于叠加处理之后的图层，对所述待编辑图片执行图片编辑操作，编辑之后得到目标图片。

一种可能的实施方式中，编辑模块，还用于：在所述图片编辑操作为目标操作的情况下，在所述目标编辑控件中确定布局控件；所述目标操作包括以下任一种：裁剪操作、旋转操作、缩放操作；对展示在所述布局控件所在图层中的待编辑图片执行所述目标操作，得到所述目标图片。

一种可能的实施方式中，该装置还用于：在检测到所述布局控件所在图层上覆盖目标图层的情况下，对展示在所述布局控件所在图层中的待编辑图片和所述目标图层中的图层信息执行所述目标操作，得到所述目标图片。

一种可能的实施方式中，编辑模块，还用于：在所述图片编辑操作为绘画操作的情况下，获取用户端在绘画控件所在图层中的绘画轨迹，其中，所述绘画控件为所述目标编辑控件中位于最上层的编辑控件；在所述绘画控件所在图层中绘制所述绘画轨迹，绘制之后得到所述目标图片。

一种可能的实施方式中，编辑模块，还用于：在所述图片编辑操作为贴图操作的情况下，获取待添加的贴图；在贴图控件所在图层展示所述待添加的贴图，展示之后得到所述目标图片，其中，所述贴图控件为目标编辑控件中位于最上层的编辑控件。

一种可能的实施方式中，该装置还用于：在所述贴图控件所在图层展示所述待添加的贴图之后，响应于针对所述贴图控件所在图层的图层编辑指令，对所述贴图控件所在图层执行相应图层编辑操作，其中，所述图层编辑操作包括以下至少之一：旋转、缩放、移动。

一种可能的实施方式中，所述图片编辑操作包括以下至少之一：裁剪操作、旋转操作、绘画操作、贴图操作。

一种可能的实施方式中，检测模块，还用于：在检测到对所述Flutter应用程序的容器控件中目标按钮的点击操作的情况下，确定检测到对所述Flutter应用程序中待编辑图片的图片编辑指令。

对应于图1中的图片处理方法，本公开实施例还提供了一种电子设备800，如图8所示，为本公开实施例提供的电子设备800结构示意图，包括：

处理器81、存储器82、和总线83；存储器82用于存储执行指令，包括内存821和外部存储器822；这里的内存821也称内存储器，用于暂时存放处理器81中的运算数据，以及与硬盘等外部存储器822交换的数据，处理器81通过内存821与外部存储器822进行数据交换，当所述电子设备800运行时，所述处理器81与所述存储器82之间通过总线83通信，使得所述处理器81执行以下指令：

检测对Flutter应用程序中待编辑图片的图片编辑指令；其中，所述图片编辑指令中携带对所述待编辑图片进行编辑的编辑类型；响应于所述图片编辑指令，在所述Flutter应用程序中所包含的多个预设图片编辑控件中确定用于执行所述图片编辑指令的目标编辑控件；基于所述目标编辑控件所在的图层，对所述待编辑图片执行图片编辑操作，编辑之后得到目标图片。

一种可能的实施方式中，处理器81还可以执行以下指令：

在所述目标编辑控件的数量为多个的情况下，确定多个所述目标编辑控件之间的嵌套关系；基于所述嵌套关系在所述Flutter应用程序的图片编辑区域中对多个所述目标编辑控件所在的图层进行叠加处理；基于叠加处理之后的图层，对所述待编辑图片执行图片编辑操作，编辑之后得到目标图片。

一种可能的实施方式中，处理器81还可以执行以下指令：

在所述图片编辑操作为目标操作的情况下，在所述目标编辑控件中确定布局控件；所述目标操作包括以下任一种：裁剪操作、旋转操作、缩放操作；对展示在所述布局控件所在图层中的待编辑图片执行所述目标操作，得到所述目标图片。

一种可能的实施方式中，处理器81还可以执行以下指令：

在检测到所述布局控件所在图层上覆盖目标图层的情况下，对展示在所述布局控件所在图层中的待编辑图片和所述目标图层中的图层信息执行所述目标操作，得到所述目标图片。

一种可能的实施方式中，处理器81还可以执行以下指令：

在所述图片编辑操作为绘画操作的情况下，获取用户端在绘画控件所在图层中的绘画轨迹，其中，所述绘画控件为所述目标编辑控件中位于最上层的编辑控件；在所述绘画控件所在图层中绘制所述绘画轨迹，绘制之后得到所述目标图片。

一种可能的实施方式中，处理器81还可以执行以下指令：

在所述图片编辑操作为贴图操作的情况下，获取待添加的贴图；在贴图控件所在图层展示所述待添加的贴图，展示之后得到所述目标图片，其中，所述贴图控件为目标编辑控件中位于最上层的编辑控件。

一种可能的实施方式中，处理器81还可以执行以下指令：

在所述贴图控件所在图层展示所述待添加的贴图之后，响应于针对所述贴图控件所在图层的图层编辑指令，对所述贴图控件所在图层执行相应图层编辑操作，其中，所述图层编辑操作包括以下至少之一：旋转、缩放、移动。

一种可能的实施方式中，处理器81还可以执行以下指令：

在检测到对所述Flutter应用程序的容器控件中目标按钮的点击操作的情况下，确定检测到对所述Flutter应用程序中待编辑图片的图片编辑指令。

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

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

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

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

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

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

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

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

Claims (8)

1.一种图片处理方法，其特征在于，应用于Flutter应用程序，所述方法包括：

检测对Flutter应用程序中待编辑图片的图片编辑指令；其中，所述图片编辑指令中携带对所述待编辑图片进行编辑的编辑类型；

响应于所述图片编辑指令，在所述Flutter应用程序中所包含的多个预设图片编辑控件中确定用于执行所述图片编辑指令的目标编辑控件；

基于所述目标编辑控件所在的图层，对所述待编辑图片执行图片编辑操作，编辑之后得到目标图片；所述图片编辑操作包括以下至少之一：裁剪操作、旋转操作、绘画操作、贴图操作；

所述基于所述目标编辑控件所在的图层，对所述待编辑图片执行图片编辑操作，编辑之后得到目标图片，包括：

在所述目标编辑控件的数量为多个的情况下，确定多个所述目标编辑控件之间的嵌套关系；

基于所述嵌套关系在所述Flutter应用程序的图片编辑区域中对多个所述目标编辑控件所在的图层进行叠加处理；

基于叠加处理之后的图层，对所述待编辑图片执行图片编辑操作，编辑之后得到目标图片；

在所述图片编辑操作为目标操作的情况下，在所述目标编辑控件中确定布局控件；所述目标操作包括以下任一种：裁剪操作、旋转操作、缩放操作；

对展示在所述布局控件所在图层中的待编辑图片执行所述目标操作，得到所述目标图片；

在检测到所述布局控件所在图层上覆盖目标图层的情况下，对展示在所述布局控件所在图层中的待编辑图片和所述目标图层中的图层信息执行所述目标操作，得到所述目标图片。

2.根据权利要求1所述的方法，其特征在于，所述基于所述目标编辑控件所在的图层，对所述待编辑图片执行图片编辑操作，编辑之后得到目标图片，包括：

在所述图片编辑操作为绘画操作的情况下，获取用户端在绘画控件所在图层中的绘画轨迹，其中，所述绘画控件为所述目标编辑控件中位于最上层的编辑控件；

在所述绘画控件所在图层中绘制所述绘画轨迹，绘制之后得到所述目标图片。

3.根据权利要求1所述的方法，其特征在于，所述基于所述目标编辑控件所在的图层，对所述待编辑图片执行图片编辑操作，编辑之后得到目标图片，包括：

在所述图片编辑操作为贴图操作的情况下，获取待添加的贴图；

在贴图控件所在图层展示所述待添加的贴图，展示之后得到所述目标图片，其中，所述贴图控件为目标编辑控件中位于最上层的编辑控件。

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

在所述贴图控件所在图层展示所述待添加的贴图之后，响应于针对所述贴图控件所在图层的图层编辑指令，对所述贴图控件所在图层执行相应图层编辑操作，其中，所述图层编辑操作包括以下至少之一：旋转、缩放、移动。

5.根据权利要求1所述的方法，其特征在于，所述检测对Flutter应用程序中待编辑图片的图片编辑指令，包括：

在检测到对所述Flutter应用程序的容器控件中目标按钮的点击操作的情况下，确定检测到对所述Flutter应用程序中待编辑图片的图片编辑指令。

6.一种图片处理装置，其特征在于，包括：

检测模块：用于检测对Flutter应用程序中待编辑图片的图片编辑指令；其中，所述图片编辑指令中携带对所述待编辑图片进行编辑的编辑类型；

确定模块：用于响应于所述图片编辑指令，在所述Flutter应用程序中所包含的多个预设图片编辑控件中确定用于执行所述图片编辑指令的目标编辑控件；

编辑模块：用于基于所述目标编辑控件所在的图层，对所述待编辑图片执行图片编辑操作，编辑之后得到目标图片；所述图片编辑操作包括以下至少之一：裁剪操作、旋转操作、绘画操作、贴图操作；

所述编辑模块具体用于：

在所述目标编辑控件的数量为多个的情况下，确定多个所述目标编辑控件之间的嵌套关系；

基于所述嵌套关系在所述Flutter应用程序的图片编辑区域中对多个所述目标编辑控件所在的图层进行叠加处理；

基于叠加处理之后的图层，对所述待编辑图片执行图片编辑操作，编辑之后得到目标图片；

在所述图片编辑操作为目标操作的情况下，在所述目标编辑控件中确定布局控件；所述目标操作包括以下任一种：裁剪操作、旋转操作、缩放操作；

对展示在所述布局控件所在图层中的待编辑图片执行所述目标操作，得到所述目标图片；

在检测到所述布局控件所在图层上覆盖目标图层的情况下，对展示在所述布局控件所在图层中的待编辑图片和所述目标图层中的图层信息执行所述目标操作，得到所述目标图片。

7.一种电子设备，其特征在于，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当电子设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行如权利要求1至5任意一项所述的图片处理方法的步骤。

8.一种计算机可读存储介质，其特征在于，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行如权利要求1至5任意一项所述的图片处理方法的步骤。