1.本发明涉及计算机领域,具体而言,涉及一种图像处理方法和装置、存储介质及电子设备。
背景技术:2.为了使得不同玩家各自控制的虚拟角色可以实现形象的多样化区分,很多游戏应用通常会预先配置很多种涂抹元素选项,以供玩家选择。比如,不同颜色或不同位置的腮红元素、不同颜色的口红元素、不同形状的纹身元素等。
3.然而,目前相关技术中已提供的涂抹元素往往都是固定的几种样式,随着玩家数量的增多,越来越多的玩家将会选到效果相同的涂抹元素。如,不同玩家会选到颜色相同且位置相同的腮红元素。也就是说,由于涂抹元素的样式较为单一,从而导致在对虚拟角色对应的形象图像进行涂抹处理时,出现处理自由度较低的问题。
4.针对上述的问题,目前尚未提出有效的解决方案。
技术实现要素:5.本发明实施例提供了一种图像处理方法和装置、存储介质及电子设备,以至少解决现有技术中存在的在对虚拟角色对应的形象图像进行涂抹处理的情况下自由度较低的技术问题。
6.根据本发明实施例的一个方面,提供了一种图像处理方法,包括:在显示界面中显示待处理的目标虚拟对象的目标身体部位对应的部位区域图像;响应于在部位区域图像上执行的滑动操作,获取与滑动操作的滑动轨迹信息相匹配的目标涂抹元素的绘制处理参数;在部位区域图像上,按照绘制处理参数绘制目标涂抹元素。
7.根据本发明实施例的另一方面,还提供了一种图像处理装置,包括:显示单元,用于在显示界面中显示待处理的目标虚拟对象的目标身体部位对应的部位区域图像;获取单元,用于响应于在部位区域图像上执行的滑动操作,获取与滑动操作的滑动轨迹信息相匹配的目标涂抹元素的绘制处理参数;绘制单元,用于在部位区域图像上,按照绘制处理参数绘制目标涂抹元素。
8.根据本发明实施例的又一方面,还提供了一种计算机可读的存储介质,该计算机可读的存储介质中存储有计算机程序,其中,该计算机程序被设置为运行时执行上述图像处理方法。
9.根据本技术实施例的又一个方面,提供一种计算机程序产品,该计算机程序产品包括计算机程序/指令,该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机程序/指令,处理器执行该计算机程序/指令,使得该计算机设备执行如以上图像处理方法。
10.根据本发明实施例的又一方面,还提供了一种电子设备,包括存储器和处理器,上述存储器中存储有计算机程序,上述处理器被设置为通过上述计算机程序执行上述的图像
处理方法。
11.在本发明实施例中,通过在显示界面中显示待处理的目标虚拟对象的目标身体部位对应的部位区域图像,接着响应于在部位区域图像上执行的滑动操作,获取与滑动操作的滑动轨迹信息相匹配的目标涂抹元素的绘制处理参数,然后在部位区域图像上,按照绘制处理参数绘制目标涂抹元素,进而实现了可以依照玩家意愿灵活绘制涂抹元素的技术效果,解决了现有技术中存在的在对图像进行涂抹的情况下自由度较低的技术问题。
附图说明
12.此处所说明的附图用来提供对本发明的进一步理解,构成本技术的一部分,本发明的示意性实施例及其说明用于解释本发明,并不构成对本发明的不当限定。在附图中:
13.图1是根据本发明实施例的一种可选的图像处理方法的硬件环境的示意图;
14.图2是根据本发明实施例的一种可选的图像处理方法的流程图;
15.图3是根据本发明实施例的一种可选的图像处理方法的示意图;
16.图4是根据本发明实施例的另一种可选的图像处理方法的示意图;
17.图5是根据本发明实施例的又一种可选的图像处理方法的示意图;
18.图6是根据本发明实施例的又一种可选的图像处理方法的示意图;
19.图7是根据本发明实施例的又一种可选的图像处理方法的示意图;
20.图8是根据本发明实施例的又一种可选的图像处理方法的示意图;
21.图9是根据本发明实施例的又一种可选的图像处理方法的示意图;
22.图10是根据本发明实施例的又一种可选的图像处理方法的示意图;
23.图11是根据本发明实施例的又一种可选的图像处理方法的示意图;
24.图12是根据本发明实施例的另一种可选的图像处理方法的流程图;
25.图13是根据本发明实施例的一种可选的图像处理装置的结构示意图;
26.图14是根据本发明实施例的一种可选的电子设备的结构示意图。
具体实施方式
27.为了使本技术领域的人员更好地理解本发明方案,下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分的实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都应当属于本发明保护的范围。
28.需要说明的是,本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外,术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排他的包含,例如,包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
29.根据本发明实施例的一个方面,提供了一种图像处理方法,可选地,作为一种可选
的实施方式,上述图像处理方法可以但不限于应用于如图1所示的硬件环境中的图像处理系统。其中,该图像处理系统可以包括但不限于终端设备102、网络104、服务器106及数据库108。终端设备102中运行有目标客户端(如图1所示的客户端界面,该目标客户端可以是一款用于为虚拟角色对象进行捏脸涂妆的客户端)。上述终端设备102包括人机交互屏幕,处理器及存储器。人机交互屏幕用于显示显示待处理的目标虚拟对象的目标身体部位对应的部位区域图像(如图1所示了一个虚拟角色的面部区域图像);还用于提供人机交互接口以接收用于用户使用直播软件进行网络直播的人机交互操作。处理器用于响应上述人机交互操作生成交互指令,并将该交互指令发送给服务器106。存储器用于存储相关涂妆素材数据,如客户端提供的捏脸素材、妆效素材以及各种美妆工具等。上述终端设备109同样包括人机交互屏幕,处理器及存储器,其中,人机交互屏幕用于显示用户客户端的涂妆界面。
30.具体过程如以下步骤:如步骤s102,在终端设备102内运行的客户端中的显示界面中显示待处理的目标虚拟对象的目标身体部位对应的部位区域图像;s104,响应于在部位区域图像上执行的滑动操作,获取与滑动操作的滑动轨迹信息相匹配的目标涂抹元素的绘制处理参数;s106,终端设备102通过网络104发送上述部位区域图像以及绘制处理参数至服务器106。服务器106将执行步骤s108-s110,基于部位区域图像以及绘制处理参数,从数据库中调取相应素材元素,并通过网络发送给终端设备102。最后如步骤s112,终端102在部位区域图像上,按照绘制处理参数绘制目标涂抹元素。
31.作为另一种可选的实施方式,在终端设备102具备较强大的计算处理能力时,上述步骤s108也可以由终端设备102来完成。这里为示例,本实施例中对此不作任何限定。
32.可选地,在本实施例中,上述终端设备可以是配置有目标客户端的终端设备,可以包括但不限于以下至少之一:手机(如android手机、ios手机等)、笔记本电脑、平板电脑、掌上电脑、mid(mobile internet devices,移动互联网设备)、pad、台式电脑、智能电视等。目标客户端可以是视频客户端、即时通信客户端、浏览器客户端、教育客户端等支持提供射击游戏任务的客户端。上述网络可以包括但不限于:有线网络,无线网络,其中,该有线网络包括:局域网、城域网和广域网,该无线网络包括:蓝牙、wifi及其他实现无线通信的网络。上述服务器可以是单一服务器,也可以是由多个服务器组成的服务器集群,或者是云服务器。上述仅是一种示例,本实施例中对此不作任何限定。
33.在本发明实施例中,通过在显示界面中显示待处理的目标虚拟对象的目标身体部位对应的部位区域图像,接着响应于在部位区域图像上执行的滑动操作,获取与滑动操作的滑动轨迹信息相匹配的目标涂抹元素的绘制处理参数,然后在部位区域图像上,按照绘制处理参数绘制目标涂抹元素,进而实现了可以依照玩家意愿灵活绘制涂抹元素的技术效果,解决了现有技术中存在的在对图像进行涂抹的情况下自由度较低的技术问题。
34.作为一种可选的实施方式,如图2所示,上述图像处理方法包括以下步骤:
35.s202,在显示界面中显示待处理的目标虚拟对象的目标身体部位对应的部位区域图像;
36.s204,响应于在部位区域图像上执行的滑动操作,获取与滑动操作的滑动轨迹信息相匹配的目标涂抹元素的绘制处理参数;
37.s206,在部位区域图像上,按照绘制处理参数绘制目标涂抹元素。
38.可以理解的是,上述显示界面可以是一种提供给用户进行模拟涂抹操作的客户端
的界面,其中的目标虚拟对象可以是虚拟人物形象,虚拟动物形象,虚拟动漫形象等,在此不做限定。上述目标身体部位可以理解为目标虚拟对象的身体部位如脸部、手部、腿部等身体部位,在此也不做限定。
39.需要进一步解释的是,上述显示目标身体部位对应的部位区域图像的方法可以是响应于用户的在客户端提供的选项的选择操作,将虚拟的目标身体部位的图像截取出来以放大显示,从而便于用户对部位区域图像进行涂抹操作,提高响应用户涂妆操作的图像显示效率。
40.再进一步解释,上述滑动操作可以是用户在移动终端如手机上进行的长按滑动操作,也可以是用户在使用电脑端上通过鼠标进行的移动操作,在此不做限定。上述滑动轨迹信息可以包括滑动轨迹的起始位置,滑动轨迹的方向,滑动力度等相关信息,用于作为匹配绘制处理参数的依据。同时,上述绘制处理参数用于确定目标涂抹元素的显示方式。
41.可选地,上述目标涂抹元素为被选择用于在部位区域图像中进行显示的元素,可以但不限于是涂鸦线条,涂鸦图案等可选的涂鸦元素,还可以是口红、眼影、腮红等美妆元素,在此均不作限定。可以理解的是,上述目标涂抹元素的类型可以是根据用户的预先选择而设定,也可以在用户没有进行任何选择的情况下根据应用场景进行默认设置。
42.以下结合图3对上述实施例进行示例性说明。如图3中的(a)图所示,响应于用户对界面左侧的控件列表中的脸部控件301的触控操作,在界面中间显示目标虚拟对象的部位区域图像302,即一张虚拟男性脸部图像。然后响应于对界面右侧的工具栏列表的选择操作,在用户选择了美妆控件303的情况下,提供美妆涂抹功能。接着响应于部位区域图像上执行的滑动操作,并根据与滑动轨迹信息相匹配的目标涂抹元素的绘制处理参数绘制目标涂抹元素,如图3中的(b)中所示,在界面中央显示部位区域图像304。可见,在用户的滑动操作之后,部位区域图像上显示了一条“美妆涂鸦”痕迹。
43.通过在显示界面中显示待处理的目标虚拟对象的目标身体部位对应的部位区域图像,接着响应于在部位区域图像上执行的滑动操作,获取与滑动操作的滑动轨迹信息相匹配的目标涂抹元素的绘制处理参数,然后在部位区域图像上,按照绘制处理参数绘制目标涂抹元素,进而实现了可以依照玩家意愿灵活绘制涂抹元素的技术效果,解决了现有技术中存在的在对图像进行涂抹的情况下自由度较低的技术问题。
44.作为一种可选的方案,上述响应于在部位区域图像上执行的滑动操作,获取与滑动操作的滑动轨迹信息相匹配的目标涂抹元素的绘制处理参数包括:
45.s1,获取基于滑动操作所生成的滑动轨迹的轨迹距离,其中,滑动轨迹信息包括轨迹距离;
46.s2,根据轨迹距离确定目标涂抹元素的涂抹透明度,其中,绘制处理参数包括涂抹透明度。
47.可以理解的是,上述滑动轨迹信息可以包括滑动轨迹的初始点和当前点的位置信息,进而可以包括通过两点的位置信息得到的当前轨迹距离信息。上述轨迹距离信息在客户端中可以以像素点(px,即pixel)为单位。
48.需要进一步解释的是,本方案提供一种根据涂抹轨迹的长度发生实时线性渐变显示的涂抹轨迹显示效果。具体可以以图4所示的涂抹显示效果为例,如图4所示,涂抹效果为一种“美妆涂鸦”效果,且“美妆涂鸦”的显示效果随着涂抹痕迹长度的变化也随之实时发生
变化。可以通过图4所示的示意图观察到,随着涂抹距离的延长,涂抹痕迹的透明度变浅。也就是说,本方案提供了一种根据轨迹距离确定绘制处理参数的方法,其中,绘制处理参数包括了目标涂抹透明度。
49.通过本技术提供的上述实施例,通过滑动轨迹距离确定目标涂抹元素的涂抹透明度,从而提供了一种根据滑动轨迹长度的实时渐变显示的方法,方便用户根据个人意愿实时绘制涂抹图案,提高了响应于用户的滑动操作绘制目标涂抹元素的灵活度。
50.作为一种可选的方案,上述根据轨迹距离确定目标涂抹元素的涂抹透明度包括:
51.s1,获取目标涂抹元素在单位显示长度内的透明度变化幅度;
52.s2,根据轨迹距离与透明度变化幅度之间的第一比值,确定用于绘制目标涂抹元素的目标透明度参考数组;
53.s3,将目标透明度参考数组中所记录的目标透明度渐变图像上各个像素点各自对应的透明度,确定为涂抹透明度。
54.可选地,上述获取上述目标涂抹元素在单位显示长度内的透明度变化幅度的方法可以是直接从服务器中获取预设的透明度变化幅度值;也可以是根据用户个人需求进行直接设置。
55.作为一种优选的方式,上述获取上述目标涂抹元素在单位显示长度内的透明度变化幅度的方法还可以包括:
56.s1,获取上述目标涂抹元素的总显示长度,以及为上述目标涂抹元素配置的透明度渐变图像序列中的图像数量;
57.s2,将上述总显示长度与上述图像数量之间的第二比值,确定为上述透明度变化幅度。
58.下面对上述目标涂抹元素的透明度渐变图像序列中的图像数量进行说明。为了让涂抹元素呈现出线性渐变的效果,需要提前准备一组代表透明度线性变化过程的图像,如图5所示,可以提前预设30张透明度渐变的图像序列(仅示出图像1、图像8、图像15、图像22及图像30,其他图像未示出),图片由上至下透明度依次增高,透明度越高显示的颜色越浅。通过30张透明度不同的图像对同一滑动轨迹的不同位置进行实时填充,使得其显示出线性渐变的显示效果。图像数量可以根据实际需求而定,图片越多,线性变化的过程就越细腻,涂抹元素的显示效果的变化过程就越平滑。
59.接下来以“涂鸦美妆”作为目标涂抹元素为例进行说明。在用户选择“涂鸦美妆”作为目标涂抹元素进行涂抹操作的情况下,获取预设的“涂鸦美妆”元素的总显示长度(如300px),以及获取预设的与“涂鸦美妆”元素相匹配的透明度渐变图像序列数量(如图5中的30张透明度渐变的图像)。根据本实施例的方法,透明度变化幅度即为预设的“涂鸦美妆”元素的总显示长度与预设透明度渐变图像序列数量的第二比值即300/30=10。也就是说,在本实施例中,“涂鸦美妆”作为目标涂抹元素的情况下,其对应的透明度变化幅度为10,指示若用上述30张图像融合绘制上述“涂鸦美妆”元素,每经过长度为10px的轨迹距离即更换一张图像用于融合绘制,从而显示平滑的渐变效果。
60.根据上述实施例,通过预先设置一组代表透明度线性变化过程的图片,从而可以在响应滑动操作的过程中,实时融合于滑动轨迹,将透明度线性变化的图片进行显示,而避免了在用户滑动过程中通过计算调整透明度造成的绘制卡顿,提高了目标涂抹元素绘制的
流畅性。
61.可选地,上述根据上述轨迹距离与上述透明度变化幅度之间的第一比值,确定用于绘制上述目标涂抹元素的目标透明度参考数组的方法,可以是在直接获取服务器中预设透明度变化幅度的情况下,直接获取轨迹距离与预设透明度变化幅度值的比值;也可以是在根据用户个人需求设置透明度变化幅度的情况下,获取轨迹距离与用户设置的透明度变化幅度值的比值。
62.在一个优选的实施例中,上述根据上述轨迹距离与上述透明度变化幅度之间的第一比值,确定用于绘制上述目标涂抹元素的目标透明度参考数组的方法,可以包括:
63.s1,对上述轨迹距离与上述透明度变化幅度之间的上述第一比值进行向上取整计算,以得到目标数组序号;
64.s2,根据上述目标数组序号确定上述目标透明度参考数组。
65.以图6所示的示意图对上述实施例进行说明。如图6所示,继续以“美妆涂鸦”为目标涂抹元素,总显示长度为300px,以及预设的与“涂鸦美妆”元素相匹配的透明度渐变图像序列数量为30为例进行举例说明。在用户进行滑动操作的过程中,在第一时刻中,滑动轨迹距离为72px,那么在这种情况下,上述第一比值为72/10=7.2,向上取整得到目标数组序号为8,指示控制透明度渐变图像序列中的第8张图像即图5中的图像8参与融合绘制;在第二时刻中,滑动轨迹距离变为220px,,上述第一比值为220/10=22,指示控制透明度渐变图像序列中的第22张图像即图5中的图像22进行融合绘制。容易理解的是,上述第一时刻和上述第二时刻并非连续的两个时刻,而是为了方便举例说明,从一段持续的时间中为了选出来的两个独立的时刻。在绘制结束的情况下,滑动轨迹距离为280px,指示轨迹的末端控制第28张渐变图像及图像28进行融合绘制。根据上述方法实时确定出参与目标涂抹元素绘制的渐变图像以及确定出整个轨迹中参与绘制的渐变图像序列,然后根据上述目标数组序号确定一一对应的目标透明度参考数组。
66.根据上述实施例,通过对上述轨迹距离与上述透明度变化幅度之间的上述第一比值进行向上取整计算,以得到目标数组序号,并根据上述目标数组序号确定出用于融合绘制的透明度渐变图像,进而得到与确定出的透明度渐变图像对应的目标透明度参考数组,以实现在轨迹距离的实时变化过程中实时替换透明度渐变图像序列中的图像,从而实现根据用户操作实时绘制渐变涂抹显示元素的技术效果。
67.在一个优选的实施例中,在上述在显示界面中显示待处理的目标虚拟对象的目标身体部位对应的部位区域图像之前,还包括:
68.s1,获取为上述目标涂抹元素配置的透明度渐变图像序列;
69.s2,将上述透明度渐变图像序列中每张透明度渐变图像上各个像素点各自对应的透明度,依次存储至一个透明度参考数组中。
70.需要说明的是,图5中所示的透明度渐变图像序列中的图像显示效果仅为一种示例,在实际操作中可以根据实际需要进行具体绘制,比如在序列中的图像中可以进行均匀透明度设置,即一个图像中的每个像素点的透明度可以设置为统一的参数值。在另一个可选的实施例中,透明度渐变图像序列中的图像可以绘制成不均匀的透明度,即一个图像中的像素点的透明度的参数值可以随着其位置的变化而变化。
71.具体而言,如图5所示,可以设置像素点的透明度的取值范围为0至1。在某像素点
的透明度为0的情况下,指示该像素点是完全透明的(看不见)。在某像素点透明度为1的情况下,指示该像素点是完全不透明的(看得最清楚)。在某像素点的透明度值位于0至1之间的其它数值,则指示该像素点为半透明状态,呈现为半透明效果。进而,针对图像中的每一个像素点,根据其坐标位置可以获得一个透明度的取值,进而可以将该图像中所有像素点的位置及对应的透明度取值存储为一个透明度参考数组,在需要调用该图像的情况下,直接调用该数组进行二次绘制或渲染。
72.通过上述实施例,将上述透明度渐变图像序列中每张透明度渐变图像上各个像素点各自对应的透明度值存储至一个透明度参考数组中,从而实现在需要调用该图像进行绘制的情况下,可以通过调用其对应的透明度参考数组来实现图像的二次绘制,进而加速了后续图像处理过程,而避免了实时的透明度计算,因而避免了频繁计算而带来的性能问题,提高了实时绘制的图像处理的效率。
73.作为一种可选的方案,上述响应于在上述部位区域图像上执行的滑动操作,获取与上述滑动操作的滑动轨迹信息相匹配的目标涂抹元素的绘制处理参数还包括,确定基于上述滑动操作所生成的滑动轨迹的轨迹起点坐标,其中,上述滑动轨迹信息包括上述轨迹起点坐标;根据上述轨迹起点坐标确定上述目标涂抹元素的涂抹方向,其中,上述绘制处理参数包括上述涂抹方向。
74.通过上述实施例,获取绘制处理参数还可以包括轨迹起点的坐标以及根据轨迹起点的坐标确定涂抹元素的涂抹方向。也就是说,在获取轨迹起点坐标、轨迹终点坐标以及轨迹距离的情况下,通过以上三者即可算出轨迹的方向,进而确定出涂抹元素的方向,从而实现了提高图像处理的效率的技术效果。
75.作为一种可选的方案,上述在上述部位区域图像上,按照上述绘制处理参数绘制上述目标涂抹元素包括:
76.s1,获取上述目标涂抹元素的颜色渲染数据,其中,上述颜色渲染数据中包括与上述目标涂抹元素对应的渲染效果图上各个像素点的颜色值;
77.s2,对上述颜色渲染数据与上述涂抹透明度进行融合,得到绘制控制数据;
78.s3,沿着上述涂抹方向,按照上述绘制控制数据绘制上述目标涂抹元素。
79.可以理解的是,上述颜色渲染数据可以从目标涂抹颜色对应的渲染效果图中得到。如图7所示的一种可选的“美妆涂鸦”的渲染效果图为例,图片中不同位置的颜色并不同(未示出)。从数据角度而言,可以通过渲染效果图中的每一个像素点的颜色值即rgb值(red、green、blue)的变化体现,各个像素点的rgb值均为0至255之间的整数。因此,根据目标涂抹颜色对应的渲染图,可以得到图中每个像素点的rgb值,即获取了目标涂抹颜色的颜色渲染数据。
80.可选地,上述对上述颜色渲染数据与上述涂抹透明度进行融合,得到绘制控制数据的方法可以包括:
81.s1,在上述渲染效果图的显示尺寸和为上述目标涂抹元素配置的透明度渐变图像序列中各个透明度渐变图像的显示尺寸一致的情况下,遍历各个像素点,将每个像素点依次作为当前像素点,并执行以下操作:
82.s2,将上述当前像素点的颜色值与上述当前像素点的透明度进行拼接,得到上述当前像素点的像素绘制控制数据。
83.可以理解的是,本实施例提供了一种实时将颜色渲染数据与涂抹透明度数据进行融合,以得到实时绘制的目标涂抹元素的方法。又因为实时绘制过程中,某一像素点的颜色渲染数据来自于渲染效果图中对应像素点的rgb值,因此,在渲染效果图的显示尺寸和为上述目标涂抹元素配置的透明度渐变图像序列中各个透明度渐变图像的显示尺寸一致的情况下,可以在对应的透明度渐变图像中找到对应位置的像素点的透明度值,进而实现融合绘制。进而,在渲染效果图的显示尺寸和为上述目标涂抹元素配置的透明度渐变图像序列中各个透明度渐变图像的显示尺寸一致的情况下,渲染效果图中的每一个像素点均能在对应的透明度渐变图像中找到对应的像素点,进而可以方便快捷地实现对上述颜色渲染数据与上述涂抹透明度的融合处理。
84.同时,在另一个可选的实施例中,在上述渲染效果图的显示尺寸和为上述目标涂抹元素配置的透明度渐变图像序列中各个透明度渐变图像的显示尺寸不一致的情况下,可以先对渲染效果图进行预处理,比如缩放处理,从使得渲染效果图与透明度渐变图像尺寸一致,然后再进行后续的图像处理操作。
85.接下来,继续以“美妆涂鸦”元素为例,对上述颜色渲染数据与上述涂抹透明度进行融合的方法进行具体解释。在绘制目标涂抹元素的绘制过程中,实时地将上述对应像素点的rgb值与上述涂抹透明度进行融合,具体方法如下:
86.如图6所示的“美妆涂鸦”元素的渲染效果图,长度为300px,宽度为100px,其中的箭头所指的像素点坐标为(100px,30px),rgb值为(255,0,0)。同时,预先配置了30张“美妆涂鸦”元素的透明度渐变图像序列,其中每一张图像的尺寸均与渲染效果图的尺寸一致,长度为300px,宽度为100px(未示出)。在实时绘制“美妆涂鸦”元素的过程中,在轨迹长度为150px的情况下,其目标数组序号为150/10=22,指示此时调用图5中的图像15参与融合绘制。假设图像15中坐标为(100px,30px)的像素点的透明度为0.5,结合上述渲染效果图中的对应坐标的像素点的rgb值(255,0,0),即可组合得到新的rgba颜色值,可以理解的是,rgba颜色值即为一种可选的像素绘制控制数据。
87.接下来,对上述rgba值进行说明。在计算机中以“#rrggbbaa”格式对像素点的rgba值进行存储,其中的每一位都是十六进制的数值,#号后的每两位代表一个通道,依次为红色、绿色、蓝色、透明度,每个通道的取值范围都是0-255,如“#ff00007f”代表透明度为50%的红色。具体而言,“#”号后的ff表示红色通道数值为255,而绿色和蓝色通道均为0,因此这三原色混合起来后就是纯红色,也就是说,该像素点为纯红色。透明通道中255代表100%,而“#ff00007f”最后两位7f换算成十进制为127,四舍五入后即255的一半,指示该像素点为50%的透明度。
88.根据以上方法,即可得到实时绘制过程中,坐标为(100px,30px)的像素点的rgba值。同时,由于上述渲染效果图与透明度渐变图像的尺寸一致,因此对应于实时绘制中的每一个像素点,均能在上述渲染效果图与透明度渐变图像中获取对应的涂抹透明度值以及rgb值。进而跟进上述方法,得到实时绘制过程中的每一个像素点的rgba颜色值。
89.最后,可以利用canvas技术将上述得到的全部实时渲染像素点的rgba颜色数值集合渲染成图片。比如可以通过canvas提供的api如putimagedata将上述全部实时渲染像素点的rgba颜色值集合绘制成一张图片。
90.通过上述实施例,即通过获取上述目标涂抹元素的颜色渲染数据,然后对上述颜
色渲染数据与上述涂抹透明度进行融合,得到绘制控制数据;最后沿着上述涂抹方向,按照上述绘制控制数据绘制上述目标涂抹元素,由于是基于目标涂抹元素的颜色渲染数据确定的实际涂抹颜色,所以实现绘制出与效果图颜色一致的目标涂抹元素的效果,同时实际涂抹元素的透明度会随轨迹长度的变化而变化,从而实现了根据玩家意愿灵活绘制涂抹元素的技术效果。
91.作为一种可选的方案,上述在上述部位区域图像上,按照上述绘制处理参数绘制上述目标涂抹元素,还包括:
92.s1,获取与上述目标身体部位对应的轮廓图像;
93.s2,在绘制上述目标涂抹元素之后的上述部位区域图像上,叠加上述轮廓图像。
94.以下结合图8、9、10对上述方案进行具体说明。通过上述方法解决了绘制涂抹元素的自由度的技术问题以后,如图8所示,可能还会出现涂抹过度的技术问题,即用户无法准确把握可以进行涂抹的范围的边界,使得涂抹元素的显示效果失真,进而带来不够完善的用户体验。
95.为了解决上述图8所示的技术问题,可以在用户对目标身体部位进行涂抹之前,获取与目标身体部位对应的轮廓图像。如图9所示,即为一种虚拟男性脸部图像的轮廓。在获取图9所示的面部轮廓图像以后,在用户已经完成如图8所显示的涂抹操作的情况下,将图9所示的面部轮廓图像叠加在如图8所示的显示图像上。可以理解的是,图9所示的面部轮廓图像为置于顶部的图层,因此可以覆盖图8中超出实际可涂抹范围的涂抹元素,最终显示效果如图10所示。可以理解的是,如11所示,上述轮廓图像1101,目标涂抹元素1102以及部位区域图像1103的图层关系可以是如图11所示的重叠关系。
96.通过上述实施例,通过获取与上述目标身体部位对应的轮廓图像,然后在绘制上述目标涂抹元素之后的上述部位区域图像上,叠加上述轮廓图像,从而确保了涂抹效果的真实性,实现了增加图像处理效果的可靠性的技术效果。
97.以下具体结合图12所示流程来说明本技术提供的图像处理方法的完整过程:
98.在任意以用户打开用于涂抹美妆操作的客户端,选择了虚拟对象的目标身体部位以及目标涂抹元素之后:
99.如步骤s1202,从目标渲染效果图中读取每个像素点的rgb值;
100.假设用户选择的目标涂抹元素为“美妆涂鸦”元素,如图6所示为“美妆涂鸦”元素的目标渲染效果图,根据“美妆涂鸦”元素的渲染效果图获取其图中的每一个像素点的rgb值,即得到颜色渲染数据。
101.然后如步骤s1204,保存rgb数据。
102.可以理解的是,针对目标渲染效果图中的每一个像素点都存在对应的rgb值,因此可以将目标渲染效果图的每一个像素点的位置信息以及对应的rgb值的数值集合以一个数组的形式存储起来。如图6所示的“美妆涂鸦”元素的渲染效果图,长度为300px,宽度为100px,其中的箭头所指的像素点坐标为(100px,30px),rgb值为(255,0,0)。同理可以以上述形式将目标渲染效果图中的每一个像素点的数据存储起来。
103.如步骤s1206,从透明度渐变图像序列中获取每个像素点的透明度值;
104.然后如步骤s1208,保存透明度值数据集合至透明度参考数组中;
105.可以理解的是,上述透明度参考数组由于“美妆涂鸦”元素对应的透明度渐变图像
序列确定。以上述“美妆涂鸦”元素的透明度渐变图像序列为例,如图5所示,存在30张透明渐变的图像序列(部分图像未示出),根据图像序列中的每一张图像中的像素点与透明度的对应关系,即可得到透明度参考数组。假设图5中的图像15中坐标为像素点(100px,30px)的透明度为0.5,那么图像15中的全部像素点的坐标与其一一对应的透明度值的数据集合,即为上述图像15的透明度参考数组。同理可以确定出上述对应于透明渐变的图像序列的30个透明度参考数组。
106.如步骤s1210,检测滑动事件;
107.需要说明的是,如图12中所示的流程步骤所示,步骤s1202、步骤s1206以及步骤s1210之间没有执行上的先后顺序。
108.然后如步骤s1212,根据滑动信息确定透明度渐变图像序号;
109.然后如步骤s1214,从透明度参考数组中获取对应的透明度值;
110.在获取到滑动轨迹信息的情况下,可以进一步获取得到涂抹透明度。具体而言,继续以上述“美妆涂鸦”为例进行说明。在滑动轨迹实时生成的过程中,比如,在第一时刻中,滑动轨迹距离为72px,则指示控制透明度渐变图像序列中的第8张图像即图5中的图像8进行融合绘制;在第二时刻中,滑动轨迹距离为220px,那么指示在该时刻控制透明度渐变图像序列中的第22张图像即图5中的图像22进行融合绘制。结合实时确定的参与融合绘制的透明度渐变图像序号,则可以确定出对应于不同渐变序号的图像的目标透明度参考数组,进而根据具体的像素点位置从目标透明度参考数组中确定出涂抹透明度信息。
111.然后如步骤s1216,融合得到rgba数据;
112.继续以上述“美妆涂鸦”元素为例进行说明。如图6所示的“美妆涂鸦”元素的渲染效果图,长度为300px,宽度为100px,其中的箭头所指的像素点坐标为(100px,30px),rgb值为(255,0,0)。同时,预先配置了30张“美妆涂鸦”元素的透明度渐变图像序列,其中每一张图像的尺寸均与渲染效果图的尺寸一致,长度为300px,宽度为100px(未示出)。在实时绘制“美妆涂鸦”元素的过程中,在轨迹长度为150px的情况下,其目标数组序号为150/10=22,指示此时调用图5中的图像15参与融合绘制。假设图像15中坐标为(100px,30px)的像素点的透明度为0.5,结合上述渲染效果图中的对应坐标的像素点的rgb值(255,0,0),即可组合得到新的rgba颜色值,即实现了融合操作。
113.然后执行步骤s1218,利用canva实时渲染出目标涂抹元素;
114.可以理解的是,根据以上方法,即可得到实时绘制过程中,坐标为(100px,30px)的像素点的rgba值。同时,由于上述渲染效果图与透明度渐变图像的尺寸一致,因此对应于实时绘制中的每一个像素点,均能在上述渲染效果图与透明度渐变图像中获取对应的涂抹透明度值以及rgb值。进而跟进上述方法,得到实时绘制过程中的每一个像素点的rgba颜色值。最后,可以利用canvas技术将上述得到的全部实时渲染像素点的rgba颜色数值集合渲染成图片。比如可以通过canvas提供的api如putimagedata将上述全部实时渲染像素点的rgba颜色值集合绘制成一张图片,即绘制得到目标涂抹元素。
115.最后执行步骤s1220,步骤s1222以及步骤s1224,即将目标部位图像放置在最底层,将目标涂抹元素插入实时渲染层以及将人脸轮廓图像放置在最顶层,以完成实时融合绘制。
116.上述图12所示流程为示例,本实施例中对此不做任何限定。
117.在本发明实施例中,通过在显示界面中显示待处理的目标虚拟对象的目标身体部位对应的部位区域图像,接着响应于在部位区域图像上执行的滑动操作,获取与滑动操作的滑动轨迹信息相匹配的目标涂抹元素的绘制处理参数,然后在部位区域图像上,按照绘制处理参数绘制目标涂抹元素,进而实现了可以依照玩家意愿灵活绘制涂抹元素的技术效果,解决了现有技术中存在的在对图像进行涂抹的情况下自由度较低的技术问题。
118.需要说明的是,对于前述的各方法实施例,为了简单描述,故将其都表述为一系列的动作组合,但是本领域技术人员应该知悉,本发明并不受所描述的动作顺序的限制,因为依据本发明,某些步骤可以采用其他顺序或者同时进行。其次,本领域技术人员也应该知悉,说明书中所描述的实施例均属于优选实施例,所涉及的动作和模块并不一定是本发明所必须的。
119.根据本发明实施例的另一个方面,还提供了一种用于实施上述图像处理方法的图像处理装置。如图13所示,该装置包括:
120.显示单元1302,用于在显示界面中显示待处理的目标虚拟对象的目标身体部位对应的部位区域图像;
121.获取单元1304,用于响应于在上述部位区域图像上执行的滑动操作,获取与上述滑动操作的滑动轨迹信息相匹配的目标涂抹元素的绘制处理参数;
122.绘制单元1306,用于在上述部位区域图像上,按照上述绘制处理参数绘制上述目标涂抹元素。
123.可选地,在本实施例中,上述各个单元模块所要实现的实施例,可以参考上述各个方法实施例,这里不再赘述。
124.根据本发明实施例的又一个方面,还提供了一种用于实施上述图像处理方法的电子设备,该电子设备可以是图14所示的终端设备或服务器。本实施例以该电子设备为终端设备为例来说明。如图14所示,该电子设备包括存储器1402和处理器1404,该存储器1402中存储有计算机程序,该处理器1404被设置为通过计算机程序执行上述任一项方法实施例中的步骤。
125.可选地,在本实施例中,上述电子设备可以位于计算机网络的多个网络设备中的至少一个网络设备。
126.可选地,在本实施例中,上述处理器可以被设置为通过计算机程序执行以下步骤:
127.s1,在显示界面中显示待处理的目标虚拟对象的目标身体部位对应的部位区域图像;
128.s2,响应于在上述部位区域图像上执行的滑动操作,获取与上述滑动操作的滑动轨迹信息相匹配的目标涂抹元素的绘制处理参数;
129.s3,在上述部位区域图像上,按照上述绘制处理参数绘制上述目标涂抹元素。
130.可选地,本领域普通技术人员可以理解,图14所示的结构仅为示意,电子装置电子设备也可以是智能手机(如android手机、ios手机等)、平板电脑、掌上电脑以及移动互联网设备(mobile internet devices,mid)、pad等终端设备。图14其并不对上述电子装置电子设备的结构造成限定。例如,电子装置电子设备还可包括比图14中所示更多或者更少的组件(如网络接口等),或者具有与图14所示不同的配置。
131.其中,存储器1402可用于存储软件程序以及模块,如本发明实施例中的图像处理
方法和装置对应的程序指令/模块,处理器1404通过运行存储在存储器1402内的软件程序以及模块,从而执行各种功能应用以及数据处理,即实现上述的图像处理方法。存储器1402可包括高速随机存储器,还可以包括非易失性存储器,如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中,存储器1402可进一步包括相对于处理器1404远程设置的存储器,这些远程存储器可以通过网络连接至终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。其中,存储器1402具体可以但不限于用于存储场景画面中的各个元素、图像处理信息等信息。作为一种示例,如图14所示,上述存储器1402中可以但不限于包括上述图像处理装置中的显示单元1302、获取单元1304、绘制单元1306。此外,还可以包括但不限于上述图像处理装置中的其他模块单元,本示例中不再赘述。
132.可选地,上述的传输装置1406用于经由一个网络接收或者发送数据。上述的网络具体实例可包括有线网络及无线网络。在一个实例中,传输装置12706包括一个网络适配器(network interface controller,nic),其可通过网线与其他网络设备与路由器相连从而可与互联网或局域网进行通讯。在一个实例中,传输装置1406为射频(radio frequency,rf)模块,其用于通过无线方式与互联网进行通讯。
133.此外,上述电子设备还包括:显示器1408,用于显示图像涂抹界面;和连接总线1410,用于连接上述电子设备中的各个模块部件。
134.在其他实施例中,上述终端设备或者服务器可以是一个分布式系统中的一个节点,其中,该分布式系统可以为区块链系统,该区块链系统可以是由该多个节点通过网络通信的形式连接形成的分布式系统。其中,节点之间可以组成点对点(p2p,peer to peer)网络,任意形式的计算设备,比如服务器、终端等电子设备都可以通过加入该点对点网络而成为该区块链系统中的一个节点。
135.根据本技术的一个方面,提供了一种计算机程序产品,该计算机程序产品包括计算机程序/指令,该计算机程序/指令包含用于执行流程图所示的方法的程序代码。在这样的实施例中,该计算机程序可以通过通信部分从网络上被下载和安装,和/或从可拆卸介质被安装。在该计算机程序被中央处理器执行时,执行本技术实施例提供的各种功能。
136.上述本发明实施例序号仅仅为了描述,不代表实施例的优劣。
137.根据本技术的一个方面,提供了一种计算机可读存储介质,计算机设备的处理器从计算机可读存储介质读取该计算机指令,处理器执行该计算机指令,使得该计算机设备执行上述图像处理方方法。
138.可选地,在本实施例中,上述计算机可读存储介质可以被设置为存储用于执行以下步骤的计算机程序:
139.s1,在显示界面中显示待处理的目标虚拟对象的目标身体部位对应的部位区域图像;
140.s2,响应于在上述部位区域图像上执行的滑动操作,获取与上述滑动操作的滑动轨迹信息相匹配的目标涂抹元素的绘制处理参数;
141.s3,在上述部位区域图像上,按照上述绘制处理参数绘制上述目标涂抹元素。
142.可选地,在本实施例中,本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令终端设备相关的硬件来完成,该程序可以存储于
一计算机可读存储介质中,存储介质可以包括:闪存盘、只读存储器(read-only memory,rom)、随机存取器(random access memory,ram)、磁盘或光盘等。
143.上述实施例中的集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在上述计算机可读取的存储介质中。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来,该计算机软件产品存储在存储介质中,包括若干指令用以使得一台或多台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例上述方法的全部或部分步骤。
144.在本发明的上述实施例中,对各个实施例的描述都各有侧重,某个实施例中没有详述的部分,可以参见其他实施例的相关描述。
145.在本技术所提供的几个实施例中,应该理解到,所揭露的客户端,可通过其它的方式实现。其中,以上所描述的装置实施例仅仅是示意性的,例如上述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,单元或模块的间接耦合或通信连接,可以是电性或其它的形式。
146.上述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
147.另外,在本发明各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能单元的形式实现。
148.以上上述仅是本发明的优选实施方式,应当指出,对于本技术领域的普通技术人员来说,在不脱离本发明原理的前提下,还可以做出若干改进和润饰,这些改进和润饰也应视为本发明的保护范围。