添加静态元素的方法、装置及电子设备

文档序号:116745 发布日期:2021-10-19 浏览:36次 >En<

阅读说明:本技术 添加静态元素的方法、装置及电子设备 (Method and device for adding static elements and electronic equipment ) 是由 岳时雨 于 2020-04-10 设计创作,主要内容包括:本说明书实施例提供添加静态元素的方法、装置及电子设备,其中一个方法包括:获取动态图片;获取动态图片中的图像帧,其中,所述图像帧包括期望的目标图像帧;在所述目标图像帧上绘制静态元素;以及使用所述图像帧重新合成目标动态图片。(The embodiment of the specification provides a method and a device for adding a static element and electronic equipment, wherein the method comprises the following steps: acquiring a dynamic picture; acquiring an image frame in a dynamic picture, wherein the image frame comprises a desired target image frame; drawing a static element on the target image frame; and re-synthesizing a target moving picture using the image frames.)

添加静态元素的方法、装置及电子设备

技术领域

本说明书涉及动态图片技术领域,更具体地,涉及一种添加静态元素的方法、装置及电子设备。

背景技术

动态图片包括一组静态图像,所述静态图像以指定的频率进行切换而产生某种动态效果。

常见的动态图片包括GIF图片。GIF图片可以保存多幅图像,从而构成动画。GIF图片格式具有具有GIF87a和GIF89a两个版本,并且,今后还可能发展出其他版本。

在动态图片中的每个单幅图像可以被称为图像帧。

需要提供灵活的方案,以便能够增加用户与动态图片之间的互动。

发明内容

本说明书的实施例提供在动态图片中添加静态元素的新技术方案。

根据本说明书的第一方面,提供了一种添加静态元素的方法,包括:获取动态图片;获取动态图片中的图像帧,其中,所述图像帧包括期望的目标图像帧;在所述目标图像帧上绘制静态元素;以及使用所述图像帧重新合成目标动态图片。

根据本说明书的第二方面,提供了一种添加静态元素的装置,包括:第一获取模块,获取动态图片;第二获取模块,获取动态图片中的图像帧,其中,所述图像帧包括期望的目标图像帧;绘制模块,在所述目标图像帧上绘制静态元素;以及合成模块,使用所述图像帧重新合成目标动态图片。

根据本说明书的第三方面,提供了一种电子设备,包括处理器和存储器,存储器存储可执行指令,当运行电子设备时,可执行指令控制处理器执行根据实施例的方法。

在不同实施例中,用户可以在动态图片中增加自己定制的内容,从而增强用户与动态图片的互动功能。

通过以下参照附图对本说明书的示例性实施例的详细描述,本说明书的实施例的其它特征及其优点将会变得清楚。

附图说明

被结合在说明书中并构成说明书的一部分的附图示出了的实施例,并且连同其说明一起用于解释各个实施例的原理。

图1示出了根据一个实施例的添加静态元素的方法的示意性流程图。

图2示出了根据一个实施例的添加静态元素的装置的示意性框图。

图3示出了根据一个实施例的电子设备的示意性框图。

图4-8示出了添加静态元素的一个示例性例子。

图9-12示出了添加静态元素的另一个示例性例子。

具体实施方式

以下对至少一个示例性实施例的描述实际上仅仅是说明性的,决不作为对本发明及其应用或使用的任何限制。

下面,参照附图描述本说明书的不同实施例和例子。

图1示出了根据一个实施例的添加静态元素的方法的示意性流程图。

如图1所示,在步骤S12,获取动态图片。

动态图片可以是GIF图片,也可以是其他动态图片。

可以通过浏览器的Input File组件获取动态图片。可选地,也可以由浏览器通过网络地址获取动态图片。

在步骤S14,获取动态图片中的图像帧。所述图像帧包括期望的目标图像帧。目标图像帧是用户期望添加静态元素的图像帧。本领域技术人员应理解,在获取目标图像帧的同时,也可以获取其他图像帧。目标图像帧可以是全部图像帧,也可以是全部图像帧中的一部分。

在这里,可以将动态图片转换成Blob格式的二进制文件,接着,通过所述二进制文件获取每一个图像帧的数据。通过这种方式,可以将动态图片转换成转换成统一的格式,从而有利于后续处理的规范化。在网络应用中,用户可能获取各种格式的图片,在这里,通过将图片格式转换成统一的格式,可以增加处理装置对于图片的适配能力,减少后续处理模块的重复设计。

在步骤S16,在所述目标图像帧上绘制静态元素。

例如,可以将目标图像帧的数据绘制在浏览器的画布上,并在所述画布上绘制静态元素,从而实现在所述目标图像帧上绘制静态元素的效果。静态元素例如是文本、图片、三位形状、二维形状和线条中的至少一个。

