CN113099287A - 视频制作方法及装置 - Google Patents

视频制作方法及装置 Download PDF

Info

Publication number
CN113099287A
CN113099287A CN202110350554.4A CN202110350554A CN113099287A CN 113099287 A CN113099287 A CN 113099287A CN 202110350554 A CN202110350554 A CN 202110350554A CN 113099287 A CN113099287 A CN 113099287A
Authority
CN
China
Prior art keywords
image
video
determining
frame
range
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202110350554.4A
Other languages
English (en)
Inventor
姜山
邵帅
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Bilibili Technology Co Ltd
Original Assignee
Shanghai Bilibili Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shanghai Bilibili Technology Co Ltd filed Critical Shanghai Bilibili Technology Co Ltd
Priority to CN202110350554.4A priority Critical patent/CN113099287A/zh
Publication of CN113099287A publication Critical patent/CN113099287A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/431Generation of visual interfaces for content selection or interaction; Content or additional data rendering
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/44Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47End-user applications
    • H04N21/472End-user interface for requesting content, additional data or services; End-user interface for interacting with content, e.g. for content reservation or setting reminders, for requesting event notification, for manipulating displayed content
    • H04N21/47202End-user interface for requesting content, additional data or services; End-user interface for interacting with content, e.g. for content reservation or setting reminders, for requesting event notification, for manipulating displayed content for requesting content on demand, e.g. video on demand
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47End-user applications
    • H04N21/485End-user interface for client configuration
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N5/00Details of television systems
    • H04N5/222Studio circuitry; Studio devices; Studio equipment
    • H04N5/262Studio circuits, e.g. for mixing, switching-over, change of character of image, other special effects ; Cameras specially adapted for the electronic generation of special effects

