CN110992438A

CN110992438A - 图片编辑的方法及装置

Info

Publication number: CN110992438A
Application number: CN201911210413.1A
Authority: CN
Inventors: 许�鹏
Original assignee: Gaoding Xiamen Technology Co Ltd
Current assignee: Gaoding Xiamen Technology Co Ltd
Priority date: 2019-11-29
Filing date: 2019-11-29
Publication date: 2020-04-10
Anticipated expiration: 2039-11-29
Also published as: CN110992438B

Abstract

本申请公开了一种图片编辑的方法及装置。该申请的方法包括获取待编辑的用户图片以及异形遮罩图模板，所述异形遮罩图模板为镂空部分为不规则形状的模板；根据异形遮罩图模板的形状将待编辑的用户图片和异形遮罩图模板绘制在同一视图上，得到编辑后的用户图片，使待编辑的用户图片完全贴合的填充到异形遮罩图模板的镂空部分。本申请解决现有的抠图方式会产生丢失用户图片部分内容的问题。

Description

图片编辑的方法及装置

技术领域

本申请涉及抠图技术领域，具体而言，涉及一种图片编辑的方法及装置。

背景技术

在进行抠图时，会有在图片模板上将规则的用户图片加载为异形(非规则的图形)图片的需求，比如将用户的图片加载为一个扇子形状、枫叶形状的图片等。对于这种情况，现有的做法为：在用户图片上方覆盖一张与图片容器相同大小的遮罩图片，该遮罩图片上有一个异形的镂空图形用于显示用户选择的图片。但是，由于采用遮罩图片直接覆盖在用户图片上方，会出现遮罩图片会覆盖掉除了镂空部分之外的处于遮罩图片下方所有的内容，最终达到的效果图会丢失用户图片部分内容，影响用户的体验。

发明内容

本申请的主要目的在于提供一种图片编辑的方法及装置，以解决现有的抠图方式会产生丢失用户图片部分内容的问题。

为了实现上述目的，根据本申请的第一方面，提供了一种图片编辑的方法。

根据本申请的图片编辑的方法包括：

获取待编辑的用户图片以及异形遮罩图模板，所述异形遮罩图模板为镂空部分为不规则形状的模板；

根据异形遮罩图模板的形状将待编辑的用户图片和异形遮罩图模板绘制在同一视图上，得到编辑后的用户图片，使待编辑的用户图片完全贴合的填充到异形遮罩图模板的镂空部分。

进一步的，在得到编辑后的用户图片之后，所述方法还包括：

接收用户的手势操作，所述手势操作为对编辑后的用户图片中待编辑的用户图片内容进行的操作；

根据手势操作，实时将待编辑的图片和异形遮罩图模板进行重新绘制。

进一步的，所述获取异形遮罩图模板包括：

获取通过图形视频处理软件AE导出的异形遮罩图；

通过Lottie将所述异形遮罩图加载到图片编辑模板中生成异形遮罩图模板。

进一步的，所述通过Lottie将所述异形遮罩图加载到图片编辑模板中生成异形遮罩图模板包括：

通过Lottie解析异形遮罩图得到异形遮罩图的背景图和异形遮罩图上的用户可编辑的元素；

将所述背景图和用户可编辑的元素绘制在同一视图上，得到异形遮罩图模板。

进一步的，所述根据异形遮罩图模板的形状将待编辑的用户图片和异形遮罩图模板绘制在同一视图上还包括：

对异形遮罩图模板的镂空部分的边缘部分进行边缘羽化处理。

为了实现上述目的，根据本申请的第二方面，提供了一种图片编辑的装置。

根据本申请的图片编辑的装置包括：

获取单元，用于获取待编辑的用户图片以及异形遮罩图模板，所述异形遮罩图模板为镂空部分为不规则形状的模板；

绘制单元，用于根据异形遮罩图模板的形状将待编辑的用户图片和异形遮罩图模板绘制在同一视图上，得到编辑后的用户图片，使待编辑的用户图片完全贴合的填充到异形遮罩图模板的镂空部分。

进一步的，所述装置还包括：

接收单元，用于在得到编辑后的用户图片之后，接收用户的手势操作，所述手势操作为对编辑后的用户图片中待编辑的用户图片内容进行的操作；

所述绘制单元，还包括根据手势操作，实时将待编辑的图片和异形遮罩图模板进行重新绘制。

进一步的，所述获取单元还包括：

获取模块，用于获取通过图形视频处理软件AE导出的异形遮罩图；

生成模块，用于通过Lottie将所述异形遮罩图加载到图片编辑模板中生成异形遮罩图模板。

进一步的，所述生成模块还用于：

进一步的，所述绘制单元还用于：

为了实现上述目的，根据本申请的第三方面，提供了一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行上述第一方面中任一项所述的图片编辑的方法。

在本申请实施例中，图片编辑的方法及装置中，首先获取待编辑的用户图片以及异形遮罩图模板，其中异形遮罩图模板为镂空部分为不规则形状的模板；然后，根据异形遮罩图的形状将待编辑的用户图片和异形遮罩图模板绘制在同一视图上，得到编辑后的用户图片，使待编辑的用户图片完全贴合的填充到异形遮罩图模板的镂空部分。可以看到，本申请中通过将异形遮罩图模板和待编辑的用户图片重新绘制在同一视图上，使待编辑的用户图片完全贴合的填充到异形遮罩图模板的镂空部分，因此可以解决现有的方式中将待编辑的用户图片的部分内容丢失的问题。

附图说明

构成本申请的一部分的附图用来提供对本申请的进一步理解，使得本申请的其它特征、目的和优点变得更明显。本申请的示意性实施例附图及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例提供的一种图片编辑的方法流程图；

图2是根据本申请实施例提供的一种编辑后的用户图片的示意图；

图3是根据本申请实施例提供的另一种图片编辑的方法流程图；

图4是根据本申请实施例提供的另一种编辑后的用户图片的示意图；

图5是根据本申请实施例提供的一种图片编辑的装置的组成框图；

图6是根据本申请实施例提供的另一种图片编辑的装置的组成框图。

具体实施方式

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

根据本申请实施例，提供了一种图片编辑的方法，如图1所示，该方法包括如下的步骤：

S101.获取待编辑的用户图片以及异形遮罩图模板。

用户点击进入图片编辑的界面后，界面中提供各种不同的异形遮罩图模板供用户选择，选择确定后，再通过从本地选择或者其他路径将需要编辑的图片(待编辑的用户图片)进行加载。

需要说明的是，异形遮罩图模板是镂空部分为不规则形状的模板，如图2所示，为扇形遮罩图模板的示意图。图2中扇形遮罩图模板不包括扇形图内的内容。

S102.根据异形遮罩图的形状将待编辑的用户图片和异形遮罩图模板绘制在同一视图上，得到编辑后的用户图片。

具体的混合绘制在同一视图上时，需要根据异形遮罩图模板的镂空部分呈现的形状使待编辑的用户图片完全贴合的填充到异形遮罩图模板的镂空部分。即按照镂空部分的形状进行待编辑的用户图片的绘制。图2为得到的编辑后的用户图片。本实施例中由于不是直接将遮罩图覆盖到待编辑的用户图片上，而是将异形遮罩图与待编辑的用户图片进行重新绘制在同一视图上，因此可以调整待编辑的用户图片中内容的位置，使其可以完全填充到异形遮罩图模板的镂空部分。而且在使用异形遮罩图模板的大小对图片进行编辑时，只限制其中包含的内容，并不限制图片的大小，这种方式与现有技术中异形遮罩图与待编辑的用户图片的尺存大小相同的方式是不同的，本实施例中的方式更加灵活。

从以上的描述中，可以看出，本申请实施例的图片编辑的方法中，首先获取待编辑的用户图片以及异形遮罩图模板，其中异形遮罩图模板为镂空部分为不规则形状的模板；然后，根据异形遮罩图的形状将待编辑的用户图片和异形遮罩图模板绘制在同一视图上，得到编辑后的用户图片，使待编辑的用户图片完全贴合的填充到异形遮罩图模板的镂空部分。可以看到，本实施例中通过将异形遮罩图模板和待编辑的用户图片重新绘制在同一视图上，使待编辑的用户图片完全贴合的填充到异形遮罩图模板的镂空部分，因此可以解决现有的方式中将待编辑的用户图片的部分内容丢失的问题。

作为上述实施例的进一步的补充和细化，根据本申请实施例，提供了另一种图片编辑的方法，如图3所示，该方法包括如下的步骤：

S201.获取通过图形视频处理软件AE导出的异形遮罩图。

设计师通过图形视频处理软件(After Effects，AE)设计异形遮罩图。AE是Adobe公司推出的一款图形视频处理软件，适用于从事设计和视频特技的机构，包括电视台、动画制作公司、个人后期制作工作室以及多媒体工作室，属于层类型后期软件。因此实施例需要从AE中导出设计好的异形遮罩图。本实施例中也可以通过其他的图形视频处理软件获取设计好的异形遮罩图，不限制为AE软件。

S202.通过Lottie将异形遮罩图加载到图片编辑模板中生成异形遮罩图模板。

Lottie是一个开源的动画库，它能够同时支持iOS，Android与ReactNative的开发。本实施例就是基于Lottie进行二次开发，实现将上述步骤中导出的异形遮罩图加载到图片编辑模板中，生成异形遮罩图模板。如果设计的异形遮罩图模板上有需要用户可编辑的元素，比如诗句等文字。这种情况下为了保证生成的遮罩图模板中可编辑的元素是可编辑状态(可以修改文字内容)，则首先需要通过Lottie解析异形遮罩图得到异形遮罩图的背景图和异形遮罩图上的用户可编辑的元素；将背景图和用户可编辑的元素绘制在同一视图上，得到异形遮罩图模板。例如图4所示，其中遮罩图上的文字依然是可以编辑的。

需要说明的是，对于不能在AE软件上设计异形遮罩图的用户，可以直接在图片编辑面板或界面中直接选择已经生成好的异形遮罩图模板。已经生成好的异形遮罩图模板的生成过程依然是步骤S201、S202的实现过程。

S203.获取选中的异形遮罩图模板和待编辑的用户图片。

本步骤的实现方式与图1步骤S101的实现方式相同，此处不再赘述。

S204.根据异形遮罩图模板的形状将待编辑的用户图片和异形遮罩图模板绘制在同一视图上，得到编辑后的用户图片。

本步骤的实现方式除图1中步骤S102中描述的实现方式外，为了使编辑后的用户图片的效果更好，需要在得到最终显示的编辑后的用户图片之前增加对异形遮罩图模板的镂空部分的边缘部分进行边缘羽化处理，还可以进行图像的渐变化的处理。边缘羽化处理和图像渐变化处理的方式与现有的方式相同，可以通过对应的处理工具实现。在实际应用中，边缘羽化处理和图像渐变化处理还可以工具的方式提供给用户，使用户自主进行选择处理。

S205.接收用户的手势操作。

其中，手势操作为对编辑后的用户图片中待编辑的用户图片内容进行的操作；手势操作包括移动、旋转、缩放等。

S206.根据手势操作，实时将待编辑的图片和异形遮罩图模板进行重新绘制。

为了保证最终得到准确的图片编辑的效果，需要根据手势的操作实时的重新进行步骤S204的执行，即随着图片位置等的变化，实时的进行绘制的调整。

需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

根据本申请实施例，还提供了一种用于实施上述图1和图3所述方法的图片编辑的装置，如图5所示，该装置包括：

获取单元31，用于获取待编辑的用户图片以及异形遮罩图模板，所述异形遮罩图模板为镂空部分为不规则形状的模板；

绘制单元32，用于根据异形遮罩图模板的形状将待编辑的用户图片和异形遮罩图模板绘制在同一视图上，得到编辑后的用户图片，使待编辑的用户图片完全贴合的填充到异形遮罩图模板的镂空部分。

从以上的描述中，可以看出，本申请实施例的图片编辑的装置中，首先获取待编辑的用户图片以及异形遮罩图模板，其中异形遮罩图模板为镂空部分为不规则形状的模板；然后，根据异形遮罩图的形状将待编辑的用户图片和异形遮罩图模板绘制在同一视图上，得到编辑后的用户图片，使待编辑的用户图片完全贴合的填充到异形遮罩图模板的镂空部分。可以看到，本实施例中通过将异形遮罩图模板和待编辑的用户图片重新绘制在同一视图上，使待编辑的用户图片完全贴合的填充到异形遮罩图模板的镂空部分，因此可以解决现有的方式中将待编辑的用户图片的部分内容丢失的问题。

进一步的，如图6所示，所述装置还包括：

接收单元33，用于在得到编辑后的用户图片之后，接收用户的手势操作，所述手势操作为对编辑后的用户图片中待编辑的用户图片内容进行的操作；

所述绘制单元32，还包括根据手势操作，实时将待编辑的图片和异形遮罩图模板进行重新绘制。

进一步的，如图6所示，所述获取单元31还包括：

获取模块311，用于获取通过图形视频处理软件AE导出的异形遮罩图；

生成模块312，用于通过Lottie将所述异形遮罩图加载到图片编辑模板中生成异形遮罩图模板。

进一步的，如图6所示，所述生成模块312还用于：

进一步的，所述绘制单元32还用于：

具体的，本申请实施例的装置中各单元、模块实现其功能的具体过程可参见方法实施例中的相关描述，此处不再赘述。

根据本申请实施例，还提供了一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行图1和图3中任一所述的图片编辑的方法。

显然，本领域的技术人员应该明白，上述的本申请的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请不限制于任何特定的硬件和软件结合。

以上所述仅为本申请的优选实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims

1.一种图片编辑的方法，其特征在于，所述方法包括：

2.根据权利要求1所述的图片编辑的方法，其特征在于，在得到编辑后的用户图片之后，所述方法还包括：

3.根据权利要求1所述的图片编辑的方法，其特征在于，所述获取异形遮罩图模板包括：

获取通过图形视频处理软件AE导出的异形遮罩图；

4.根据权利要求1所述的图片编辑的方法，其特征在于，所述通过Lottie将所述异形遮罩图加载到图片编辑模板中生成异形遮罩图模板包括：

5.根据权利要求1中所述的图片编辑的方法，其特征在于，所述根据异形遮罩图模板的形状将待编辑的用户图片和异形遮罩图模板绘制在同一视图上还包括：

6.一种图片编辑的装置，其特征在于，所述装置包括：

7.根据权利要求6所述的图片编辑的装置，其特征在于，所述装置还包括：

8.根据权利要求6所述的图片编辑的装置，其特征在于，所述获取单元还包括：

9.根据权利要求6所述的图片编辑的装置，其特征在于，所述生成模块还用于：

10.一种非暂态计算机可读存储介质，其特征在于，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行权利要求1至权利要求5中任一项所述的图片编辑的方法。