可以将默认位置的图像帧作为目标图像帧。例如,将第一个图像帧或最后一个图像帧作为目标图像帧。在默认位置的图像帧上绘制所述静态元素。这种方式可以简化用户的操作,使得在获取添加静态元素的乐趣的同时免除了过多的选择操作。

此外,目标图像帧可以是动态图片中的全部图像帧。在这种情况下,可以将静态元素按照从一侧到另一侧的方式按顺序绘制在全部图像帧上。通过这种方式,所述静态元素可以在动态图片中产生动画效果。这一方面可以增加动态图片的趣味性,从而吸引用户。另一方面,这也可以增加用户的使用体验。

在一个例子中,也可以由用户选择目标图像帧。例如,可以呈现所述图像帧;以及接收用户对于至少一个图像帧的选择。用户所选择的至少一个图像帧被用作目标图像帧。通过这种方式,可以为用户提供更多的定制自由度。

可以在目标图像帧中添加系统默认的静态元素。将用户自定义的内容做静态元素。在这种情况下,可以接收用户输入/选择的内容,其中,所述内容被用作所述静态元素。例如,用户可以输入关于动态图片的评论、注释等,用户也可以选择自己喜欢的图标、表情,并将所选的内容添加到动态图片中,从而增加动态图片的个性化特点,提升用户使用动态图片的参与度和乐趣。

在步骤S18,使用所述图像帧重新合成目标动态图片。例如,可以使用第三方库gif.js来实现所述合成操作。

在这里,用户可以在已经合成的动态图片增加静态元素,从而提升用户与静态图片的互动,增加用户使用动态图片的乐趣。此外,这还可以增加动态图片及相关网站、浏览器对用户的吸引力。

在这里,上述方法中的处理在系统前端执行。这样,由终端设备中的浏览器执行所述方法。通过这种方式,可以节省服务器资源、网络传输资源。此外,还可以节省用户等待服务器处理的处理时间。使得动态图片的处理更加便利。本领域技术人员应当理解,这里的浏览器可以包括单独的浏览器,例如,谷歌的Chrome浏览器、苹果的Safari浏览器、微软的IE浏览器等,也可以包括嵌入在应用程序中的浏览器,例如,嵌入在微博或其他应用程序中的浏览器。在这里,浏览器可以指的是能够通过网络展现网络地址所对应的信息内容的应用程序。

图2示出了根据一个实施例的添加静态元素的装置的示意性框图。如图2所示,添加静态元素的装置包括:第一获取模块22、第二获取模块24、绘制模块26和合成模块28。

第一获取模块22获取动态图片。

第二获取模块24获取动态图片中的图像帧,其中,所述图像帧包括期望的目标图像帧。

绘制模块26在所述目标图像帧上绘制静态元素。

合成模块28使用所述图像帧重新合成目标动态图片。

图2的添加静态元素的装置20可以实现图1的实施例中的方案,在这里省略重复的部分。

本说明书还提供一种电子设备。图3示出了电子设备300。

电子设备300可以包含浏览器。用户可以使用所述浏览器查看信息,并添加评论等。

如图3所示,电子设备300包括处理器302、存储器304。电子设备300还可以包括显示屏310、用户接口312、摄像头314、音频/视频接口316、传感器318和通信部件320等。此外,电子设备300还可以还包括电源管理芯片306以及电池308等。电子设备300可以智能手机、平板电脑、笔记本电脑、台式机等。

处理器302可以是各种处理器。例如,它可以是ARM架构的处理器。

存储器304可以存储电子设备300运行所需的底层软件、系统软件、应用软件、数据等。存储器304可以包括多种形式的存储器,例如,ROM、RAM、Flash等。

显示屏310可以是液晶显示屏、OLED显示屏等。在一个例子中,显示屏310可以是触摸屏。用户可以通过显示屏210进行输入操作。此外,用户还可以通过触摸屏进行指纹识别等。

用户接口312可以包括USB接口、闪电接口、键盘等。

摄像头314可以是单摄像头,也可以是多摄像头。此外,摄像头314可以用于用户的面容识别。

音频/视频接口316例如可以包括扬声器接口、麦克风接口、诸如HDMI的视频传输接口等。

传感器318例如可以包括陀螺仪、加速度计、温度传感器、湿度传感器、压力传感器等等。例如,通过传感器可以确定电子设备周围的环境等。

通信部件320例如可以包括WiFi通信部件、蓝牙通信部件、3G、4G和5G通信部件等。通过通信部件320,电子设备300可以被布置在网络中。

电源管理芯片306可以用于管理输入电子设备300电源功率,还可以对电池308进行管理,以保证较大的利用效率。电池308例如是锂离子电池等。

图3所示的电子设备仅是解释性的,并且决不是为了要限制本发明、其应用或用途。

电子设备300的存储器304可以存储可执行指令。当可执行指令被处理器302执行时实现上面所述的添加静态元素的方法。

图4-8示出了添加静态元素的一个示例性例子。

如图4所示,诸如智能手机的电子设备40包括浏览器42。例如,在网页42中显示网页Http://www.XXXX.com。在网页中显示文章“AAAAA”。用户可以在文章的下面进行评论。图4展示了用户1的评论44。在评论44中可以包括动态图片46,例如,GIF图片。

当前的用户2可以添加自己的评论。例如,用户2点击评论图标,从而展现图5所示的界面。在图5中,用户2可以添加自己的动态图片。例如,用户可以通过按钮52选择本地动态图片,用户也可以通过输入框56输入动态图片的网络地址。浏览器42可以从该网络地址获取动态图片。

例如,用户选择本地存储的动态图片。如图6所示,浏览器42向用户2展现动态图片的各个图像帧62。用户2可以通过点击选择自己期望添加静态元素的图像帧。如前面所述,也可以采用默认的方式,选择所有图像帧或指定位置的图像帧,作为目标图像帧。在这种情况下,可以省略图6所示的操作。

例如,用户选择了一个目标图像帧。接着,进入图7所示的界面。在图7中,用户可以为目标图像帧62添加静态元素。静态元素可以包括文本、图片、绘制的形状等。如图7所示,用户2可以通过文本框72输入期望的文本,通过按钮74选择要添加的图片,通过按钮76开始绘制个性化的形状。

当用户2完成静态元素的输入之后,浏览器42重新合成动态图片84并在页面上显示重新合成的动态图片,如图8所示。例如,在重新合成的动态图片84中包括用户添加的评论86以及用户添加的图标88。

通过这种方式,增加了用户与动态图片交互手段,提高用户参与程度。这样,用户可以自己对动态图片进行定制,增加了使用乐趣,从而也增加了应用程序对用户的吸引力。

图9-11示出了添加静态元素的另一个示例性例子。

如图9所示,用户4使用手机90中的浏览器,可以访问网址Http://www.YYYY.com。用户4可以在所显示的网页中看到动图图片91:“有趣的动图”。用户4在“有趣的动图”91中可以看到用户3的评论92“棒极了^_^”。

用户4对于动态图片91也很感兴趣。用户4可以通过双击动态图片91的方式来添加自己的评论。此外,还可以在页面上设置专门的按键(未示出,供用户添加评论。可以设置各种触发方式,供用户编辑动态图片。

如图10所示,当用户4双击动态图片91时,显示评论添加界面93。在评论添加界面93中,用户4可以在文本框94中添加自己的评论“太喜欢了!!!!”,并且选择所要添加评论的帧95。然后,用户4可以点击“确定”按钮,将自己的评论更新到动态图片91中。这样,查看动态图片91的其他用户也可以看到用户4的评论。

如图11所示,当用户4点击确定之后,手机90中的浏览器可以将更新后的动态图片信息回送给网络110中的服务器112、114。手机90中的浏览器可以将更新后的整个动态图片回送给服务器112、114,也可以仅回送更新部分的信息,例如,用户4的评论内容以及用户4所选择的帧信息等。

服务器112、114可以通过网络,将更新的动态图片信息推送给用户3的电子设备(例如手机)120。此外,在用户3访问网址Http://www.YYYY.com时,可以在网页上直接显示更新后的动态图片91。

图12显示了在用户3的手机120中显示的更新后的动态图片91。图12所示,当动态图片91显示用户4添加评论的帧时,在动态图片91上显示用户4的评论122“用户4:太喜欢了!!!!”。

通过这种方式,可以通过动态图片实现用户的交互。在诸如社交应用、轻量级的媒体应用等应用中,由于相对于视频,动态图片所需的存储资源、计算资源较小,并且更加便于传输和存储,因此,这可以减轻应用提供者所需配置的资源负荷,包括存储、传输、客户端程序等资源。此外,对于用户来说,一方面,这种动态图片可以提供一种新颖的交互形式,从而吸引用户;另一方面,由于动态图片的体量较小,所需处理资源较少,可以方便地嵌入到各种不同的应用中,因此,这可以使得用户能够快速、方便地获取这种动态图片,并在不需要较大设备处理能力的情况下,就可以迅速观看和使用这种动态图片,从而提升用户的使用体验。

本说明书中的各个实施例均采用递进的方式描述,各个实施例之间相同相似的部分互相参见即可,每个实施例重点说明的都是与其他实施例的不同之处。尤其,对于系统实施例而言,由于其基本相似于方法实施例,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。

上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下,在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外,在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中,多任务处理和并行处理也是可以的或者可能是有利的。

16页详细技术资料下载
上一篇:一种医用注射器针头装配设备
下一篇:一种动画模型的导入方法、装置、终端设备及存储介质

网友询问留言

已有0条留言

还没有人留言评论。精彩留言会获得点赞!

精彩留言,会给你点赞!