Landscapes

  • Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • Human Computer Interaction (AREA)
  • Databases & Information Systems (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请提供视频制作方法及装置,其中所述视频制作方法包括:在所述浏览器提供的制作界面中显示基于待制作图像创建的图像时间轴,所述图像时间轴上包含范围选择控件;响应于所述范围选择控件的移动操作,确定所述范围选择控件在所述图像时间轴中的相对位置;根据所述范围选择控件在所述图像时间轴中的相对位置,确定选择的图像范围;预览所述图像范围内的图像对应的动画效果,并根据预览结果合成对应的视频。如此,通过浏览器即可实现视频的制作,制作视频的门槛较低,缩减了制作视频的时间,提高了制作效率。

Description

视频制作方法及装置
技术领域
本申请涉及计算机技术领域,特别涉及一种视频制作方法。本申请同时涉及一种视频制作装置,一种计算设备,以及一种计算机可读存储介质。
背景技术
随着计算机技术和图像处理技术的快速发展,视频越来越受到人们的喜爱。现有技术中,如果需要制作视频,则需要下载安装专门的应用程序(包括一些收费软件),然后学习该应用程序的操作教程,从而制作自己所需的视频。然而,上述的视频制作方法需要额外下载安装相应的应用程序,学习掌握该应用程序的使用教程,整个视频的制作过程较为繁琐,导致视频的制作门槛高、时间长、效率低,无法满足广告主的快速制作及投放需求。
发明内容
有鉴于此,本申请实施例提供了一种视频制作方法。本申请同时涉及一种视频制作装置,一种计算设备,以及一种计算机可读存储介质,以解决现有技术中存在的视频的制作效率低的问题。
根据本申请实施例的第一方面,提供了一种视频制作方法,应用于浏览器中,包括:
在所述浏览器提供的制作界面中显示基于待制作图像创建的图像时间轴,所述图像时间轴上包含范围选择控件;
响应于所述范围选择控件的移动操作,确定所述范围选择控件在所述图像时间轴中的相对位置;
根据所述范围选择控件在所述图像时间轴中的相对位置,确定选择的图像范围;
预览所述图像范围内的图像对应的动画效果,并根据预览结果合成对应的视频。
根据本申请实施例的第二方面,提供了一种视频制作装置,应用于浏览器中,包括:
显示模块,被配置为在所述浏览器提供的制作界面中显示基于待制作图像创建的图像时间轴,所述图像时间轴上包含范围选择控件;
第一确定模块,被配置为响应于所述范围选择控件的移动操作,确定所述范围选择控件在所述图像时间轴中的相对位置;
第二确定模块,被配置为根据所述范围选择控件在所述图像时间轴中的相对位置,确定选择的图像范围;
合成模块,被配置为预览所述图像范围内的图像对应的动画效果,并根据预览结果合成对应的视频。
根据本申请实施例的第三方面,提供了一种计算设备,包括:
存储器和处理器;
所述存储器用于存储计算机可执行指令,所述处理器用于执行所述计算机可执行指令:
在所述浏览器提供的制作界面中显示基于待制作图像创建的图像时间轴,所述图像时间轴上包含范围选择控件;
响应于所述范围选择控件的移动操作,确定所述范围选择控件在所述图像时间轴中的相对位置;
根据所述范围选择控件在所述图像时间轴中的相对位置,确定选择的图像范围;
预览所述图像范围内的图像对应的动画效果,并根据预览结果合成对应的视频。
根据本申请实施例的第四方面,提供了一种计算机可读存储介质,其存储有计算机可执行指令,该计算机可执行指令被处理器执行时实现任意所述视频制作方法的步骤。
本申请提供的视频制作方法,可以在浏览器提供的制作界面中显示基于待制作图像创建的图像时间轴,所述图像时间轴上包含范围选择控件;响应于所述范围选择控件的移动操作,确定所述范围选择控件在所述图像时间轴中的相对位置;根据所述范围选择控件在所述图像时间轴中的相对位置,确定选择的图像范围;预览所述图像范围内的图像对应的动画效果,并根据预览结果合成对应的视频。这种情况下,提供了一种基于浏览器的智能化视频制作方法,计算机上装有浏览器即可实现视频的制作,无需下载安装单独的应用程序,制作视频的门槛较低,缩减了制作视频的时间,提高了制作效率。另外,可以通过图像时间轴,自定义所需的图像范围,然后预览自定义的图像范围内的图像对应的动画效果,从而可以简单高效地合成用户所需的视频,提高视频的制作效率。
附图说明
图1是本申请一实施例提供的一种视频制作方法的流程图;
图2是本申请一实施例提供的一种图像时间轴的示意图;
图3是本申请一实施例提供的第一种浏览器提供的制作界面的示意图;
图4是本申请一实施例提供的一种剪裁框的示意图;
图5是本申请一实施例提供的第二种浏览器提供的制作界面的示意图;
图6是本申请一实施例提供的第三种浏览器提供的制作界面的示意图;
图7是本申请一实施例提供的第四种浏览器提供的制作界面的示意图;
图8是本申请一实施例提供的另一种视频制作方法的流程图;
图9是本申请一实施例提供的又一种视频制作方法的流程图;
图10是本申请一实施例提供的一种视频制作装置的结构示意图;
图11是本申请一实施例提供的一种计算设备的结构框图。
具体实施方式
在下面的描述中阐述了很多具体细节以便于充分理解本申请。但是本申请能够以很多不同于在此描述的其它方式来实施,本领域技术人员可以在不违背本申请内涵的情况下做类似推广,因此本申请不受下面公开的具体实施的限制。
在本申请一个或多个实施例中使用的术语是仅仅出于描述特定实施例的目的,而非旨在限制本申请一个或多个实施例。在本申请一个或多个实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式,除非上下文清楚地表示其他含义。还应当理解,本申请一个或多个实施例中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。
应当理解,尽管在本申请一个或多个实施例中可能采用术语第一、第二等来描述各种信息,但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如,在不脱离本申请一个或多个实施例范围的情况下,第一也可以被称为第二,类似地,第二也可以被称为第一。取决于语境,如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。
首先,对本申请一个或多个实施例涉及的名词术语进行解释。
GIF(Graphics Interchange Format,图形交换格式):是一种公用的图像文件格式标准,GIF用于以超文本标志语言方式显示索引彩色图像,在因特网和其他在线服务***上得到广泛应用。GIF分为静态GIF和动画GIF两种,扩展名为.gif,是一种压缩位图格式,支持透明背景图像,适用于多种操作***,“体型”很小,网上很多小动画都是GIF格式。其实GIF是将多幅图像保存为一个图像文件,从而形成动画,最常见的就是通过一帧帧的动画串联起来的搞笑GIF图,所以归根到底GIF仍然是图片文件格式。
Web技术:指基于浏览器实现的相关技术,所有实现操作均在浏览器内完成。
Canvas:浏览器画布,浏览器用于渲染各种图像画面的技术。
FPS:图像领域中的定义是指画面每秒传输帧数,通俗来讲就是指动画或视频的画面数(如:一般视频为30FPS或24FPS)。FPS是测量用于保存、显示动态视频的信息数量。每秒钟帧数越多,所显示的动作就会越流畅。某些计算机视频格式,每秒只能提供15FPS。电影以每秒24张画面的速度播放,也就是一秒钟内在屏幕上连续投射出24张静止画面。有关动画播放速度的单位是FPS,其中的F就是英文单词Frame(画面、帧),P就是Per(每),S就是Second(秒)。用中文表达就是多少帧每秒,或每秒多少帧,电影是24FPS,通常简称为24帧。
在本申请中,提供了一种视频制作方法,本申请同时涉及一种视频制作装置,一种计算设备,以及一种计算机可读存储介质,在下面的实施例中逐一进行详细说明。
图1示出了根据本申请一实施例提供的一种视频制作方法的流程图,应用于浏览器中,具体包括以下步骤:
步骤102:根据上传的待制作图像和预设显示规则,在浏览器提供的制作界面中为所述待制作图像创建对应的图像时间轴。
实际应用中,如果需要制作视频,则需要额外下载安装相应地应用程序,学习掌握该应用程序的使用教程,整个视频的制作过程较为繁琐,导致视频的制作门槛高、时间长、效率低,无法满足广告主的快速制作及投放需求。
因而,本申请中提供了一种基于浏览器的智能化视频制作方法,可以在所述浏览器提供的制作界面中显示基于待制作图像创建的图像时间轴,所述图像时间轴上包含范围选择控件;响应于所述范围选择控件的移动操作,确定所述范围选择控件在所述图像时间轴中的相对位置;根据所述范围选择控件在所述图像时间轴中的相对位置,确定选择的图像范围;预览所述图像范围内的图像对应的动画效果,并根据预览结果合成对应的视频。如此,计算机上装有浏览器即可实现视频的制作,无需下载安装单独的应用程序,制作视频的门槛较低,缩减了制作视频的时间,提高了制作效率。
具体的,待制作图像是指后续用于合成视频的图像,该待制作图像的数目取决于用户上传的图像数目,不同的待制作图像的来源可以不同。预设显示规则是指显示不同来源的待制作图像的顺序规则,如预设显示规则可以为先显示从视频中提取出的图像,再显示静态图像,最后显示从现有GIF图像(动态或静态)中获取的图像。
另外,浏览器提供的制作界面可以是指浏览器中提供的用于制作视频的界面,即视频制作界面,该视频制作界面中可以包括各种制作视频所需的控件。图像时间轴是一种将待制作图像以缩略图形式,按照先后顺序进行展示的时间轴,该时间轴上的每个单位时间对应一个待制作图像,如每200毫秒对应一张图像,每400毫秒对应一张图像,或者每1秒对应一张图像。
本实施例一个可选的实施方式中,根据上传的待制作图像和预设显示规则,在浏览器提供的制作界面中为所述待制作图像创建对应的图像时间轴,具体实现过程可以如下:
根据所述预设显示规则确定所述待制作图像的显示顺序;
确定所述待制作图像的总数目,根据所述总数目确定所述待制作图像的显示尺寸;
基于所述显示尺寸,生成所述待制作图像对应的缩略图;
将所述待制作图像对应的缩略图按照所述显示顺序,以时间轴形式进行显示,生成所述图像时间轴。
需要说明的是,当获取到上传的各个待制作图像后,可以基于该待制作图像创建对应的图像时间轴,在图像时间轴上显示各个待制作图像对应的缩略图。由于显示图像时间轴的区域有限,因而对于不同数目的待制作图像,可以显示不同大小的缩略图,也即在创建图像时间轴时,可以先根据待制作图像的总数目,确定一个默认的缩略图尺寸,根据该尺寸创建并显示对应的缩略图,从而得到该图像时间轴。
本申请中可以在初始创建生成图像时间轴时,根据待制作图像的总数目(即图像时间轴包括的总帧数),智能化选择合适的缩放大小,从而提供更好的用户体验。
本实施例一个可选的实施方式中,在创建图像时间轴之前,首先需要获取到数据源,即合成视频所需的待制作图像,因而根据上传的待制作图像和预设显示规则,在浏览器提供的制作界面中为所述待制作图像创建对应的图像时间轴之前,还包括:
在接收到数据选择指令的情况下,获取上传的待制作图像。
具体的,数据选择指令是指用户在浏览器提供的制作界面中通过上传控件触发的指令,该数据选择指令用于获取用户上传的待制作图像。
本实施例一个可选的实施方式中,在接收到数据选择指令的情况下,获取上传的待制作图像包括以下至少之一:
在接收到第一数据选择指令的情况下,获取所述第一数据选择指令对应的目标视频,从所述目标视频中提取所述待制作图像;
在接收到第二数据选择指令的情况下,获取所述第二数据选择指令对应的目标图像,将所述目标图像确定为所述待制作图像;
在接收到第三数据选择指令的情况下,获取所述第三数据选择指令对应的GIF图像,将所述GIF图像确定为所述待制作图像。
具体的,第一数据选择指令、第二数据选择指令和第三数据选择指令可以是通过不同的上传控件触发的指令,其中,第一数据选择指令用于上传视频,第二数据选择指令用于上传静态图片,第三数据选择指令用于上传现有的GIF图像(包括静态GIF图像和GIF动画)。
另外,第一数据选择指令、第二数据选择指令和第三数据选择指令也可以是通过一个上传控件触发的指令,当该上传控件被触发时,确定用户选择的文件类型,若该文件类型为视频格式,则从该视频中提取至少一个视频帧作为所述待制作图像,若该文件类型为图片格式,则直接将该文件确定为所述待制作图像,若该文件类型为GIF格式,则将所述文件中的每一帧图像确定为所述待制作图像。
需要说明的是,在用户触发上传控件,选择对应的文件后,可以将选择的文件中的图像显示在图像预览区域,然后可以再次触发上传控件,选择文件进行上传,前后两次选择的文件类型可以相同,也可以不同,当浏览器提供的制作界面中的确认上传控件被触发时,可以将用户选择的全部图像作为所述待制作图像,创建对应的图像时间轴。
示例的,浏览器提供的制作界面中设置有视频上传控件、静态图像上传控件和GIF动画上传控件,当用户点击视频上传控件时,可以选择视频文件上传,并从所述视频文件中提取相应的视频帧,显示在图像预览区域中;当用户点击静态图像上传控件时,可以选择图像文件上传,并将上传的图像显示在图像预览区域中;当用户点击GIF动画上传控件时,可以选择GIF文件上传,并将上传的GIF动画中的每一帧图像显示在图像预览区域中。当用户点击该浏览器提供的制作界面中的确认上传控件后,生成对应的图像时间轴。
本申请中制作视频能够选择的数据源多样,可基于现有视频资源、现有GIF动画以及静态图像来合成新的视频,用户可单独选择视频、GIF动画或者静态图像中的一种作为数据源,也可以在选了视频后,再选择GIF动画,或者静态图像添加到时间轴中,从而可以同时选择不同数据源中的不同图像作为最终合成视频的图像,使得用户在制作视频的时候,数据源的选择更加灵活高效,满足丰富的GIF素材推广需求。
本实施例一个可选的实施方式中,若用户选择上传的文件是视频,那么需要从用户上传的视频中提取至少一个视频帧,作为待制作图像。具体实现时,从所述目标视频中提取所述待制作图像可以如下:
根据所述目标视频的每秒播放帧数,确定对应的提取精细度;
根据所述提取精细度,确定待提取的每帧视频的时长;
根据所述每帧视频的时长,从所述目标视频中提取所述待制作图像。
具体的,提取精细度是指期望获取的每秒帧数,根据该期望获取的每秒帧数可以计算出每帧时长,从而每间隔该时长,提取一帧视频帧,即每帧视频的时长表示每隔多少秒提取一帧视频帧。实际应用中,可以根据目标视频的每秒播放帧数,确定对应的提取精细度。
另外,对于不同时长的目标视频来说,可以采用不同的提取精细度进行提取,也即对于视频时长较长的目标视频来说,为了控制提取的视频帧的数目,可以使提取精细度较粗,即每帧视频的时长较长(间隔较长时间提取一帧视频帧),对于视频时长较短的目标视频来说,为了保证提取到足够的视频帧,可以使提取精细度较细,即每帧视频的时长较短(间隔较短时间提取一帧视频帧)。
示例的,目标视频的每秒播放帧数为24帧,那么对应的提取精细度可以和目标视频的每秒播放帧数相同,即以每秒24帧的速度提取,此时每帧视频的时长(毫秒)=1000毫秒/24帧。或者,还可以根据目标视频的时长及相应需求,以每秒30帧(FPS)、15帧或10帧的速率提取。
本实施例一个可选的实施方式中,根据所述每帧视频的时长,从所述目标视频中提取所述待制作图像,具体实现过程可以如下:
实时播放所述目标视频,计算下一视频帧在所述目标视频中的时间点;
将所述目标视频的播放进度跳转至所述时间点,并暂停所述目标视频,获取当前视频帧;
将所述当前视频帧渲染至浏览器的画布上,并将所述画布上的视频帧转换成图像进行保存,得到所述待制作图像,返回执行上述计算下一视频帧在所述目标视频中的时间点的操作步骤,直至目标视频播放完毕。
需要说明的是,当用户在浏览器提供的制作界面中上传目标视频后,可以通过浏览器中的video标签来实时播放该目标视频,然后再播放过程中,根据计算出的每帧视频的时长计算出下一帧提取画面在视频中的时间点,并把video标签快速跳至该时间点播放,并立即暂停视频,然后把当前视频暂停的画面渲染到浏览器画布canvas上,再把canvas上的帧图像转换成图像数据保存在内存中,以此类推重复以上步骤直至期望的视频帧都提取完毕,得到用户上传的待制作图像。
本实施例一个可选的实施方式中,创建图像时间轴后,还可以进一步对该图像时间轴进行缩放,也即根据上传的待制作图像和预设显示规则,在所述浏览器提供的制作界面中为所述待制作图像创建对应的图像时间轴之后,还包括:
在接收到针对所述图像时间轴的缩放指令的情况下,根据所述缩放指令携带的缩放参数,对所述图像时间轴上显示的缩略图进行缩放。
具体的,所述缩放指令是由预设的缩放操作触发的指令,用于放大或缩小图像时间轴上显示的缩略图,预设的缩放操作可以为滚动滚轮、点击缩放控件等;所述缩放参数是指放大或缩小的幅度,在通过预设的缩放操作触发缩放指令时,会携带对应的缩放参数,如用户将鼠标放在图像时间轴上,向上滚动3下滚轮,此时接收到针对所述图像时间轴的缩放指令,且所述缩放指令携带的缩放参数为放大30%;或者,生成的图像时间轴下方设置有放大控件和缩小控件,用户点击一次放大控件,放大10%,点击一次缩小控件,缩小10%。
示例的,图2是本申请一实施例提供的一种图像时间轴示意图,如图2所示为不同缩放比例(即放大前图像时间轴和放大后图像时间轴),显示的图像时间轴的可视效果。
本申请中的图像时间轴还提供了放大缩小的功能,便于用户在帧数过多或过少的时候,可以清楚的查看图像对应的缩略图。
本实施例一个可选的实施方式中,可以将当前选中的图像渲染至浏览器提供的制作界面中的画布区域,以进行显示和操作,也即根据上传的待制作图像和预设显示规则,在浏览器提供的制作界面中为所述待制作图像创建对应的图像时间轴之后,还包括:
确定所述图像时间轴上被选中的目标图像,所述图像时间轴上每个单位时间对应一个图像;
根据所述目标图像的尺寸,将所述目标图像渲染至所述浏览器提供的制作界面中的画布区域。
需要说明的是,可以将当前选中的目标图像渲染至所述浏览器提供的制作界面中的画布区域,便于用户清楚地预览每一帧的图像,且便于后续用户针对每一帧的图像进行操作编辑。
本实施例一个可选的实施方式中,确定所述图像时间轴上被选中的目标图像,包括:
在接收到针对所述图像时间轴上的待制作图像的选择操作的情况下,将所述选择操作选择的待制作图像确定为所述目标图像;
在未接收到针对所述图像时间轴上的待制作图像的选择操作的情况下,将所述图像时间轴上的首帧图像确定为所述目标图像。
需要说明的是,若用户选择了图像时间轴上的某个图像,则可以将用户选择的图像作为目标图像,后续将目标图像渲染至浏览器提供的制作界面中的画布区域,即将用户选择的图像显示在浏览器提供的制作界面中的画布区域中,供用户预览和操作。若用户没有选择图像时间轴上的图像,如刚生成图像时间轴进行初始化时,用户未选择任何图像,此时可以将图像时间轴上的首帧图像确定为目标图像,即此时是将图像时间轴上的首帧图像显示在浏览器提供的制作界面中的画布区域中,供用户预览和操作。
本实施例一个可选的实施方式中,根据所述目标图像的尺寸,将所述目标图像渲染至所述浏览器提供的制作界面中的画布区域,具体实现过程可以如下:
确定所述目标图像的宽和高;
确定所述画布区域的宽和高;
将所述目标图像等比缩放至所述画布区域。
需要说明的是,本申请中根据获取到的待制作图像,创建对应的成图像时间轴后,可以实时将当前帧渲染至页面上的画布区域,浏览器中的画布工具会智能的根据图像的原始比例自动等比例缩放至画布水平/垂直边缘,便于用户能全局的对每帧画面进行编辑。
本实施例一个可选的实施方式中,根据上传的待制作图像和预设显示规则,在浏览器提供的制作界面中为所述待制作图像创建对应的图像时间轴之后,还包括:
在接收到删除操作的情况下,在所述图像时间轴中删除所述删除操作指示的图像。
需要说明的是,创建对应的成图像时间轴后,图像时间轴上的每个图像上方都对应设置有删除控件,在检测到某个图像上的删除控件被触发时,删除该图像。如此,当连续的图像过于接近时,可以通过鼠标移至不需要的帧上,点击删除控件,从而删除无用的帧。
示例的,图3是本申请一实施例提供的第一种浏览器提供的制作界面示意图,如图3所示,图像时间轴上的每个图像缩略图上会显示一个“错号”,该“错号”即为删除控件,用户通过点击该“错号”即可实现对应的分帧删除。
本实施例一个可选的实施方式中,在生成图像时间轴后,用户可以选择图像时间轴中的某个图像进行编辑处理,也即根据上传的待制作图像和预设显示规则,在所述浏览器提供的制作界面中为所述待制作图像创建对应的图像时间轴之后,还包括:
接收对所述待制作图像中的第一图像的操作指令,并生成对应的合成图像。
具体的,第一图像是指被选中的待进行编辑操作的待制作图像,合成图像是指对第一图像进行编辑操作后生成的图像,操作指令是指针对渲染至浏览器提供的制作界面中的画布区域的待制作图像(即第一图像)进行编辑操作的指令,该操作指令可以是裁剪操作、添加特效、添加文字等操作。
本实施例一个可选的实施方式中,该操作指令可以为裁剪指令,即可以对渲染至画布区域内的待制作图像(即第一图像)进行裁剪,得到对应的合成图像,而如果要对画布区域的待制作图像进行裁剪,则需要在画布区域显示一个剪裁框,也即根据所述目标图像的尺寸,将所述目标图像渲染至所述浏览器提供的制作界面中的画布区域之后,还包括:
在所述画布区域显示剪裁框,所述剪裁框位于所述目标图像的图像区域内,所述剪裁框的面积不大于所述目标图像;
接收针对所述剪裁框的控制操作,根据所述控制操作生成所述目标图像对应的合成图像。
需要说明的是,用户可利用剪裁框的拖动、放大缩小功能来选定生成视频的每帧图像的图像大小和内容,并且浏览器可以根据目标图像的尺寸大小,以及用户的拖动位置智能化的限定剪裁区域只能在原始目标图像范围以内,避免用户误操作导致生成的视频带有空白区域。
示例的,图4是本申请一实施例提供的一种剪裁框的示意图,如图4所示剪裁框位于图像实际区域内,且剪裁框内可以显示剪裁框无法拖至图像以外区域。
实际应用时,一种可能的实现方式中,在所述画布区域显示剪裁框包括:
将所述目标图像确定为所述画布区域的底层图像;
在所述底层图像上添加剪裁框,所述剪裁框与所述目标图像位于不同的图层上;
在所述底层图像与所述剪裁框之间添加蒙层,所述蒙层用于区分剪裁框选中区域和未选中区域。
需要说明的是,可以实时把当前选中图像(即目标图像)渲染至画布区域(canvas画布)上作为底图,在底图之上添加剪裁框,作为不同的图层渲染在画布区域上,剪裁框可按比例拖动大小及位置,在底图及剪裁框中间还可以设置一层半透明蒙层,用来区分剪裁框选中区域及未选中区域,未选中区域可以设置为半透明暗色。
一种可能的实现方式中,接收针对所述剪裁框的控制操作,根据所述控制操作生成所述目标图像对应的合成图像,包括:
根据针对所述剪裁框的控制操作,确定所述剪裁框的位置;
确定所述剪裁框相对于所述底层图像的位置参数;
根据所述位置参数,获取所述目标图像中所述剪裁框内的图像数据;
将获取到的所述图像数据确定为所述合成图像,显示在所述剪裁框内,并在所述浏览器提供的制作界面中的裁剪预览区域进行显示。
具体的,复制剪裁框需要的位置参数可以包括:left(离目标图像左侧像素距离)、top(离目标图像顶部像素距离)、width(裁剪宽度)、height(裁剪高度)。实际应用中,left等于剪裁框离画布区域左侧距离减去底层图像离画布区域左侧距离;top等于剪裁框离画布区域顶部距离减去底层图像离画布区域顶部距离;width等于剪裁框缩放后的宽度;height等于剪裁框缩放后的高度。通过以上参数即可确定剪裁框区域相对应底层图像上的图像数据,从而将剪裁框内的图像数据复制出来显示在剪裁框上,并在浏览器提供的制作界面中的裁剪预览区域进行显示。
需要说明的是,可以根据鼠标的实时拖动来获取剪裁框的位置,并计算出剪裁框在画布区域相对于底层图像的位置,通过此位置对应到底层图像上目标图像的位置,把该位置对应的图像数据复制出来,粘贴应用到剪裁框区域的位置,因此可以做到选择区域与未选择区域的明亮对比,同时可以把剪裁框复制出来的图像数据单独放到浏览器提供的制作界面中的裁剪预览区域,供用户预览最终剪裁出来的图像是否满足要求。
本实施例一个可选的实施方式中,还可以记录针对待制作图像中的第一图像的各个操作,便于后续进行进一步处理,也即接收针对所述剪裁框的控制操作,根据所述控制操作生成所述目标图像对应的合成图像之后,还包括:
存储所述控制操作后的图像数据;
确定所述控制操作的操作类型;
将所述控制操作和对应的操作类型添加至操作列表中;
根据所述操作列表中包括的控制操作的指令索引,设置新添加的控制操作对应的指令索引。
本实施例一个可选的实施方式中,接收针对所述剪裁框的控制操作,根据所述控制操作生成所述目标图像对应的合成图像之后,还包括:
在接收到撤回指令的情况下,撤销当前控制操作对应的操作,将所述浏览器提供的制作界面中画布区域内显示的合成图像恢复至操作前的状态。
一个可选的实施方式中,撤销当前控制操作对应的操作,将所述浏览器提供的制作界面中画布区域内显示的合成图像恢复至操作前的状态,包括:
在接收到所述撤回指令的情况下,确定当前控制操作的操作类型;
在所述操作列表中确定所述操作类型的目标控制操作;
获取所述目标控制操作对应的图像数据,并更新当前控制操作的指令索引为所述目标控制操作的指令索引;
将所述浏览器提供的制作界面中的画布区域恢复为所述图像数据对应的图像。
需要说明的是,为了防止用户误操作,用户针对待制作图像的每个操作指令,都可以进行记录,从而实现快速撤销之前操作的功能,及快速重做撤销掉相关操作的功能。也即是,用户每次拖动剪裁框或者缩放剪裁框,都会记录对应的操作指令,以及进行相应操作后的图像数据,以用于后续的图像恢复。具体实现时,可以撤销/重做的操作包含剪裁框的大小以及位置变化、目标图像删除操作、选择图像范围的操作等。用户可以点击浏览器提供的制作界面上的撤销控件来进行撤销/重做操作,也可以更便捷的通过键盘快捷键来进行此类撤销操作(可以与其他常规应用程序的撤销/重做快捷键一致,减少用户记住快捷键的成本)。
实际应用中,可以通过一个操作列表记录所有有效的操作指令,每一个操作指令都有对应的操作类型,便于撤销的时候,找到上一个同类型的操作(如改变剪裁框大小位置的操作),并以一个指令索引指向当前操作指令,指令索引可指向操作列表里的任意操作指令。
示例的,当前有3个操作指令[a1,b1,a2],其中a1、a2为同类型的操作指令,b1为另一个类型的操作指令,当用户有新的操作时,假设新操作指令为b2,会把最新的操作b2相关数据添加到操作列表的尾端,即为[a1,b1,a2,b2],此时b2的指令索引为3(索引以0开始,第四个的指令索引即为3),当用户点击撤销时,找到上一个同类型的操作指令的指令索引(即为b1对应的指令索引1),获取其对应的图像数据,做恢复处理,并把当前操作指令的指令索引更新为1,以此完成了一次撤销的操作。
另外,本申请提供了针对不需要的目标图像进行分帧删除的能力,删除对应图像后,也可以同时将剩余的图像更新为新的索引,画布区域也可以同步更新所渲染的图像。
本实施例一个可选的实施方式中,根据所述目标图像的尺寸,将所述目标图像渲染至所述浏览器提供的制作界面中的画布区域之后,还包括:
在接收到切换操作的情况下,将所述切换操作指示的图像渲染至所述浏览器提供的制作界面中的画布区域。
需要说明的是,可以通过浏览器提供的制作界面中提供的切换控件,对当前画布区域内渲染的图像进行切换,该切换控件可以为上一帧/下一帧控件,将切换后的图像重新渲染至浏览器提供的制作界面中的画布区域供用户浏览。
另外,生成图像时间轴,将当前帧渲染至页面上的画布区域后,用户可以对画布区域内显示的待制作图像进行编辑操作,如剪裁操作等,为了便于用户快速预览后续生成的视频的效果,本申请中还可以提供预览功能,当确定剪裁框的大小位置后,可以点击上一帧/下一帧控件单独查看其它帧的合成图像,此时切换操作指示的图像是指待制作图像对应的合成图像。
步骤104:在所述浏览器提供的制作界面中显示基于待制作图像创建的图像时间轴,所述图像时间轴上包含范围选择控件;响应于所述范围选择控件的移动操作,确定所述范围选择控件在所述图像时间轴中的相对位置。
具体的,根据上传的待制作图像和预设显示规则,在浏览器提供的制作界面中为所述待制作图像创建对应的图像时间轴的基础上,进一步地,将在所述浏览器提供的制作界面中显示基于待制作图像创建的图像时间轴,所述图像时间轴上包含范围选择控件;并响应于所述范围选择控件的移动操作,确定所述范围选择控件在所述图像时间轴中的相对位置。其中,所述范围选择控件为所述浏览器提供的制作界面中图像时间轴上设置的选择图像范围的控件。
本实施例一个可选的实施方式中,响应于所述范围选择控件的移动操作,确定所述范围选择控件在所述图像时间轴中的相对位置,包括:
确定所述范围选择控件相对于所述浏览器提供的制作界面的第一边界的第一距离、图像时间轴的滚动距离以及所述图像时间轴的区域边界相对于所述浏览器提供的制作界面的第一边界的第二距离;
根据所述第一距离、所述滚动距离和所述第二距离,确定所述范围选择控件在所述图像时间轴中的相对位置。
具体的,浏览器提供的制作界面的第一边界可以是以水平方向为参考的左侧边界,相应地,图像时间轴的区域边界为图像时间轴的左端,图像时间轴的滚动距离为图像时间轴沿滚动方向,在当前显示的图像之前未显示出来的图像的距离,即图像时间轴的滚动距离是指图像向前滚动的距离。需要说明的是,上述是以图像时间轴左侧为起点,并向左滚动的计算方式,当然,实际应用中,图像时间轴也可以以右侧为起点,并向右侧滚动,此时浏览器提供的制作界面的第一边界可以为以水平方向为参考的右侧边界,相应地,图像时间轴的区域边界为图像时间轴的右端。
步骤106:根据所述范围选择控件在所述图像时间轴中的相对位置,确定选择的图像范围。
具体的,在响应于所述范围选择控件的移动操作,确定所述范围选择控件在所述图像时间轴中的相对位置的基础上,进一步地,将根据所述范围选择控件在所述图像时间轴中的相对位置,确定选择的图像范围。
需要说明的是,范围选择控件可以为一个或两个,当所述范围选择控件为两个时,针对每个范围选择控件,均可以执行上述步骤104的操作,分别确定两个范围选择控件在所述图像时间轴中的相对位置,然后后续便可以根据确定出的两个范围选择控件在所述图像时间轴中的相对位置,确定选择的图像范围。
具体实现时,所述范围选择控件可以包括第一选择控件和第二选择控件;确定所述第一选择控件在所述图像时间轴中的第一相对位置和所述第二选择控件在所述图像时间轴中的第二相对位置;将所述第一相对位置对应的待制作图像确定为开始图像,并将所述第二相对位置对应的待制作图像,确定为结束图像;将所述开始图像和所述结束图像之间的范围确定为所述选择的图像范围。
需要说明的是,获取到用户上传的待制作图像后,各个待制作图像会转化成本地图片链接以图片缩略图的形式展示在图像时间轴上,图像时间轴上的每一块(即每个单位时间)即为每帧图像。图像时间轴上可以设置有两个选择控件,用户拖动该两个选择控件,就可以选择自己所需的图像范围,一个选择控件用于指示选择的图像范围的开始位置,另一个选择控件用于指示选择的图像范围的结束位置。
沿用上例,如图3所示,图像时间轴上还设置有两个范围选择控件,两个范围选择控件之间的图像即为用户选择的图像范围。
一种可能的实现方式中,确定所述第一选择控件在所述图像时间轴中的第一相对位置,包括:
确定所述第一选择控件相对于所述浏览器提供的制作界面的第一边界的第一距离;
确定所述图像时间轴的滚动距离;
确定所述图像时间轴的区域边界相对于所述浏览器提供的制作界面的第一边界的第二距离;
根据所述第一距离、所述滚定距离和所述第二距离,确定所述第一选择控件在所述图像时间轴中的第一相对位置。
实际应用中,用户拖动第一选择控件后,浏览器可以实时计算第一选择控件相对于浏览器提供的制作界面的位置、第一选择控件相对于图像时间轴的位置、时间轴本身长度,从而计算出第一选择控件在所述图像时间轴中的第一相对位置(即第一选择控件相对时间轴滚动区域最左侧的移动距离)。具体的,确定所述第一选择控件在所述图像时间轴中的第一相对位置的具体计算公式为:第一选择控件相对于图像时间轴的起始位置的移动距离d=第一选择控件相对于浏览器提供的制作界面左侧的第一距离(d3)+图像时间轴的滚动距离(d2)-图像时间轴的区域左端相对于所述浏览器提供的制作界面左侧的第二距离(d1)。
示例的,图5是本申请提供的第二种浏览器提供的制作界面示意图,如图5所示,d1是指图像时间轴的区域左端相对于所述浏览器提供的制作界面左侧的第二距离,d2是指图像时间轴的滚动距离,d3是指第一选择控件相对于浏览器提供的制作界面左侧的第一距离。图像时间轴可能比较长,浏览器提供的制作界面可能无法一次性完全显示,如图5所示,如果该图像时间轴长度为10S,图中浏览器提供的制作界面仅展示了0-800ms,用户可以通过滚动图像时间轴,将当前尚未显示出来的图像显示出来,滚动图像时间轴后,当前浏览器提供的制作界面中显示的图像时间轴的最左端的时间将不再对应开始时间0S。
需要说明的是,确定所述第二选择控件在所述图像时间轴中的第二相对位置的具体实现过程与上述确定所述第一选择控件在所述图像时间轴中的第一相对位置的具体实现过程相同,本申请在此不再进行赘述。通过上述方法,可以分别计算出两个选择控件在所述图像时间轴中的相对位置,并可以将计算出来的相对位置保存起来,以便下次拖动直接引用。
本实施例一个可选的实施方式中,根据所述范围选择控件在所述图像时间轴中的相对位置,确定选择的图像范围,具体实现过程可以如下:
将所述范围选择控件在所述图像时间轴中的相对位置映射至所述图像时间轴上,确定对应的帧索引;
根据所述帧索引,确定选择的图像范围。
实际应用中,针对上述范围选择控件包括第一选择控件和第二选择控件的情况,将所述第一相对位置对应的待制作图像确定为开始图像可以为:将所述第一相对位置映射至所述图像时间轴上,确定对应的开始帧索引;根据所述开始帧索引,确定对应的待制作图像;将所述待制作图像渲染至所述浏览器提供的制作界面中的画布区域。
需要说明的是,可以将第一相对位置映射到图像时间轴上对应的开始帧索引,然后将开始帧索引对应的待制作图像渲染至所述浏览器提供的制作界面中的画布区域。同理,可以确定第二相对位置对应的结束帧索引,从而可以将结束帧索引对应的待制作图像渲染至所述浏览器提供的制作界面中的画布区域。具体实现时,在图像时间轴中显示每个图像时,每个图像均占据图像时间轴一定宽度,基于此,可以使用第一相对位置除以每个图像占用的宽度,然后取整,即可得到对应的开始帧索引。
另外,还可以把确定出的图像范围内的开始帧索引和结束帧索引同步更新到画布区域内上,画布区域可以通过新的索引来渲染图像时间轴中选中区域内的图像。
本实施例一个可选的实施方式中,根据所述范围选择控件在所述图像时间轴中的相对位置,确定选择的图像范围,具体实现过程还可以如下:
在接收到针对目标待制作图像的选中操作的情况下,将所述范围选择控件移动至所述目标待制作图像对应的位置处;
在接收到范围选择操作的情况下,以所述目标待制作图像为开始图像,选取所述目标待制作图像后预设范围内的图像;
将选取的图像确定为所述选择的图像范围。
需要说明的是,预设范围是预先设置的图像选择范围,如该预设范围可以为5秒、10秒、15秒等。范围选择控件也可以只包括一个选择控件,用户可以通过点击图像时间轴上的某个目标待制作图像,将该范围选择控件移动至该目标待制作图像对应的位置处,然后通过点击截取控件,自动从选择的目标待制作图像开始,选中其后预设范围内的图像,以作为用户选择的图像范围,如果用户选择的目标待制作图像后面的图像不足预设范围,则选取至最后一个图像即可。
也就是说,当图像时间轴处于未选中状态时,用户可以点击任意图像来快速跳至该帧位置,范围选择控件也会同步移至该位置,同时图像时间轴上面的画布区域也可以实时更新用户点击的那一帧图像,当用户点击图像时间轴下方的截取控件后,可以以用户点击的那一帧目标图像作为起始位置,默认选中此图像及后面预设范围内(5秒长度范围)的图像。另外,自动选取目标图像后预设范围内的图像后,用户也可以通过拖动该范围选择控件,微调选择的图像范围。
示例的,图6是本申请一实施例提供的第三种浏览器提供的制作界面的示意图,如图6所示,图像时间轴处于未选中状态时,用户可以点击图像时间轴上的某个目标图像(即点击某个图像可以跳至该帧),画布会同步渲染该目标图像对应的帧,进度条到对应的位置。
本实施例一个可选的实施方式中,根据所述范围选择控件的移动信息,确定选择的图像范围之后,还包括:
对所述选择的图像范围进行标识。
需要说明的是,可以对用户选择的图像范围进行标识,从而使得用户可以清楚看到自己所选择的图像范围。具体实现时,可以将用户选择的图像范围进行高亮显示,还可以改变用户选择的图像范围内的图像的透明度,以和未选择的图像进行区分。当然,实际应用中还可以为其他的标识方式,本申请对此不进行限制。
本实施例一个可选的实施方式中,根据所述范围选择控件在所述图像时间轴中的相对位置,确定选择的图像范围之后,还包括:
在接收到针对选择的所述图像范围的处理操作的情况下,根据所述范围选择控件在所述图像时间轴中的相对位置和所述处理操作,确定更新图像范围。
具体的,针对所述图像范围的处理操作是指针对选取的图像范围内包括的全部图像对应的整体进行的处理操作,该处理操作可以为更新选择的图像范围的操作,如拖动整个选择框的操作;还可以为删除该图像范围内包括的全部图像的操作;另外,更新图像范围是指用户最终选定的图像范围,后续可以基于该更新图像范围内的图像合成所需的视频。
本实施例一个可选的实施方式中,根据所述范围选择控件在所述图像时间轴中的相对位置和所述处理操作,确定更新图像范围,具体实现过程可以如下:
接收针对选中的图像范围对应的选择框的移动操作;
根据移动后的所述选择框的位置,确定更新开始图像和更新结束图像;
根据所述更新开始图像和所述更新结束图像,确定所述更新图像范围。
需要说明的是,用户选择图像范围后,会形成一个选择框(该选择框中包括初始图像范围内的各个图像),用户可以拖动该选择框(即选中的图像范围),通过调整该选择框的位置,调整用户选择的开始图像和结束图像的位置,从而更新用户选中的图像范围。
实际实现时,在根据所述范围选择控件在所述图像时间轴中的相对位置,确定选择的图像范围后,可以记录图像范围中开始图像的帧索引,以及结束图像的帧索引。然后,当接收到针对选中的图像范围对应的选择框的移动操作时,可以确定该移动操作所移动的距离和方向,并计算移动的距离对应的图像帧数目,即移动了几帧图像,分别在开始图像的帧索引,以及结束图像的帧索引上增加或减去所述图像帧数目,就可以得到更新开始图像的帧索引,以及更新结束图像的帧索引,从而确定出更新图像范围。其中,沿着图像轴正方向移动,则增加所述图像帧数目,沿着图像轴反方向移动,则减去所述图像帧数目。
本实施例一个可选的实施方式中,接收针对所述初始图像范围的处理操作,并根据所述处理操作,确定目标图像范围,具体实现过程还可以如下:
接收针对所述初始图像范围内包括的图像的删除操作;
在所述图像时间轴中删除所述初始图像范围内包括的图像;
将所述图像时间轴中剩余的图像确定为所述目标图像范围。
实际实现时,在根据所述范围选择控件在所述图像时间轴中的相对位置,确定选择的图像范围后,可以记录图像范围中开始图像的帧索引,以及结束图像的帧索引。然后,当接收到针对图像范围内包括的图像的删除操作时,可以确定开始图像的帧索引和结束图像的帧索引之间的图像帧数目,在结束图像的帧索引上减去所述图像帧数目,即可得到更新的结束图像的帧索引,从而确定出更新图像范围。
需要说明的是,用户选择图像范围后,会形成一个选择框(该选择框中包括图像范围内的各个图像),用户可以直接删除该选择框(即选中的图像范围)中包括的全部图像,将剩余的图像确定为最终合成视频所需的更新图像范围。如此,当需要删除的图像帧相连且数量较多时,可以通过选择图像范围,一次性删除,提高了图像处理效率,从而可以提高视频合成效率。
步骤108:预览所述图像范围内的图像对应的动画效果,并根据预览结果合成对应的视频。
具体的,在根据所述范围选择控件在所述图像时间轴中的相对位置,确定选择的图像范围的基础上,进一步地,将预览所述图像范围内的图像对应的动画效果,并根据预览结果合成对应的视频。
需要说明的是,由于在浏览器提供的制作界面中为所述待制作图像创建对应的图像时间轴之后,还可以针对时间轴上待制作图像中的第一图像进行操作,从而得到对应的合成图像,因而在确定出图像范围后,需要预览图像范围内包括的图像对应的视频时,该图像范围内可能会包括处理得到的合成图像和未处理的第二图像,此时实际上是在所述浏览器提供的制作界面上预览所述图像范围内的合成图像和第二图像对应的视频。
其中,第二图像是指图像范围内所述待制作图像中除第一图像之外的图像,也即是,图像范围内可以包括进行了编辑操作的第一图像,以及未进行编辑操作的第二图像,在对图像范围内的图像进行预览时,针对第一图像,应该显示编辑操作后的合成图像,而针对第二图像,由于其未进行编辑操作,因而可以直接显示第二图像(即原图)。
本实施例一个可选的实施方式中,预览所述图像范围内的图像对应的动画效果,包括:
在接收到预览指令的情况下,获取预览参数;
根据所述预览参数,确定播放延迟时长;
确定所述图像范围内的开始图像的帧索引和结束图像的帧索引,并将所述开始图像的帧索引确定为预览帧索引;
将所述预览帧索引对应的合成图像渲染在所述浏览器提供的制作界面中的预览窗口内;
在所述播放延迟时长后,令所述预览帧索引自增1,返回执行将所述预览帧索引对应的合成图像渲染在所述浏览器提供的制作界面中的预览窗口内的操作步骤,直至所述预览帧索引等于所述结束图像对应的帧索引。
具体的,预览参数可以是指播放图像的速度。需要说明的是,用户可以直接点击浏览器提供的制作界面中的播放按钮,预览所有选中的图像范围内的合成图像和第二图像对应的视频效果,从而确定最终生成视频的效果是否符合预期,浏览器在播放该选中的图像范围内的合成图像和第二图像时,可以根据用户设置的延迟参数(即预览参数)来确定播放的快慢。也即是,当图像时间轴处于选中状态时,预览播放功能会限定在用户选中的图像范围内预览对应的合成图像和第二图像,不会预览其他未选中的图像对应的合成图像。
示例的,图像时间轴上包括图像1、图像2、图像3、图像4和图像5。假设用户选择的图像范围为图像2-图像4,且对图像2和图像3进行了剪裁操作,那么图像2和图像3为所述第一图像,图像4为所述第二图像,接收到预览指令的情况下,在浏览器提供的制作界面上显示图像2和图像3进行剪裁操作后的合成图像,以及图像4,供用户进行预览。
需要说明的是,为了便于用户快速预览视频的效果,本申请还提供了实时预览动画功能,浏览器可以记录当前渲染在画布区域内的图像的预览帧索引(即当前图像的位置),当点击播放时,浏览器会确定播放速率,并根据播放速率确定对应的播放延迟时长(即以每秒多少帧的速度预览),当当前图像渲染完,并且在播放延迟时长后,令预览索引自增1,渲染下一个图像,以此类推直至需要预览的图像全部渲染结束。
示例的,当预览参数为10FPS时,播放延迟时长为100毫秒,当当前图像渲染完并且在100毫秒延迟后,令预览帧索引自增1,进入渲染下一图像,以此类推直至需要的图像全部渲染结束。
本实施例一个可选的实施方式中,根据所述预览参数,在所述浏览器提供的制作界面上预览所述图像范围内的图像对应的视频之后,还包括:
在接收到针对显示进度条的拖动操作的情况下,确定所述拖动操作的停止位置;
确定所述停止位置对应的图像;
在所述浏览器提供的制作界面上预览所述图像。
需要说明的是,本申请中还可以通过点击/拖动进度条来快速跳转至某一个时间点所对应的图像,如果该时间点对应的图像为进行了编辑操作的第一图像,则显示编辑操作后的合成图像,如果该时间点对应的图像为没有进行编辑操作的第二图像,则直接显示第二图像。具体实现时,通过点击时间轴的某一帧快速定位至该帧所在位置,通过点击获取的index索引同步在画布上渲染该帧所对应的画面。
示例的,图7是本申请一实施例提供的第四种浏览器提供的制作界面的示意图,如图7所示,该浏览器提供的制作界面中包括选择视频/GIF/图片区域,用户可以通过该区域,上传所需的待制作图像;该浏览器提供的制作界面中还包括撤销/重做区域,通过该区域,用户可以撤销当前的操作;该浏览器提供的制作界面中还包括画布区域,该画布区域用于渲染用户选中的图像;该浏览器提供的制作界面中还包括播放的进度条,通过拖动该进度条,可以快速定位至某一帧图像;该浏览器提供的制作界面中还包括图像时间轴,该图像时间轴可以显示用户上传的全部待制作图像,且该图像时间轴上包括有范围选择控件,通过该拖动范围选择控件,用户可以自定义合成视频所需的图像范围;另外,该浏览器提供的制作界面中还包括延迟设置区域,以控制预览参数。
实际应用中,用户可以自定义所需预览的图像范围,然后预览该图像范围内的图像(合成图像和/或第二图像)生成的视频的动画效果,用户可以根据预览效果,返回调整选择的图像范围、预览参数等,或者针对某一合成图像,重新进行编辑操作,或者撤回相应的操作指令,直至预览效果符合用户期望后,用户可以点击生成控件,基于当前选择的图像范围内的图像,生成并导出对应的视频,后续即可通过对应的平台进行视频的广告投放。
示例的,用户可以选中第1-第10个图像,预览该范围内合成图像和第二图像对应的视频效果,然后再选中第5-第12个图像,预览该范围内合成图像和第二图像对应的视频效果,还可以再选中第3-第8个图像,预览该范围内合成图像和第二图像对应的视频效果,比较几种动画效果后,基于第5-第12个图像对应的合成图像和第二图像,生成并导出最终的视频。
本申请提供的视频制作方法,可以在浏览器提供的制作界面中显示基于待制作图像创建的图像时间轴,所述图像时间轴上包含范围选择控件;响应于所述范围选择控件的移动操作,确定所述范围选择控件在所述图像时间轴中的相对位置;根据所述范围选择控件在所述图像时间轴中的相对位置,确定选择的图像范围;预览所述图像范围内的图像对应的动画效果,并根据预览结果合成对应的视频。这种情况下,提供了一种基于浏览器的智能化视频制作方法,计算机上装有浏览器即可实现视频的制作,无需下载安装单独的应用程序,制作视频的门槛较低,缩减了制作视频的时间,提高了制作效率。另外,可以通过图像时间轴,自定义所需的图像范围,然后预览自定义的图像范围内的合成图像对应的动画效果,从而可以简单高效地合成用户所需的视频,提高视频的制作效率。再者,提供了类似于智能化裁剪图像、删除无用图像、撤回当前操作指令、实时预览动画效果等多种丰富的功能,操作简单,使得制作视频的效率大大提高。
下述结合附图8,以本申请提供的视频制作方法在GIF动画的应用为例,对所述视频制作方法进行进一步说明。其中,图8示出了本申请一实施例提供的一种应用于GIF动画的视频制作方法的处理流程图,具体包括以下步骤:
步骤802:用户进入GIF动画制作界面,通过所述GIF动画制作界面上的上传控件,选择视频/现有GIF动画,并提取视频或现有GIF动画的图像;和/或,选择多个静态图像,每张静态图像当做一帧图像。
步骤804:将获取到的所有图像渲染至图像时间轴上;画布区域渲染当前选中图像,针对画布区域当前渲染的图像,进行撤销/重做操作;在画布区域,通过剪裁框调整GIF尺寸;在图像时间轴上执行选取图像范围、分帧删除等操作;实时预览动画效果。
步骤806:确定动画效果是否符合预期,若是,执行下述步骤808,若否,则返回执行步骤804,或者清空当前上传的图像,重新返回执行上述步骤802。
步骤808:生成对应的GIF动画,并进行保存、投放。
本申请提供了一种基于浏览器的智能化视频制作方法,计算机上装有浏览器即可实现GIF动画的制作,无需下载安装单独的应用程序,制作GIF动画的门槛较低,缩减了制作GIF动画的时间,提高了制作效率。另外,可以通过图像时间轴,自定义所需的图像范围,然后预览自定义的图像范围内的合成图像对应的动画效果,从而可以简单高效地合成用户所需的GIF动画,提高GIF动画的制作效率。再者,提供了类似于智能化裁剪图像、删除无用图像、撤回当前操作指令、实时预览动画效果等多种丰富的功能,操作简单,使得制作GIF动画的效率大大提高
图9示出了本申请一实施例提供的又一种视频制作方法的流程图,应用于浏览器中,具体包括以下步骤:
步骤902:在接收到针对范围选择控件的移动操作的情况下,确定所述范围选择控件的第一距离、图像时间轴的滚动距离以及所述图像时间轴的第二距离。
其中,所述范围选择控件为所述浏览器提供的制作界面中图像时间轴上设置的选择图像范围的控件,所述范围选择控件的第一距离为所述范围选择控件相对于浏览器提供的制作界面的第一边界的距离,所述图像时间轴的第二距离为所述图像时间轴的区域边界相对于所述浏览器提供的制作界面的第一边界的距离。
步骤904:根据所述第一距离、所述滚动距离和所述第二距离,确定所述范围选择控件在所述图像时间轴中的相对位置。
步骤906:根据所述范围选择控件在所述图像时间轴中的相对位置,确定选择的图像范围。
步骤908:预览所述图像范围内的图像对应的动画效果,并根据预览结果合成对应的视频。
本申请提供了一种基于浏览器的智能化视频制作方法,计算机上装有浏览器即可实现视频的制作,无需下载安装单独的应用程序,制作视频的门槛较低,缩减了制作视频的时间,提高了制作效率。另外,可以通过图像时间轴,自定义所需的图像范围,然后预览自定义的图像范围内的合成图像对应的动画效果,从而可以简单高效地合成用户所需的视频,提高视频的制作效率。
上述图9所示的为本实施例的一种视频制作方法的示意性方案。需要说明的是,图9所示的视频制作方法的技术方案与上述图1所示的视频制作方法的技术方案属于同一构思,图9所示的视频制作方法的技术方案未详细描述的细节内容,均可以参见上述图1所示的视频制作方法的技术方案的描述。
与上述方法实施例相对应,本申请还提供了视频制作装置实施例,图10示出了本申请一实施例提供的一种视频制作装置的结构示意图。如图10所示,该装置包括:
显示模块1002,被配置为在所述浏览器提供的制作界面中显示基于待制作图像创建的图像时间轴,所述图像时间轴上包含范围选择控件;
第一确定模块1004,被配置为响应于所述范围选择控件的移动操作,确定所述范围选择控件在所述图像时间轴中的相对位置;
第二确定模块1006,被配置为根据所述范围选择控件在所述图像时间轴中的相对位置,确定选择的图像范围;
合成模块1008,被配置为预览所述图像范围内的图像对应的动画效果,并根据预览结果合成对应的视频。
可选地,第一确定模块1004进一步被配置为:
确定所述范围选择控件相对于所述浏览器提供的制作界面的第一边界的第一距离、图像时间轴的滚动距离以及所述图像时间轴的区域边界相对于所述浏览器提供的制作界面的第一边界的第二距离;
根据所述第一距离、所述滚动距离和所述第二距离,确定所述范围选择控件在所述图像时间轴中的相对位置。
可选地,所述装置还包括第三确定模块,被配置为:
在接收到针对选择的所述图像范围的处理操作的情况下,根据所述范围选择控件在所述图像时间轴中的相对位置和所述处理操作,确定更新图像范围。
可选地,所述装置还包括上传模块,所述上传模块被配置为:
在接收到数据选择指令的情况下,获取上传的待制作图像;
根据上传的待制作图像和预设显示规则,在所述浏览器提供的制作界面中为所述待制作图像创建对应的图像时间轴。
可选地,所述上传模块进一步被配置为以下至少之一:
在接收到第一数据选择指令的情况下,获取所述第一数据选择指令对应的目标视频,从所述目标视频中提取所述待制作图像;
在接收到第二数据选择指令的情况下,获取所述第二数据选择指令对应的目标图像,将所述目标图像确定为所述待制作图像;
在接收到第三数据选择指令的情况下,获取所述第三数据选择指令对应的GIF图像,将所述GIF图像确定为所述待制作图像。
可选地,所述上传模块进一步被配置为:
根据所述目标视频的每秒播放帧数,确定对应的提取精细度;
根据所述提取精细度,确定待提取的每帧视频的时长;
根据所述每帧视频的时长,从所述目标视频中提取所述待制作图像。
可选地,所述上传模块进一步被配置为:
实时播放所述目标视频,计算下一视频帧在所述目标视频中的时间点;
将所述目标视频的播放进度跳转至所述时间点,并暂停所述目标视频,获取当前视频帧;
将所述当前视频帧渲染至所述浏览器的画布上,并将所述画布上的视频帧转换成图像进行保存,得到所述待制作图像,返回执行上述计算下一视频帧在所述目标视频中的时间点的操作步骤,直至目标视频播放完毕。
可选地,合成模块1008进一步被配置为:
在接收到预览指令的情况下,获取预览参数;
根据所述预览参数,确定播放延迟时长;
确定所述图像范围内的开始图像的帧索引和结束图像的帧索引,并将所述开始图像的帧索引确定为预览帧索引;
将所述预览帧索引对应的合成图像渲染在所述浏览器提供的制作界面中的预览窗口内;
在所述播放延迟时长后,令所述预览帧索引自增1,返回执行将所述预览帧索引对应的合成图像渲染在所述浏览器提供的制作界面中的预览窗口内的操作步骤,直至所述预览帧索引等于所述结束图像对应的帧索引。
可选地,第二确定模块1006进一步被配置为:
将所述范围选择控件在所述图像时间轴中的相对位置确定为所述范围选择控件的停止位置;
将所述停止位置映射至所述图像时间轴上,确定对应的帧索引;
根据所述帧索引,确定选择的图像范围。
可选地,所述上传模块进一步被配置为:
确定所述图像时间轴上被选中的目标图像,所述图像时间轴上每个单位时间对应一个图像;
根据所述目标图像的尺寸,将所述目标图像渲染至所述浏览器提供的制作界面中的画布区域。
可选地,所述上传模块进一步被配置为:
在所述画布区域显示剪裁框,所述剪裁框位于所述目标图像的图像区域内,所述剪裁框的面积不大于所述目标图像;
接收针对所述剪裁框的控制操作,根据所述控制操作生成所述目标图像对应的合成图像。
可选地,所述上传模块进一步被配置为:
将所述目标图像确定为所述画布区域的底层图像;
在所述底层图像上添加剪裁框,所述剪裁框与所述目标图像位于不同的图层上;
在所述底层图像与所述剪裁框之间添加蒙层,所述蒙层用于区分剪裁框选中区域和未选中区域。
可选地,所述上传模块进一步被配置为:
根据针对所述剪裁框的控制操作,确定所述剪裁框的位置;
确定所述剪裁框相对于所述底层图像的位置参数;
根据所述位置参数,获取所述目标图像中对应的图像数据;
将获取到的所述图像数据确定为所述合成图像,并在所述浏览器提供的制作界面中的裁剪预览区域进行显示。
可选地,所述上传模块进一步被配置为:
存储所述控制操作后的图像数据;
确定所述控制操作的操作类型;
将所述控制操作和对应的操作类型添加至操作列表中;
根据所述操作列表中包括的控制操作的指令索引,设置新添加的控制操作对应的指令索引。
可选地,所述上传模块进一步被配置为:
在接收到撤回指令的情况下,撤销当前控制操作对应的操作,将所述浏览器提供的制作界面中画布区域内显示的合成图像恢复至操作前的状态。
可选地,所述上传模块进一步被配置为:
在接收到所述撤回指令的情况下,确定当前控制操作的操作类型;
在所述操作列表中确定所述操作类型的目标控制操作;
获取所述目标控制操作对应的图像数据,并更新当前控制操作的指令索引为所述目标控制操作的指令索引;
将所述浏览器提供的制作界面中的画布区域恢复为所述图像数据对应的图像。
本申请提供了一种基于浏览器的智能化视频制作装置,计算机上装有浏览器即可实现视频的制作,无需下载安装单独的应用程序,制作视频的门槛较低,缩减了制作视频的时间,提高了制作效率。另外,可以通过图像时间轴,自定义所需的图像范围,然后预览自定义的图像范围内的合成图像对应的动画效果,从而可以简单高效地合成用户所需的视频,提高视频的制作效率。再者,提供了类似于智能化裁剪图像、删除无用图像、撤回当前操作指令、实时预览动画效果等多种丰富的功能,操作简单,使得制作视频的效率大大提高。
上述为本实施例的一种视频制作装置的示意性方案。需要说明的是,该视频制作装置的技术方案与上述的视频制作方法的技术方案属于同一构思,视频制作装置的技术方案未详细描述的细节内容,均可以参见上述视频制作方法的技术方案的描述。
图11示出了根据本申请一实施例提供的一种计算设备1100的结构框图。该计算设备1100的部件包括但不限于存储器1110和处理器1120。处理器1120与存储器1110通过总线1130相连接,数据库1150用于保存数据。
计算设备1100还包括接入设备1140,接入设备1140使得计算设备1100能够经由一个或多个网络1160通信。这些网络的示例包括公用交换电话网(PSTN)、局域网(LAN)、广域网(WAN)、个域网(PAN)或诸如因特网的通信网络的组合。接入设备1140可以包括有线或无线的任何类型的网络接口(例如,网络接口卡(NIC))中的一个或多个,诸如IEEE802.11无线局域网(WLAN)无线接口、全球微波互联接入(Wi-MAX)接口、以太网接口、通用串行总线(USB)接口、蜂窝网络接口、蓝牙接口、近场通信(NFC)接口,等等。
在本申请的一个实施例中,计算设备1100的上述部件以及图11中未示出的其他部件也可以彼此相连接,例如通过总线。应当理解,图11所示的计算设备结构框图仅仅是出于示例的目的,而不是对本申请范围的限制。本领域技术人员可以根据需要,增添或替换其他部件。
计算设备1100可以是任何类型的静止或移动计算设备,包括移动计算机或移动计算设备(例如,平板计算机、个人数字助理、膝上型计算机、笔记本计算机、上网本等)、移动电话(例如,智能手机)、可佩戴的计算设备(例如,智能手表、智能眼镜等)或其他类型的移动设备,或者诸如台式计算机或PC的静止计算设备。计算设备1100还可以是移动式或静止式的服务器。
其中,处理器1120用于执行如下计算机可执行指令:
在所述浏览器提供的制作界面中显示基于待制作图像创建的图像时间轴,所述图像时间轴上包含范围选择控件;
响应于所述范围选择控件的移动操作,确定所述范围选择控件在所述图像时间轴中的相对位置;
根据所述范围选择控件在所述图像时间轴中的相对位置,确定选择的图像范围;
预览所述图像范围内的图像对应的动画效果,并根据预览结果合成对应的视频。
上述为本实施例的一种计算设备的示意性方案。需要说明的是,该计算设备的技术方案与上述的视频制作方法的技术方案属于同一构思,计算设备的技术方案未详细描述的细节内容,均可以参见上述视频制作方法的技术方案的描述。
本申请一实施例还提供一种计算机可读存储介质,其存储有计算机可执行指令,该计算机可执行指令被处理器执行时以用于实现上述视频制作方法的操作步骤。
上述为本实施例的一种计算机可读存储介质的示意性方案。需要说明的是,该存储介质的技术方案与上述的视频制作方法的技术方案属于同一构思,存储介质的技术方案未详细描述的细节内容,均可以参见上述视频制作方法的技术方案的描述。
上述对本申请特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下,在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外,在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中,多任务处理和并行处理也是可以的或者可能是有利的。
所述计算机指令包括计算机程序代码,所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括:能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM,Read-Only Memory)、随机存取存储器(RAM,Random Access Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是,所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减,例如在某些司法管辖区,根据立法和专利实践,计算机可读介质不包括电载波信号和电信信号。
需要说明的是,对于前述的各方法实施例,为了简便描述,故将其都表述为一系列的动作组合,但是本领域技术人员应该知悉,本申请并不受所描述的动作顺序的限制,因为依据本申请,某些步骤可以采用其它顺序或者同时进行。其次,本领域技术人员也应该知悉,说明书中所描述的实施例均属于优选实施例,所涉及的动作和模块并不一定都是本申请所必须的。
在上述实施例中,对各个实施例的描述都各有侧重,某个实施例中没有详述的部分,可以参见其它实施例的相关描述。
以上公开的本申请优选实施例只是用于帮助阐述本申请。可选实施例并没有详尽叙述所有的细节,也不限制该发明仅为所述的具体实施方式。显然,根据本申请的内容,可作很多的修改和变化。本申请选取并具体描述这些实施例,是为了更好地解释本申请的原理和实际应用,从而使所属技术领域技术人员能很好地理解和利用本申请。本申请仅受权利要求书及其全部范围和等效物的限制。

Claims (19)

1.一种视频制作方法,其特征在于,应用于浏览器中,包括:
在所述浏览器提供的制作界面中显示基于待制作图像创建的图像时间轴,所述图像时间轴上包含范围选择控件;
响应于所述范围选择控件的移动操作,确定所述范围选择控件在所述图像时间轴中的相对位置;
根据所述范围选择控件在所述图像时间轴中的相对位置,确定选择的图像范围;
预览所述图像范围内的图像对应的动画效果,并根据预览结果合成对应的视频。
2.根据权利要求1所述的视频制作方法,其特征在于,响应于所述范围选择控件的移动操作,确定所述范围选择控件在所述图像时间轴中的相对位置,包括:
确定所述范围选择控件相对于所述浏览器提供的制作界面的第一边界的第一距离、图像时间轴的滚动距离以及所述图像时间轴的区域边界相对于所述浏览器提供的制作界面的第一边界的第二距离;
根据所述第一距离、所述滚动距离和所述第二距离,确定所述范围选择控件在所述图像时间轴中的相对位置。
3.根据权利要求1所述的视频制作方法,其特征在于,根据所述范围选择控件在所述图像时间轴中的相对位置,确定选择的图像范围之后,还包括:
在接收到针对选择的所述图像范围的处理操作的情况下,根据所述范围选择控件在所述图像时间轴中的相对位置和所述处理操作,确定更新图像范围。
4.根据权利要求1所述的视频制作方法,其特征在于,在所述浏览器提供的制作界面中显示基于待制作图像创建的图像时间轴,所述图像时间轴上包含范围选择控件之前,还包括:
在接收到数据选择指令的情况下,获取上传的待制作图像;
根据上传的待制作图像和预设显示规则,在所述浏览器提供的制作界面中为所述待制作图像创建对应的图像时间轴。
5.根据权利要求4所述的视频制作方法,其特征在于,在接收到数据选择指令的情况下,获取上传的待制作图像包括以下至少之一:
在接收到第一数据选择指令的情况下,获取所述第一数据选择指令对应的目标视频,从所述目标视频中提取所述待制作图像;
在接收到第二数据选择指令的情况下,获取所述第二数据选择指令对应的目标图像,将所述目标图像确定为所述待制作图像;
在接收到第三数据选择指令的情况下,获取所述第三数据选择指令对应的GIF图像,将所述GIF图像确定为所述待制作图像。
6.根据权利要求5所述的视频制作方法,其特征在于,从所述目标视频中提取所述待制作图像,包括:
根据所述目标视频的每秒播放帧数,确定对应的提取精细度;
根据所述提取精细度,确定待提取的每帧视频的时长;
根据所述每帧视频的时长,从所述目标视频中提取所述待制作图像。
7.根据权利要求6所述的视频制作方法,其特征在于,根据所述每帧视频的时长,从所述目标视频中提取所述待制作图像,包括:
实时播放所述目标视频,计算下一视频帧在所述目标视频中的时间点;
将所述目标视频的播放进度跳转至所述时间点,并暂停所述目标视频,获取当前视频帧;
将所述当前视频帧渲染至所述浏览器的画布上,并将所述画布上的视频帧转换成图像进行保存,得到所述待制作图像,返回执行上述计算下一视频帧在所述目标视频中的时间点的操作步骤,直至目标视频播放完毕。
8.根据权利要求1-7任一所述的视频制作方法,其特征在于,预览所述图像范围内的图像对应的动画效果,包括:
在接收到预览指令的情况下,获取预览参数;
根据所述预览参数,确定播放延迟时长;
确定所述图像范围内的开始图像的帧索引和结束图像的帧索引,并将所述开始图像的帧索引确定为预览帧索引;
将所述预览帧索引对应的合成图像渲染在所述浏览器提供的制作界面中的预览窗口内;
在所述播放延迟时长后,令所述预览帧索引自增1,返回执行将所述预览帧索引对应的合成图像渲染在所述浏览器提供的制作界面中的预览窗口内的操作步骤,直至所述预览帧索引等于所述结束图像对应的帧索引。
9.根据权利要求1-7任一所述的视频制作方法,其特征在于,根据所述范围选择控件在所述图像时间轴中的相对位置,确定选择的图像范围,包括:
将所述范围选择控件在所述图像时间轴中的相对位置映射至所述图像时间轴上,确定对应的帧索引;
根据所述帧索引,确定选择的图像范围。
10.根据权利要求4所述的视频制作方法,其特征在于,根据上传的待制作图像和预设显示规则,在所述浏览器提供的制作界面中为所述待制作图像创建对应的图像时间轴之后,还包括:
确定所述图像时间轴上被选中的目标图像,所述图像时间轴上每个单位时间对应一个图像;
根据所述目标图像的尺寸,将所述目标图像渲染至所述浏览器提供的制作界面中的画布区域。
11.根据权利要求10所述的视频制作方法,其特征在于,根据所述目标图像的尺寸,将所述目标图像渲染至所述浏览器提供的制作界面中的画布区域之后,还包括:
在所述画布区域显示剪裁框,所述剪裁框位于所述目标图像的图像区域内,所述剪裁框的面积不大于所述目标图像;
接收针对所述剪裁框的控制操作,根据所述控制操作生成所述目标图像对应的合成图像。
12.根据权利要求11所述的视频制作方法,其特征在于,在所述画布区域显示剪裁框,包括:
将所述目标图像确定为所述画布区域的底层图像;
在所述底层图像上添加剪裁框,所述剪裁框与所述目标图像位于不同的图层上;
在所述底层图像与所述剪裁框之间添加蒙层,所述蒙层用于区分剪裁框选中区域和未选中区域。
13.根据权利要求12所述的视频制作方法,其特征在于,接收针对所述剪裁框的控制操作,根据所述控制操作生成所述目标图像对应的合成图像,包括:
根据针对所述剪裁框的控制操作,确定所述剪裁框的位置;
确定所述剪裁框相对于所述底层图像的位置参数;
根据所述位置参数,获取所述目标图像中对应的图像数据;
将获取到的所述图像数据确定为所述合成图像,并在所述浏览器提供的制作界面中的裁剪预览区域进行显示。
14.根据权利要求11所述的视频制作方法,其特征在于,接收针对所述剪裁框的控制操作,根据所述控制操作生成所述目标图像对应的合成图像之后,还包括:
存储所述控制操作后的图像数据;
确定所述控制操作的操作类型;
将所述控制操作和对应的操作类型添加至操作列表中;
根据所述操作列表中包括的控制操作的指令索引,设置新添加的控制操作对应的指令索引。
15.根据权利要求14所述的视频制作方法,其特征在于,接收针对所述剪裁框的控制操作,根据所述控制操作生成所述目标图像对应的合成图像之后,还包括:
在接收到撤回指令的情况下,撤销当前控制操作对应的操作,将所述浏览器提供的制作界面中画布区域内显示的合成图像恢复至操作前的状态。
16.根据权利要求15所述的视频制作方法,其特征在于,撤销当前控制操作对应的操作,将所述浏览器提供的制作界面中画布区域内显示的合成图像恢复至操作前的状态,包括:
在接收到所述撤回指令的情况下,确定当前控制操作的操作类型;
在所述操作列表中确定所述操作类型的目标控制操作;
获取所述目标控制操作对应的图像数据,并更新当前控制操作的指令索引为所述目标控制操作的指令索引;
将所述浏览器提供的制作界面中的画布区域恢复为所述图像数据对应的图像。
17.一种视频制作装置,其特征在于,应用于浏览器中,包括:
显示模块,被配置为在所述浏览器提供的制作界面中显示基于待制作图像创建的图像时间轴,所述图像时间轴上包含范围选择控件;
第一确定模块,被配置为响应于所述范围选择控件的移动操作,确定所述范围选择控件在所述图像时间轴中的相对位置;
第二确定模块,被配置为根据所述范围选择控件在所述图像时间轴中的相对位置,确定选择的图像范围;
合成模块,被配置为预览所述图像范围内的图像对应的动画效果,并根据预览结果合成对应的视频。
18.一种计算设备,其特征在于,包括:
存储器和处理器;
所述存储器用于存储计算机可执行指令,所述处理器用于执行所述计算机可执行指令,以实现下述方法:
在浏览器提供的制作界面中显示基于待制作图像创建的图像时间轴,所述图像时间轴上包含范围选择控件;
响应于所述范围选择控件的移动操作,确定所述范围选择控件在所述图像时间轴中的相对位置;
根据所述范围选择控件在所述图像时间轴中的相对位置,确定选择的图像范围;
预览所述图像范围内的图像对应的动画效果,并根据预览结果合成对应的视频。
19.一种计算机可读存储介质,其特征在于,其存储有计算机可执行指令,该计算机可执行指令被处理器执行时实现权利要求1至16任意一项所述视频制作方法的步骤。
CN202110350554.4A 2021-03-31 2021-03-31 视频制作方法及装置 Pending CN113099287A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110350554.4A CN113099287A (zh) 2021-03-31 2021-03-31 视频制作方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110350554.4A CN113099287A (zh) 2021-03-31 2021-03-31 视频制作方法及装置

Publications (1)

Publication Number Publication Date
CN113099287A true CN113099287A (zh) 2021-07-09

Family

ID=76672077

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110350554.4A Pending CN113099287A (zh) 2021-03-31 2021-03-31 视频制作方法及装置

Country Status (1)

Country Link
CN (1) CN113099287A (zh)

Cited By (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113873329A (zh) * 2021-10-19 2021-12-31 深圳追一科技有限公司 视频处理方法、装置、计算机存储介质及电子设备
CN113938619A (zh) * 2021-10-28 2022-01-14 稿定(厦门)科技有限公司 一种基于浏览器的视频合成方法、***、储存装置
CN114363697A (zh) * 2022-01-06 2022-04-15 上海哔哩哔哩科技有限公司 视频文件生成、播放方法及装置
CN114915850A (zh) * 2022-04-22 2022-08-16 网易(杭州)网络有限公司 一种视频播放控制方法、装置、电子设备及存储介质
CN115278307A (zh) * 2022-07-27 2022-11-01 天翼云科技有限公司 一种视频播放方法、装置、设备和介质
CN117114978A (zh) * 2023-10-24 2023-11-24 深圳软牛科技有限公司 基于iOS的图片裁剪与还原方法、装置及其相关介质
CN117714774A (zh) * 2024-02-06 2024-03-15 北京美摄网络科技有限公司 视频特效封面的制作方法、装置、电子设备及存储介质

Citations (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070174774A1 (en) * 2005-04-20 2007-07-26 Videoegg, Inc. Browser editing with timeline representations
CN101740082A (zh) * 2009-11-30 2010-06-16 孟智平 一种基于浏览器的视频剪辑方法及***
US20100259645A1 (en) * 2009-04-13 2010-10-14 Pure Digital Technologies Method and system for still image capture from video footage
US20120321280A1 (en) * 2011-06-17 2012-12-20 Ken Kengkuan Lin Picture Selection for Video Skimming
CN106210451A (zh) * 2016-08-02 2016-12-07 成都索贝数码科技股份有限公司 一种基于html5的多轨道视频编辑的方法及***
CN106791933A (zh) * 2017-01-20 2017-05-31 杭州当虹科技有限公司 基于web端的在线快速编辑视频的方法和***
CN108040288A (zh) * 2017-12-20 2018-05-15 北京达佳互联信息技术有限公司 视频编辑方法、装置及智能移动终端
CN108965397A (zh) * 2018-06-22 2018-12-07 中央电视台 云端视频编辑方法及装置、编辑设备及存储介质
CN110389796A (zh) * 2019-07-01 2019-10-29 北京字节跳动网络技术有限公司 编辑操作处理方法、装置及电子设备
CN110401878A (zh) * 2019-07-08 2019-11-01 天脉聚源(杭州)传媒科技有限公司 一种视频剪辑方法、***及存储介质
CN110868631A (zh) * 2018-08-28 2020-03-06 腾讯科技(深圳)有限公司 视频剪辑方法、装置、终端及存储介质
CN111163358A (zh) * 2020-01-07 2020-05-15 广州虎牙科技有限公司 Gif图像生成方法、装置、服务器及存储介质
CN111612873A (zh) * 2020-05-29 2020-09-01 维沃移动通信有限公司 Gif图片生成方法、装置及电子设备

Patent Citations (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070174774A1 (en) * 2005-04-20 2007-07-26 Videoegg, Inc. Browser editing with timeline representations
US20100259645A1 (en) * 2009-04-13 2010-10-14 Pure Digital Technologies Method and system for still image capture from video footage
CN101740082A (zh) * 2009-11-30 2010-06-16 孟智平 一种基于浏览器的视频剪辑方法及***
US20120321280A1 (en) * 2011-06-17 2012-12-20 Ken Kengkuan Lin Picture Selection for Video Skimming
CN106210451A (zh) * 2016-08-02 2016-12-07 成都索贝数码科技股份有限公司 一种基于html5的多轨道视频编辑的方法及***
CN106791933A (zh) * 2017-01-20 2017-05-31 杭州当虹科技有限公司 基于web端的在线快速编辑视频的方法和***
CN108040288A (zh) * 2017-12-20 2018-05-15 北京达佳互联信息技术有限公司 视频编辑方法、装置及智能移动终端
CN108965397A (zh) * 2018-06-22 2018-12-07 中央电视台 云端视频编辑方法及装置、编辑设备及存储介质
CN110868631A (zh) * 2018-08-28 2020-03-06 腾讯科技(深圳)有限公司 视频剪辑方法、装置、终端及存储介质
CN110389796A (zh) * 2019-07-01 2019-10-29 北京字节跳动网络技术有限公司 编辑操作处理方法、装置及电子设备
CN110401878A (zh) * 2019-07-08 2019-11-01 天脉聚源(杭州)传媒科技有限公司 一种视频剪辑方法、***及存储介质
CN111163358A (zh) * 2020-01-07 2020-05-15 广州虎牙科技有限公司 Gif图像生成方法、装置、服务器及存储介质
CN111612873A (zh) * 2020-05-29 2020-09-01 维沃移动通信有限公司 Gif图片生成方法、装置及电子设备

Cited By (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113873329A (zh) * 2021-10-19 2021-12-31 深圳追一科技有限公司 视频处理方法、装置、计算机存储介质及电子设备
CN113938619A (zh) * 2021-10-28 2022-01-14 稿定(厦门)科技有限公司 一种基于浏览器的视频合成方法、***、储存装置
CN114363697A (zh) * 2022-01-06 2022-04-15 上海哔哩哔哩科技有限公司 视频文件生成、播放方法及装置
CN114363697B (zh) * 2022-01-06 2024-04-26 上海哔哩哔哩科技有限公司 视频文件生成、播放方法及装置
CN114915850A (zh) * 2022-04-22 2022-08-16 网易(杭州)网络有限公司 一种视频播放控制方法、装置、电子设备及存储介质
CN114915850B (zh) * 2022-04-22 2023-09-12 网易(杭州)网络有限公司 一种视频播放控制方法、装置、电子设备及存储介质
CN115278307A (zh) * 2022-07-27 2022-11-01 天翼云科技有限公司 一种视频播放方法、装置、设备和介质
CN115278307B (zh) * 2022-07-27 2023-08-04 天翼云科技有限公司 一种视频播放方法、装置、设备和介质
CN117114978A (zh) * 2023-10-24 2023-11-24 深圳软牛科技有限公司 基于iOS的图片裁剪与还原方法、装置及其相关介质
CN117114978B (zh) * 2023-10-24 2024-03-29 深圳软牛科技集团股份有限公司 基于iOS的图片裁剪与还原方法、装置及其相关介质
CN117714774A (zh) * 2024-02-06 2024-03-15 北京美摄网络科技有限公司 视频特效封面的制作方法、装置、电子设备及存储介质
CN117714774B (zh) * 2024-02-06 2024-04-19 北京美摄网络科技有限公司 视频特效封面的制作方法、装置、电子设备及存储介质

Similar Documents

Publication Publication Date Title
CN113099287A (zh) 视频制作方法及装置
EP3758364B1 (en) Dynamic emoticon-generating method, computer-readable storage medium and computer device
US11082377B2 (en) Scripted digital media message generation
CN113099288A (zh) 视频制作方法及装置
CN111935504B (zh) 视频制作方法、装置、设备及存储介质
CN104540028B (zh) 一种基于移动平台的视频美化交互体验***
US10728197B2 (en) Unscripted digital media message generation
KR20230042523A (ko) 멀티미디어 데이터의 처리 방법, 생성 방법 및 관련 기기
CN111935505B (zh) 视频封面生成方法、装置、设备及存储介质
CN108924622B (zh) 一种视频处理方法及其设备、存储介质、电子设备
US20060268007A1 (en) Methods for Providing Information Services Related to Visual Imagery
US11394888B2 (en) Personalized videos
CN110413185A (zh) 用于指定链接目的地和用于观看者的界面装置和记录介质
CN112887794B (zh) 视频剪辑方法及装置
CN114693827A (zh) 表情生成方法、装置、计算机设备和存储介质
CN108614657B (zh) 图像合成方法、装置、设备及其图像载体
CN113852757B (zh) 视频处理方法、装置、设备和存储介质
CN106021322A (zh) 一种多功能图像输入方法
CN115904168A (zh) 基于多设备的影像素材处理方法及相关装置
JP2001119666A (ja) ビデオシーケンスの対話型処理方法と、その記憶媒体およびシステム
CN113873319A (zh) 视频处理方法、装置、电子设备及存储介质
KR20140127131A (ko) 영상 출력 방법 및 그 방법을 처리하는 전자장치
CN114025103A (zh) 视频制作方法及装置
CN114237800A (zh) 文件处理方法、文件处理装置、电子设备及介质
CN111951353A (zh) 电子相册的合成方法、装置、设备及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination