CN112418902A - 基于网页的多媒体合成方法和系统 - Google Patents
基于网页的多媒体合成方法和系统 Download PDFInfo
- Publication number
- CN112418902A CN112418902A CN202010549356.6A CN202010549356A CN112418902A CN 112418902 A CN112418902 A CN 112418902A CN 202010549356 A CN202010549356 A CN 202010549356A CN 112418902 A CN112418902 A CN 112418902A
- Authority
- CN
- China
- Prior art keywords
- static
- css
- frame
- animation
- frame animation
- 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
Links
- 238000001308 synthesis method Methods 0.000 title claims abstract description 7
- 230000003068 static effect Effects 0.000 claims abstract description 169
- 230000008859 change Effects 0.000 claims abstract description 65
- 230000000694 effects Effects 0.000 claims abstract description 35
- 230000033001 locomotion Effects 0.000 claims description 60
- 238000000034 method Methods 0.000 claims description 58
- 239000000203 mixture Substances 0.000 claims description 35
- 238000004590 computer program Methods 0.000 claims description 10
- 230000002194 synthesizing effect Effects 0.000 claims description 10
- 239000012634 fragment Substances 0.000 claims description 7
- 238000006243 chemical reaction Methods 0.000 abstract description 2
- 230000008569 process Effects 0.000 description 11
- 238000010586 diagram Methods 0.000 description 9
- 230000000007 visual effect Effects 0.000 description 7
- 230000006870 function Effects 0.000 description 6
- 238000012545 processing Methods 0.000 description 6
- 230000015572 biosynthetic process Effects 0.000 description 5
- 238000003786 synthesis reaction Methods 0.000 description 5
- 238000004364 calculation method Methods 0.000 description 4
- 238000004891 communication Methods 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 2
- 238000004904 shortening Methods 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 239000002131 composite material Substances 0.000 description 1
- 230000008094 contradictory effect Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 230000010365 information processing Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000012886 linear function Methods 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
- 230000007704 transition Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
- G06Q30/00—Commerce
- G06Q30/02—Marketing; Price estimation or determination; Fundraising
- G06Q30/0241—Advertisements
- G06Q30/0277—Online advertisement
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
- G06Q30/00—Commerce
- G06Q30/06—Buying, selling or leasing transactions
- G06Q30/0601—Electronic shopping [e-shopping]
- G06Q30/0641—Shopping interfaces
- G06Q30/0643—Graphical representation of items or shoppers
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
Landscapes
- Engineering & Computer Science (AREA)
- Business, Economics & Management (AREA)
- Theoretical Computer Science (AREA)
- Finance (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Accounting & Taxation (AREA)
- Strategic Management (AREA)
- Development Economics (AREA)
- Marketing (AREA)
- Economics (AREA)
- Databases & Information Systems (AREA)
- General Business, Economics & Management (AREA)
- General Engineering & Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Entrepreneurship & Innovation (AREA)
- Game Theory and Decision Science (AREA)
- Processing Or Creating Images (AREA)
Abstract
本申请公开了一种基于网页的多媒体合成方法，包括：将静态图加载到内置JavaScript文件的网页中，并将所述静态图显示在所述网页中；确定所述网页中的活动区域；确定所述静态图在所述活动区域中的变化参数，所述变化参数包括起点坐标、起点尺寸、终点坐标和/或终点尺寸；确定是否执行帧动画操作；如果确定执行所述帧动画操作，则通过所述JavaScript文件执行以下操作：基于所述变化参数，将所述静态图转化为帧动画。本申请实施例包括以下优势：(1)本实施例可以将静态图转换为帧动画，提升显示效果和用户体验：(2)无需通过诸如iMovie这种专门工具，本实施例通过内置JavaScript文件的网页，实现了将静态图转换为帧动画，具有更高的通用性和可定制性。
Description
技术领域
本申请实施例涉及计算机技术领域，尤其涉及一种基于网页的多媒体合成方法、系统、计算机设备及计算机可读存储介质。
背景技术
随着互联网业务的发展，人们开始越来越多的借助网络平台进行生活娱乐和各类交易等。如何将商品或服务信息通过网络曝光给客户或潜在客户，成为各方关注的问题。其中，广为人知的解决方式之一是通过在网页上投放广告或展示商品详情页等。广告或商品详情页的价值在于吸引用户点击和消费。
大多数广告或商品详情页是以静态图片的形式呈现给用户，显示效果较差，对用户吸引力较低。当然，也有一些广告将静态图片以动画的形式呈现的，其显示效果优于静态图片。但是，在现有技术中，将静态图片转换为动画，往往需要专门工具。以视频剪辑软件iMovie为例，软件本身太笨重，通用性差，且不够定制化。
需要说明的是，上述内容并不用于限制申请保护范围。
发明内容
本申请实施例的目的是提供一种基于网页的多媒体合成方法、系统、计算机设备及计算机可读存储介质，在于解决静态图显示效果差，以及将静态图转换为动画需要专用独立工具且工具本身笨重、通用性差、不够定制化等问题。
本申请实施例的一个方面提供了一种基于网页的多媒体合成方法，包括：将静态图加载到内置JavaScript文件的网页中，并将所述静态图显示在所述网页中；确定所述网页中的活动区域；确定所述静态图在所述活动区域中的变化参数，所述变化参数包括起点坐标、起点尺寸、终点坐标和/或终点尺寸；确定是否执行帧动画操作；及如果确定执行所述帧动画操作，则通过所述JavaScript文件执行以下操作：基于所述变化参数，将所述静态图转化为帧动画。
可选的，将所述静态图转化为所述帧动画，包括：根据所述起点坐标、所述起点尺寸、所述终点坐标和所述终点尺寸，确定所述静态图的最大运动时间；根据所述最大运动时间设置片段时间，所述片段时间不大于所述最大运动时间；根据所述片段时间和预设的帧率确定帧数；根据所述帧数、所述起点坐标和所述终点坐标，计算所述帧动画中的每个帧的位置变化梯度；根据所述帧数、所述起点尺寸和所述终点尺寸，计算所述帧动画中的每个帧的尺寸变化梯度；根据每个帧的位置变化梯度和尺寸变换梯度，通过Canvas对所述静态图进行裁剪，以得到各个帧；及将所述各个帧进行合成，以得到所述帧动画。
可选的，还包括：确定是否将所述帧动画作为帧动画模板；及如果确定将所述帧动画作为所述帧动画模板，则将所述变化参数发送到所述服务器中，以便所述服务器根据所述变化参数提供相应的帧动画生成服务。
可选的，还包括：将后续静态图加载到所述网页中；通过所述网页调用所述服务器中的所述帧动画生成服务，以便所述服务器根据所述变化参数和所述后续静态图生成并返回相应的后续帧动画；及接收所述后续帧动画。
可选的，还包括：如果确定不执行所述帧动画操作，则将所述静态图转化为CSS代码，其中：根据所述起点坐标、所述起点尺寸、所述终点坐标和所述终点尺寸，确定所述静态图的最大运动时间；根据所述最大运动时间设置片段时间，所述片段时间不大于所述最大运动时间；根据所述片段时间、所述起点坐标、所述终点坐标、所述起点尺寸、所述终点尺寸以及所述JavaScript文件，生成CSS代码；其中，所述JavaScript文件包括用于拼接CSS参数的JavaScript语法模板。
可选的，还包括：确定是否将所述CSS代码作为CSS模板；及如果确定将所述CSS代码作为所述CSS模板，则将所述CSS代码发送到所述服务器中，以便所述服务器根据所述CSS代码提供相应的CSS代码生成服务。
可选的，还包括：将后续静态图加载到所述网页中；通过所述网页调用所述服务器中的所述CSS代码生成服务，以便所述服务器根据所述CSS代码和所述后续静态图生成并返回相应的后续CSS代码；及接收所述后续CSS代码。
可选的，还包括：如果确定不执行所述帧动画操作，则将所述静态图和其他静态图转化为CSS代码，其中：设置所述静态图的片段时间；设置所述其他静态图的其他片段时间；根据所述片段时间和所述其他片段时间，确定所述静态图的运动时间百分比区间和所述其他静态图的运动时间百分比区间；根据所述静态图的所述变化参数、所述静态图的运动时间百分比区间、所述其他静态图的其他变化参数以及所述其他静态图的运动时间百分比区间，生成CSS代码；其中，CSS代码对应的CSS动画包括对应于所述静态图的CSS动画和对应于所述其他静态图的其他CSS动画。
本申请实施例的一个方面又提供了一种基于网页的多媒体合成系统，包括：加载模块，用于将静态图加载到内置JavaScript文件的网页中，并将所述静态图显示在所述网页中；第一确定模块，用于确定所述网页中的活动区域；第二确定模块，用于确定所述静态图在所述活动区域中的变化参数，所述变化参数包括起点坐标、起点尺寸、终点坐标和/或终点尺寸；第三确定模块，用于确定是否执行帧动画操作；及帧动画模块，用于如果确定执行所述帧动画操作，则通过所述JavaScript文件执行以下操作：基于所述变化参数，将所述静态图转化为帧动画。
本申请实施例的一个方面又提供了一种计算机设备，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述基于网页的多媒体合成方法的步骤。
本申请实施例的一个方面又提供了一种计算机可读存储介质，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述基于网页的多媒体合成方法的步骤。
本申请实施例提供的基于网页的多媒体合成方法、系统、计算机设备及计算机可读存储介质可以包括以下优势：(1)本实施例可以将静态图转换为帧动画，提升显示效果和用户体验：(2)无需通过诸如iMovie这种笨重的专门独立工具，本实施例通过内置JavaScript文件的网页，实现了将静态图转换为帧动画，具有更高的通用性和可定制性。
附图说明
图1示意性示出了根据本申请实施例的基于网页的多媒体合成方法的应用环境图；
图2示意性示出了根据本申请实施例一的基于网页的多媒体合成方法的流程图；
图3为图2中步骤S208的子流程图；
图4为帧动画模板设置的新增步骤的流程图；
图5为基于帧动画模板的帧动画生成的步骤流程图；
图6示意性示出了根据本申请实施例二的基于网页的多媒体合成方法的另一流程图；
图7为图6中步骤S608的另一子流程图；
图8为CSS模板设置的新增步骤的流程图；
图9为基于CSS模板的帧动画生成的步骤流程图；
图10为多个时间片段的CSS动画合成流程图；
图11示意性示出根据本申请实施例三的基于网页的多媒体合成系统的框图；及
图12示意性示出了根据本申请实施例四的适于实现基于网页的多媒体合成方法的计算机设备的硬件架构示意图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
需要说明的是，在本申请实施例中涉及“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外，各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本申请要求的保护范围之内。
大多数广告是以静态图片的形式呈现给用户，显示效果较低，对用户吸引力较差。当然，也有一些广告将静态图片以动画的形式呈现给用户的，其显示效果优于静态图片。但是，在现有技术中，将静态图片转换为动画，往往需要专门工具应用并且操作比较繁琐。以视频剪辑软件iMovie为例，有以下缺点：第一、不通用，其即不能跨平台使用，也没办法作为模版达到批量操作的目的，即无法产生批量动态图，使用该软件只能每次手动操作；第二、软件本身太笨重，学习成本高，不够定制化；第三、不能够输出CSS(Cascading StyleSheets，层叠样式表)代码。需要说明的是，CSS动画作为HTML5(Hyper Text MarkupLanguage 5.0，超文本标记语言标准第五次修订版本)目前性能最好的动画方式，能够有效地提高用户的使用体验。
以下将提供一些实施例，这些实施例可以解决上面问题。
需要说明的是，本申请同时支持“帧动画”和“CSS动画”生成。通过“帧动画”和“CSS”均可以将静态图实现动态效果。
图1示意性示出了根据本申请实施例的环境应用示意图。
计算机设备2可以被配置为提供页面服务。计算机设备2可以包括提供页面服务的任何类型的电子设备，诸如智能手机、平板设备、膝上型计算机、工作站等。
计算机设备2可以包括客户端2A，如浏览器。客户端2A可以将页面输出(例如，显示、渲染、呈现)给用户。该页面可以是一个可视化编辑页面，用于供用户进行多媒体合成。可视化编辑能够让更多的非技术人员能够进行自定义动画，这种可视化编辑相当于改变了动画的实现方式(从仅适用于技术人员认为的接口模式改变为同时适用于技术人员和非技术人员的可视化编辑模式)，动画效果展现不再局限于技术人员、学习成本低、动画编辑效率高。制作CSS模板时，可视化编辑功能可以简化操作过程，通过能够实现更加丰富的CSS动画效果，例如字幕等。
服务器4可以通过网络3连接多个计算机设备2。服务器4可以位于诸如单个场所之类的数据中心，或者分布在不同的物理位置(例如，在多个场所)中。服务器4可以经由一个或多个网络3提供服务。网络3包括各种网络设备，例如路由器，交换机，多路复用器，集线器，调制解调器，网桥，中继器，防火墙，代理设备和/或类似。网络3可以包括物理链路，例如同轴电缆链路，双绞线电缆链路，光纤链路，其组合等。网络3可以包括无线链路，诸如蜂窝链路，卫星链路，Wi-Fi链路等。
服务器4可以用于存储帧动画模板或CSS模板，还可以用于根据存储的帧动画模板或CSS模板进行静态图的多媒体合成，如合成得到GIF图像或CSS代码。响应于某个请求，服务器4可以应用服务器，可以用于提供一些功能服务。服务器4包括多个网络节点。多个网络节点可以处理与消息服务相关联的任务。多个网络节点可以被实现为一个或多个计算设备，一个或多个处理器，一个或多个虚拟计算实例，它们的组合，和/或类似的东西。多个网络节点可以由一个或多个计算机设备实现。一个或多个计算机设备可以包括虚拟化的计算实例。虚拟化的计算实例可以包括虚拟机，例如计算机系统，操作系统，服务器等的仿真。计算机设备可以基于虚拟映像和/或定义用于仿真的特定软件(例如，操作系统，专用应用程序，服务器)的其他数据，由计算机设备加载虚拟机。随着对不同类型的处理服务的需求改变，可以在一个或多个计算机设备上加载和/或终止不同的虚拟机。可以实现管理程序来管理同一计算机设备上不同虚拟机的使用。
实施例一
需要说明的是，本实施例在于提供帧动画的生成或批量生成。
图2示意性示出了根据本申请实施例一的基于网页的多媒体合成方法的流程图。可以理解，本方法实施例可以被执行在计算机设备2中，且本方法实施例的流程图不用于对执行步骤的顺序进行限定。
如图2所示，该基于网页的多媒体合成方法可以包括步骤S200～S208，其中：
步骤S200，将静态图加载到内置JavaScript文件的网页中，并将所述静态图显示在所述网页中。
网页(Web Page)，是一个适用于万维网和网页浏览器的文件，它存放在世界某个角落的某一部或一组计算机中。网页经由网址(URL)来识别与访问服务器4，通常由浏览器解释其内容，再展示给用户。网页通常是HTML格式，如HTML5。以HTML5为例，网页可以包括HTML内容、CSS文件和JavaScript文件。CSS在于定义如何显示所述HTML内容中的HTML元素。JavaScript是一种脚本语言，其可以在客户端(浏览器)中运行，并执行相应的操作。
步骤S202，确定所述网页中的活动区域。
所述网页可以为可视化编辑页面。用户可以向所述网页中输入相关指令以配置多媒体合成的基础设置，如，所述活动区域的宽、高，以及帧率等。所述活动区域又称之为活动框，用于限定：由静态图转换而成的帧动画或CSS动画的最大活动范围。所述帧率(Framerate)，是以帧称为单位的位图图像连续出现在显示器上的频率(速率)。
步骤S204，确定所述静态图在所述活动区域中的变化参数，所述变化参数包括起点坐标、起点尺寸、终点坐标和/或终点尺寸。
所述起点坐标和所述终点坐标，均为所述静态图在所述活动区域中的相对坐标，并均可以用于X轴和Y轴表示。
所述起点尺寸和所述终点尺寸，均为所述静态图在所述活动区域中的相对尺寸，并均可以用于宽和高表示。
步骤S206，确定是否执行帧动画操作。
所述帧动画操作在于将所述静态图转化为具有动态效果的图像文件，如，具有kenburns动画效果的GIF(Graphics Interchange Format，图形交换格式)的图像文件。所述ken burns(关键帧动画)的动画效果，在于通过缩放、平移、修改透明度等的方式来展现所述静态图以产生动态视觉效果。
步骤S208，如果确定执行所述帧动画操作，则通过所述JavaScript文件执行以下操作：基于所述变化参数，将所述静态图转化为帧动画。
所述变化参数，可以是位置变化参数、尺寸变化参数、透明度变化参数等。
计算机设备2可以通过所述JavaScript文件将所述静态图转换为具有动态效果的帧动画。
在示例性的实施例中，为了能够高效得到动态效果优秀的所述帧动画，如图3所示，所述步骤S208可以包括步骤S300～S312，其中：步骤S300，根据所述起点坐标、所述起点尺寸、所述终点坐标和所述终点尺寸，确定所述静态图的最大运动时间；步骤S302，根据所述最大运动时间设置片段时间，所述片段时间不大于所述最大运动时间；步骤S304，根据所述片段时间和预设的帧率确定帧数；步骤S306，根据所述帧数、所述起点坐标和所述终点坐标，计算所述帧动画中的每个帧的位置变化梯度；步骤S308，根据所述帧数、所述起点尺寸和所述终点尺寸，计算所述帧动画中的每个帧的尺寸变化梯度；步骤S310，根据每个帧的位置变化梯度和尺寸变换梯度，通过Canvas对所述静态图进行裁剪，以得到各个帧；及步骤S312，将所述各个帧进行合成，以得到所述帧动画。
需要说明的是，帧动画的合成还需要一个目标设备大小参数，对于裁剪后不满足输出大小的需要进行缩放以达到所有帧大小一致。
需要说明的是，所述最大运动时间可以是指以下时间中的最大值：所述静态图从所述起始坐标中X轴起点到所述终点坐标中X轴终点的运动时间，所述静态图从所述起始坐标中Y轴起点到所述终点坐标中Y轴终点的运动时间，所述静态图从所述起始尺寸变化到所述终点尺寸的缩放时间。另外，所述帧数指的是所述帧动画中的总帧数。所述帧数等于所述片段时间和所述预设的帧率的乘积。
需要说明的是，所述最大运动时间并不代表静态图的运动时间(所述时间片段)，所述时间片段是用户决定的，所述最大运动时间只是所述时间片段的上限。举例，综合考虑四个维度(X，Y，Width，Height)，假设x的起始坐标和终点坐标之间的差值最大，如10px,由已知最小梯度1px变化计算出的最大变化时间为10秒,因此，用户可以在0至10秒内任意设值作为所述时间片段。梯度＝始末最大变化值/(所述时间片段*所述预设的帧率)。所述时间片段越短，梯度变化越大，运动越快。
举例而言，所述JavaScript文件可以执行如下操作：根据所述帧数和所述静态图在X轴上的运动距离，计算线性变化过程中每个帧在X轴的位置变化梯度，以到每个帧对应的X轴位置；根据所述帧数和所述静态图在Y轴上的运动距离，计算线性变化过程中每个帧在Y轴的位置变化梯度，以到每个帧对应的Y轴位置；根据所述帧数和所述静态图的所述起始尺寸变化到所述终点尺寸，计算线性变化过程中每个帧的尺寸变化梯度，以到每个帧对应的宽、高；根据上述步骤得到的每个帧的位置以及宽高，通过本地Canvas对所述静态图进行裁剪，可以得到BASE64图；将每一个帧对应的BASE64图进行合成，从而最终得到所述帧动画。需要说明是，每个帧对应一个BSAE64图，每个BASE图是通过所述静态图裁剪得到的。Canvas(画布)，是HTML5中的一个元素，用于供开发者绘制图形。BASE64是传输二进制的编码格式，BASE64图是基于这种编码格式的图。
上述流程介绍了对应一个时间片段的帧动画的生成，如对应一个ken burn的生成。需要说明的是，当计算机设备2需要将多个时间片段的帧动画时，可以将多个ken burns进行合成。即，不同时间片段可以使用不同的静态图，最后将多个ken burns进行合成。
需要说明的是，用户可以决定是否将所述帧动画设置为帧动画模板。
在示例性的实施例中，如果所述帧动画被设置为帧动画模板时，步骤S312中的合成操作亦可以在服务器4中实现，如通过服务器4中的ffmpeg将多个帧合成为所述帧动画。如果所述帧动画没有被设置为帧动画模板时，所述步骤S312中的合成操在计算机设备2中实现，计算机设备2可以通过所述网页调用用于gif动画合成的gifShot.js等帧合成插件实现合成任务。因此，所述网页可以根据是否将所述帧动画设置为帧动画模板，来决定是否调用gifShot.js等帧合成插件。
在示例性的实施例中，如图4所示，所述基于网页的多媒体合成方法还可以包括步骤S400～S402，其中：步骤S400，确定是否将所述帧动画作为帧动画模板；步骤S402，如果确定将所述帧动画作为所述帧动画模板，则将所述变化参数发送到所述服务器中，以便所述服务器根据所述变化参数提供相应的帧动画生成服务。本实施例进一步提高了通用性和定制化，任何用户制作的帧动画均能够成为帧动画模板，从而达到批量进行帧动画生成的操作。即，相比于iMovie每次帧动画都需要手动操作，本实施例包括以下优势：服务器4可以根据帧动画模板对后续批量静态图进行批量处理，产生批量帧动画，且该批量帧动画与作为帧动画模板的帧动画具有相同的动画效果，如位置变化效果、缩放变化效果和透明度变化效果等。
在示例性的实施例中，如图5所示，以下提供后续静态图的帧动画生成的简易、快速的流程：步骤S500，将后续静态图加载到所述网页中；步骤S502，通过所述网页调用所述服务器中的所述帧动画生成服务，以便所述服务器根据所述变化参数和所述后续静态图生成并返回相应的后续帧动画；及步骤S504，接收所述后续帧动画。以后续静态图A为例，网页可以将后续静态图A发送给到所述服务器4的所述帧动画生成服务中。所述帧动画生成服务在接收到所述后续静态图A之后，可以将所述后续静态图A通过服务器4中的node-canvas(后端画布)按照所述帧动画模板中的各项参数生成对应于所述后续静态图A的帧动画A’。本实施例包括以下优势：通过保存在服务器4中的帧动画模板，用户可以请求服务器4基于该帧动画模板进行帧动画的批量生成，极大地缩短了帧动画生成的时间和减少操作步骤，从而提供了前端(计算机设备2)的帧动画生成效率。
实施例二
需要说明的是，本实施例在于提供CSS代码的生成或批量生成。
图6示意性示出了根据本申请实施例一的基于网页的多媒体合成方法的流程图。可以理解，本方法实施例可以被执行在计算机设备2中，且本方法实施例的流程图不用于对执行步骤的顺序进行限定。
如图6所示，该基于网页的多媒体合成方法可以包括步骤S600～S508，其中：
步骤S600，将静态图加载到内置JavaScript文件的网页中，并将所述静态图显示在所述网页中。
步骤S602，确定所述网页中的活动区域。
步骤S604，确定所述静态图在所述活动区域中的变化参数，所述变化参数包括起点坐标、起点尺寸、终点坐标和/或终点尺寸。
步骤S606，确定是否执行帧动画操作。如果是，则执行合成帧动画，否则进入步骤S608.
步骤S608，将所述静态图转化为CSS代码。
本实施例通过所述CSS代码，使得所述静态图的动画效果可以很好的显示在HTML5页面中，提升用户使用体验。
如图7所示，所述步骤S210可以通过以下步骤实现：步骤S700，根据所述起点坐标、所述起点尺寸、所述终点坐标和所述终点尺寸，确定所述静态图的最大运动时间；步骤S702，根据所述最大运动时间设置片段时间，所述片段时间不大于所述最大运动时间；步骤S704，根据所述片段时间和预设的帧率确定帧数；步骤S706，根据所述片段时间、所述起点坐标、所述终点坐标、所述起点尺寸、所述终点尺寸以及所述JavaScript文件，生成CSS代码；其中，所述JavaScript文件包括用于拼接CSS参数的JavaScript语法模板。本实施例在于直接得到CSS代码，这些CSS代码可以直接用于页面展示，实现过程中无需通过裁剪得到每一帧，而是通过所述起点尺寸和所述终点尺寸，然后用CSS keyframe的百分比来实现。举例而言，计算机设备2可以根据所述起点尺寸和所述终点尺寸除以活动区域大小求出scale,然后将活动区域坐标乘以scale得到实际展示坐标，然后利用JavaScript文件拼接设置所述静态图的tansform(translate、scale、透明度等)，以得到CSS代码的字符串。
需要说明的是，所述最大运动时间可以是指以下时间中的最大值：所述静态图从所述起始坐标中X轴起点到所述终点坐标中X轴终点的运动时间，所述静态图从所述起始坐标中Y轴起点到所述终点坐标中Y轴终点的运动时间，所述静态图从所述起始尺寸变化到所述终点尺寸的缩放时间。
在示例性的实施例中，如图8所示，所述步骤S608可以包括步骤S800～S802，其中：步骤S800，确定是否将所述CSS代码作为CSS模板；步骤S802，如果确定将所述CSS代码作为所述CSS模板，则将所述CSS代码发送到所述服务器中，以便所述服务器根据所述CSS代码提供相应的CSS代码生成服务。本实施例进一步提高了通用性和定制化，任何用户制作生成的CSS代码均能够成为CSS模板，从而达到批量进行帧动画生成的操作。即，相比于iMovie每次手动操作，本实施例包括以下优势：(1)可以生成用于HTML5的CSS代码；(2)服务器4可以根据CSS模板对后续批量静态图进行批量处理，产生批量CSS代码，且该批量CSS代码与作为CSS模板的CSS代码具有相同的动画效果，如位置变化效果、缩放变化效果和透明度变化效果等。
在示例性的实施例中，如图9所示，以下提供后续静态图的CSS代码生成的简易、快速的流程：步骤S900，将后续静态图加载到所述网页中；步骤S902，通过所述网页调用所述服务器中的所述CSS代码生成服务，以便所述服务器根据所述CSS代码和所述后续静态图生成并返回相应的后续CSS代码；及步骤S904，接收所述后续CSS代码。以后续静态图A为例，网页可以将后续静态图A发送给到所述服务器4的所述接收所述后续CSS代码生成服务中。所述CSS代码生成服务在接收到所述后续静态图A之后，可以将所述后续静态图A通过服务器4中的CSS代码生成服务生成对应于所述后续静态图A的后续CSS代码。本实施例包括以下优势：通过保存在服务器4中的CSS模板，用户可以请求服务器4基于该CSS模板进行CSS代码的批量生成，极大地缩短了CSS代码生成的时间和减少操作步骤，从而提供了前端(计算机设备2)的CSS代码生成效率。
上述流程介绍了对应一个时间片段的CSS代码的生成，如对应一个ken burn的生成。需要说明的是，当计算机设备2需要将多个时间片段的CSS代码时，可以将多个kenburns进行合成。即，不同时间片段可以使用不同的静态图，最后将多个ken burns进行合成。如下所述：
计算机设备2还可以将所述静态图和其他静态图合成在一个CSS动画中。如图10所示，计算机设备2可以执行如下步骤：步骤S1000，设置所述静态图的片段时间；步骤S1002，设置所述其他静态图的其他片段时间；步骤S1004，根据所述片段时间和所述其他片段时间，确定所述静态图的运动时间百分比区间和所述其他静态图的运动时间百分比区间；步骤S1006，根据所述静态图的所述变化参数、所述静态图的运动时间百分比区间、所述其他静态图的其他变化参数以及所述其他静态图的运动时间百分比区间，生成CSS代码；其中，CSS代码对应的CSS动画包括对应于所述静态图的CSS动画和对应于所述其他静态图的其他CSS动画。
该由多个时间片段组合而成的CSS动画所对应的CSS代码，亦可以作为CSS模板。
需要说明的是，CSS动画的合成并不需要一开始传入的帧率、以及不需要去求变化梯度，仅需要变化参数及片段时间。举例说明，以2个时间片段构成的CSS动画为例，第一时间片段A是由0S运动到2S，第二时间片段B是由2S运动到6S，则CSS动画的总时长就是6S。因此，第一时间片段A对应的CSS动画片段A’的运动时间百分比区间为0％-33％(第一时间片段A的运动时长2s/总时长6s)，其余区间应该隐藏，然后起始位置和终点位置的坐标以及尺寸大小都可以由CSS动画的Linear运动函数去实现。第二时间片段B对应的CSS动画片段B’的运动时间百分比区间为34％-100％，其余区间隐藏。即，对于各个CSS动画片段而言，6S内处于非运动状态的时间段处于隐藏状态。
CSS动画的起点尺寸和终点尺寸之间的缩放(Scale)计算，是根据预设的目标设备大小/始末的大小得出，预设设备一般等于原图大小，然后将scale乘以对应的X、Y,得到变化后的X、Y，(X、Y的值也可直接使用百分比，那样就不要乘以Scale做二次计算)，然后每一个时间片段就会有起点和终点，起点和终点有自己的X、Y值，相较于原图的Scale值，时间片段中间的变化过程由CSS Linear函数实现。
举例：
CSS动画片段A的CSS keyframe代码：
transform表示CSS的变形属性；translate表示CSS的移动属性；Opacity表示CSS的透明度属性；Scale表示CSS的缩放属性。
以上通过实施例一和实施例二介绍了“帧动画”和“CSS动画”。
需要说明的是，“帧动画”和“CSS动画”具有很大的差异，是两种不同的实现方式。二者都是以始末位置状态为基础(坐标/大小)，但是：(1)“帧动画”是经过梯度计算Canvas裁剪和拼接得到；(2)“CSS动画”只需通过片段时间去计算运动百分比，运动过程由CSS动画keyframe实现，并自带可选运动函数linear，更加方便快捷。二者输出的成果也不一样，“帧动画”输出GIF等动态图片，“CSS动画”输出CSS代码。将“帧动画”和“CSS动画”的生成结合在一个技术方案中，提供了便利性，且部分代码和界面共用，有效节省了技术资源。由于这两种实现方式差异大且格式不同，将它们置于一个技术方案中实现，也是打破常规思维的业内首创。
本申请提供的基于网页的多媒体合成方法包括以下优势：
(1)本申请可以将静态图转换为“帧动画”，提升显示效果和用户体验：
(2)本申请通过内置JavaScript文件的网页，可以实现将静态图转换为帧动画，具有更高的通用性和可定制性；
(3)本申请通过依附于浏览器的JavaScript文件，可以调用浏览器相关功能，而不需要提供由海量代码构成的笨重工具，如iMovie；
(4)本申请通过内置JavaScript文件的网页，可以实现将所述静态图转化为“CSS代码”，更加适应于HTML5，动态显示效果好；
(5)通过所述网页生成的帧动画或CSS代码，均可以被配置为模板文件，并将模版文件保存到服务器中，使得后续用户可以通过请求服务器调用这些模板文件产生批量的并具有相同动画效果的帧动画或CSS代码，从而使得帧动画或CSS代码的生成流程简单且效率更加高；
(6)本申请的“帧动画”和“CSS动画”实现更好的可定制性，可以由用户定制各种动态效果。
(7)本申请对静态图的玩法进行了升级，特别是作为电商产品，手办很多细节用户其实不会关注到，通过动画的方式(帧动画、CSS动画)都可以吸引用户对细节的关注，从而有助于提高交易转化率。据测试，基于申请合成的帧动画在同一广告位基本能提高30％的点击率。基于申请生成的CSS代码在相关电商页面中显示的CSS动画，效果优于视频，而且渲染性能很高。
实施例二
图10示意性示出了根据本申请实施例二的基于网页的多媒体合成系统的框图，该基于网页的多媒体合成系统可以被分割成一个或多个程序模块，一个或者多个程序模块被存储于存储介质中，并由一个或多个处理器所执行，以完成本申请实施例。本申请实施例所称的程序模块是指能够完成特定功能的一系列计算机程序指令段，以下描述将具体介绍本实施例中各程序模块的功能。
如图10所示，该基于网页的多媒体合成系统1100可以包括加载模块1110、第一确定模块1120、第二确定模块1130、第三确定模块1140及帧动画模块1150，其中：
加载模块1110，用于将静态图加载到内置JavaScript文件的网页中，并将所述静态图显示在所述网页中。
第一确定模块1120，用于确定所述网页中的活动区域。
第二确定模块1130，用于确定所述静态图在所述活动区域中的变化参数，所述变化参数包括起点坐标、起点尺寸、终点坐标和/或终点尺寸；
第三确定模块1140，用于确定是否执行帧动画操作。
帧动画模块1150，用于如果确定执行所述帧动画操作，则通过所述JavaScript文件执行以下操作：基于所述变化参数，将所述静态图转化为帧动画。
在示例性的实施例中，所述帧动画模块1150还用于：根据所述起点坐标、所述起点尺寸、所述终点坐标和所述终点尺寸，确定所述静态图的最大运动时间；根据所述最大运动时间设置片段时间，所述片段时间不大于所述最大运动时间；根据所述片段时间和预设的帧率确定帧数；根据所述帧数、所述起点坐标和所述终点坐标，计算所述帧动画中的每个帧的位置变化梯度；根据所述帧数、所述起点尺寸和所述终点尺寸，计算所述帧动画中的每个帧的尺寸变化梯度；根据每个帧的位置变化梯度和尺寸变换梯度，通过Canvas对所述静态图进行裁剪，以得到各个帧；及将所述各个帧进行合成，以得到所述帧动画。
在示例性的实施例中，所述多媒体合成系统1100还包括帧动画模板设置模块(未标识)，用于：确定是否将所述帧动画作为帧动画模板；及如果确定将所述帧动画作为所述帧动画模板，则将所述变化参数发送到所述服务器中，以便所述服务器根据所述变化参数提供相应的帧动画生成服务。
在示例性的实施例中，所述帧动画模块，还用于：将后续静态图加载到所述网页中；通过所述网页调用所述服务器中的所述帧动画生成服务，以便所述服务器根据所述变化参数和所述后续静态图生成并返回相应的后续帧动画；及接收所述后续帧动画。
在示例性的实施例中，所述多媒体合成系统1100还包括CSS代码生成模块(未标识)，用于：如果确定不执行所述帧动画操作，则将所述静态图转化为CSS代码，其中：根据所述起点坐标、所述起点尺寸、所述终点坐标和所述终点尺寸，确定所述静态图的最大运动时间；根据所述最大运动时间设置片段时间，所述片段时间不大于所述最大运动时间；根据所述片段时间、所述起点坐标、所述终点坐标、所述起点尺寸、所述终点尺寸以及所述JavaScript文件，生成CSS代码；其中，所述JavaScript文件包括用于拼接CSS参数的JavaScript语法模板。
在示例性的实施例中，所述多媒体合成系统1100还包括CSS模板设置模块，用于：确定是否将所述CSS代码作为CSS模板；及如果确定将所述CSS代码作为所述CSS模板，则将所述CSS代码发送到所述服务器中，以便所述服务器根据所述CSS代码提供相应的CSS代码生成服务。
在示例性的实施例中，所述CSS代码生成模块，用于：将后续静态图加载到所述网页中；通过所述网页调用所述服务器中的所述CSS代码生成服务，以便所述服务器根据所述CSS代码和所述后续静态图生成并返回相应的后续CSS代码；及接收所述后续CSS代码。
在示例性的实施例中，所述CSS代码生成模块，用于：如果确定不执行所述帧动画操作，则将所述静态图和其他静态图转化为CSS代码，其中：设置所述静态图的片段时间；设置所述其他静态图的其他片段时间；根据所述片段时间和所述其他片段时间，确定所述静态图的运动时间百分比区间和所述其他静态图的运动时间百分比区间；根据所述静态图的所述变化参数、所述静态图的运动时间百分比区间、所述其他静态图的其他变化参数以及所述其他静态图的运动时间百分比区间，生成CSS代码；其中，CSS代码对应的CSS动画包括对应于所述静态图的CSS动画和对应于所述其他静态图的其他CSS动画。
实施例三
图12示意性示出了根据本申请实施例三的适于实现基于网页的多媒体合成方法的计算机设备的硬件架构示意图。本实施例中，计算机设备2是一种能够按照事先设定或者存储的指令，自动进行数值计算和/或信息处理的设备。例如，计算机设备2可以是智能手机、平板设备、膝上型计算机、工作站等前端设备。如图12所示，计算机设备2至少包括但不限于：可通过系统总线相互通信链接存储器1210、处理器1220、网络接口1240。其中：
存储器1210至少包括一种类型的计算机可读存储介质，可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器1210可以是计算机设备2的内部存储模块，例如该计算机设备2的硬盘或内存。在另一些实施例中，存储器1210也可以是计算机设备2的外部存储设备，例如该计算机设备2上配备的插接式硬盘，智能存储卡(Smart Media Card，简称为SMC)，安全数字(Secure Digital，简称为SD)卡，闪存卡(FlashCard)等。当然，存储器1210还可以既包括计算机设备2的内部存储模块也包括其外部存储设备。本实施例中，存储器1210通常用于存储安装于计算机设备2的操作系统和各类应用软件，例如基于网页的多媒体合成方法的程序代码等。此外，存储器1210还可以用于暂时地存储已经输出或者将要输出的各类数据。
处理器1220在一些实施例中可以是中央处理器(Central Processing Unit，简称为CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器1220通常用于控制计算机设备2的总体操作，例如执行与计算机设备2进行数据交互或者通信相关的控制和处理等。本实施例中，处理器1220用于运行存储器1210中存储的程序代码或者处理数据。
网络接口1240可包括无线网络接口或有线网络接口，该网络接口1240通常用于在计算机设备2与其他计算机设备之间建立通信链接。例如，网络接口1240用于通过网络将计算机设备2与外部终端相连，在计算机设备2与外部终端之间的建立数据传输通道和通信链接等。网络可以是企业内部网(Intranet)、互联网(Internet)、全球移动通讯系统(GlobalSystem of Mobile communication，简称为GSM)、宽带码分多址(Wideband Code DivisionMultiple Access，简称为WCDMA)、4G网络、5G网络、蓝牙(Bluetooth)、Wi-Fi等无线或有线网络。
需要指出的是，图12仅示出了具有部件1110-1140的计算机设备，但是应理解的是，并不要求实施所有示出的部件，可以替代的实施更多或者更少的部件。
在本实施例中，存储于存储器1210中的基于网页的多媒体合成方法还可以被分割为一个或者多个程序模块，并由一个或多个处理器(本实施例为处理器1220)所执行，以完成本申请。
实施例四
本实施例还提供一种计算机可读存储介质，计算机可读存储介质其上存储有计算机程序，计算机程序被处理器执行时实现实施例中的基于网页的多媒体合成方法的步骤。
本实施例中，计算机可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，计算机可读存储介质可以是计算机设备的内部存储单元，例如该计算机设备的硬盘或内存。在另一些实施例中，计算机可读存储介质也可以是计算机设备的外部存储设备，例如该计算机设备上配备的插接式硬盘，智能存储卡(Smart Media Card，简称为SMC)，安全数字(Secure Digital，简称为SD)卡，闪存卡(Flash Card)等。当然，计算机可读存储介质还可以既包括计算机设备的内部存储单元也包括其外部存储设备。本实施例中，计算机可读存储介质通常用于存储安装于计算机设备的操作系统和各类应用软件，例如实施例中的基于网页的多媒体合成方法的程序代码等。此外，计算机可读存储介质还可以用于暂时地存储已经输出或者将要输出的各类数据。
静态图的GIF合成：在于对静态图进行裁剪、缩放、改透明度等方式产生一系列动画帧，然后将这些帧转为GIF格式输出。
静态图的CSS合成：在于对静态图进行操作(裁剪、缩放、改透明度作转场等)，产生一段CSS代码(即，CSS动画代码)。
显然，本领域的技术人员应该明白，上述的本申请实施例的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请实施例不限制于任何特定的硬件和软件结合。
以上仅为本申请的优选实施例，并非因此限制本申请的专利范围，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利保护范围内。
Claims (11)
1.一种基于网页的多媒体合成方法，其特征在于，包括：
将静态图加载到内置JavaScript文件的网页中，并将所述静态图显示在所述网页中；
确定所述网页中的活动区域；
确定所述静态图在所述活动区域中的变化参数，所述变化参数包括起点坐标、起点尺寸、终点坐标和/或终点尺寸；
确定是否执行帧动画操作；及
如果确定执行所述帧动画操作，则通过所述JavaScript文件执行以下操作：基于所述变化参数，将所述静态图转化为帧动画。
2.根据权利要求1所述的基于网页的多媒体合成方法，其特征在于，将所述静态图转化为所述帧动画，包括：
根据所述起点坐标、所述起点尺寸、所述终点坐标和所述终点尺寸，确定所述静态图的最大运动时间；
根据所述最大运动时间设置片段时间，所述片段时间不大于所述最大运动时间；
根据所述片段时间和预设的帧率确定帧数；
根据所述帧数、所述起点坐标和所述终点坐标，计算所述帧动画中的每个帧的位置变化梯度；
根据所述帧数、所述起点尺寸和所述终点尺寸，计算所述帧动画中的每个帧的尺寸变化梯度；
根据每个帧的位置变化梯度和尺寸变换梯度，通过Canvas对所述静态图进行裁剪，以得到各个帧；及
将所述各个帧进行合成，以得到所述帧动画。
3.根据权利要求2所述的基于网页的多媒体合成方法，其特征在于，还包括：
确定是否将所述帧动画作为帧动画模板；及
如果确定将所述帧动画作为所述帧动画模板，则将所述变化参数发送到所述服务器中，以便所述服务器根据所述变化参数提供相应的帧动画生成服务。
4.根据权利要求3所述的基于网页的多媒体合成方法，其特征在于，还包括：
将后续静态图加载到所述网页中；
通过所述网页调用所述服务器中的所述帧动画生成服务，以便所述服务器根据所述变化参数和所述后续静态图生成并返回相应的后续帧动画；及
接收所述后续帧动画。
5.根据权利要求1所述的基于网页的多媒体合成方法，其特征在于，还包括：
如果确定不执行所述帧动画操作，则将所述静态图转化为CSS代码，其中：
根据所述起点坐标、所述起点尺寸、所述终点坐标和所述终点尺寸，确定所述静态图的最大运动时间；
根据所述最大运动时间设置片段时间，所述片段时间不大于所述最大运动时间；
根据所述片段时间、所述起点坐标、所述终点坐标、所述起点尺寸、所述终点尺寸以及所述JavaScript文件，生成CSS代码；其中，所述JavaScript文件包括用于拼接CSS参数的JavaScript语法模板。
6.根据权利要求5所述的基于网页的多媒体合成方法，其特征在于，还包括：
确定是否将所述CSS代码作为CSS模板；及
如果确定将所述CSS代码作为所述CSS模板，则将所述CSS代码发送到所述服务器中，以便所述服务器根据所述CSS代码提供相应的CSS代码生成服务。
7.根据权利要求6所述的基于网页的多媒体合成方法，其特征在于，还包括：
将后续静态图加载到所述网页中；
通过所述网页调用所述服务器中的所述CSS代码生成服务，以便所述服务器根据所述CSS代码和所述后续静态图生成并返回相应的后续CSS代码；及
接收所述后续CSS代码。
8.根据权利要求1所述的基于网页的多媒体合成方法，其特征在于，还包括：
如果确定不执行所述帧动画操作，则将所述静态图和其他静态图转化为CSS代码，其中：
设置所述静态图的片段时间；
设置所述其他静态图的其他片段时间；
根据所述片段时间和所述其他片段时间，确定所述静态图的运动时间百分比区间和所述其他静态图的运动时间百分比区间；
根据所述静态图的所述变化参数、所述静态图的运动时间百分比区间、所述其他静态图的其他变化参数以及所述其他静态图的运动时间百分比区间，生成CSS代码；其中，CSS代码对应的CSS动画包括对应于所述静态图的CSS动画和对应于所述其他静态图的其他CSS动画。
9.一种基于网页的多媒体合成系统，其特征在于，包括：
加载模块，用于将静态图加载到内置JavaScript文件的网页中，并将所述静态图显示在所述网页中；
第一确定模块，用于确定所述网页中的活动区域；
第二确定模块，用于确定所述静态图在所述活动区域中的变化参数，所述变化参数包括起点坐标、起点尺寸、终点坐标和/或终点尺寸；
第三确定模块，用于确定是否执行帧动画操作；及
帧动画模块，用于如果确定执行所述帧动画操作，则通过所述JavaScript文件执行以下操作：基于所述变化参数，将所述静态图转化为帧动画。
10.一种计算机设备，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至8中任一项所述方法的步骤。
11.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序可被至少一个处理器所执行，以使所述至少一个处理器执行如权利要求1至8中任一项所述方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010549356.6A CN112418902A (zh) | 2020-06-16 | 2020-06-16 | 基于网页的多媒体合成方法和系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010549356.6A CN112418902A (zh) | 2020-06-16 | 2020-06-16 | 基于网页的多媒体合成方法和系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112418902A true CN112418902A (zh) | 2021-02-26 |
Family
ID=74844163
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010549356.6A Pending CN112418902A (zh) | 2020-06-16 | 2020-06-16 | 基于网页的多媒体合成方法和系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112418902A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115359154A (zh) * | 2022-10-19 | 2022-11-18 | 成都华栖云科技有限公司 | 一种新型高效的html5网页动画帧精确合成方法及系统 |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104933142A (zh) * | 2015-06-18 | 2015-09-23 | 北京奇虎科技有限公司 | 动画展示方法和装置 |
| CN105657574A (zh) * | 2014-11-12 | 2016-06-08 | 阿里巴巴集团控股有限公司 | 一种视频文件制作方法以及装置 |
| CN106407227A (zh) * | 2015-08-03 | 2017-02-15 | 天脉聚源（北京）科技有限公司 | 一种动态网页显示方法和系统 |
| CN106469220A (zh) * | 2016-09-09 | 2017-03-01 | 北京小度信息科技有限公司 | 一种生成动态效果页面的方法及系统 |
| CN108205398A (zh) * | 2016-12-16 | 2018-06-26 | 腾讯科技（深圳）有限公司 | 网页动画适配屏幕的方法和装置 |
| CN108256062A (zh) * | 2018-01-16 | 2018-07-06 | 携程旅游信息技术（上海）有限公司 | 网页动画实现方法、装置、电子设备、存储介质 |
| CN110570501A (zh) * | 2018-06-06 | 2019-12-13 | 腾讯科技（深圳）有限公司 | 一种线条动画绘制方法及其设备、存储介质、电子设备 |
| CN111104587A (zh) * | 2018-10-26 | 2020-05-05 | 北京金山云网络技术有限公司 | 网页显示方法、装置和服务器 |
-
2020
- 2020-06-16 CN CN202010549356.6A patent/CN112418902A/zh active Pending
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105657574A (zh) * | 2014-11-12 | 2016-06-08 | 阿里巴巴集团控股有限公司 | 一种视频文件制作方法以及装置 |
| CN104933142A (zh) * | 2015-06-18 | 2015-09-23 | 北京奇虎科技有限公司 | 动画展示方法和装置 |
| CN106407227A (zh) * | 2015-08-03 | 2017-02-15 | 天脉聚源（北京）科技有限公司 | 一种动态网页显示方法和系统 |
| CN106469220A (zh) * | 2016-09-09 | 2017-03-01 | 北京小度信息科技有限公司 | 一种生成动态效果页面的方法及系统 |
| CN108205398A (zh) * | 2016-12-16 | 2018-06-26 | 腾讯科技（深圳）有限公司 | 网页动画适配屏幕的方法和装置 |
| CN108256062A (zh) * | 2018-01-16 | 2018-07-06 | 携程旅游信息技术（上海）有限公司 | 网页动画实现方法、装置、电子设备、存储介质 |
| CN110570501A (zh) * | 2018-06-06 | 2019-12-13 | 腾讯科技（深圳）有限公司 | 一种线条动画绘制方法及其设备、存储介质、电子设备 |
| CN111104587A (zh) * | 2018-10-26 | 2020-05-05 | 北京金山云网络技术有限公司 | 网页显示方法、装置和服务器 |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115359154A (zh) * | 2022-10-19 | 2022-11-18 | 成都华栖云科技有限公司 | 一种新型高效的html5网页动画帧精确合成方法及系统 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| KR101494844B1 (ko) | 메타 데이터를 이용한 차트 변환 시스템 및 그 방법 | |
| CN106331345B (zh) | 一种交互消息展示方法、装置及系统 | |
| CN108959392B (zh) | 在3d模型上展示富文本的方法、装置及设备 | |
| CN111459501B (zh) | 基于SVG的Web组态画面存储与展示系统和方法及介质 | |
| US9117314B2 (en) | Information output apparatus, method, and recording medium for displaying information on a video display | |
| US20140325349A1 (en) | Real-time Representations of Edited Content | |
| CN113032708A (zh) | 一种无代码Web开发系统 | |
| CN111951356B (zh) | 基于json数据格式的动画渲染方法 | |
| US20230386041A1 (en) | Control Method, Device, Equipment and Storage Medium for Interactive Reproduction of Target Object | |
| CN111294395A (zh) | 一种终端页面传输方法、装置、介质和电子设备 | |
| CN113655999A (zh) | 一种页面控件的渲染方法、装置、设备及存储介质 | |
| CN112711729A (zh) | 基于页面动画的渲染方法、装置、电子设备及存储介质 | |
| CN110069254B (zh) | 文本显示方法、装置及服务器 | |
| CN113326043B (zh) | 网页渲染方法、网页制作方法及网页渲染系统 | |
| CN112418902A (zh) | 基于网页的多媒体合成方法和系统 | |
| CN113918147A (zh) | 页面设计方法、装置和可读存储介质 | |
| CN111367514A (zh) | 页面卡片的开发方法和装置、计算设备和存储介质 | |
| CN112819927A (zh) | 基于图片的视频生成方法、装置 | |
| CN113282852A (zh) | 编辑网页的方法和装置 | |
| CN115935909A (zh) | 一种文件生成方法、装置及电子设备 | |
| CN110647327A (zh) | 基于卡片的用户界面动态控制的方法和装置 | |
| CN111352665A (zh) | 页面加载方法、装置、设备及其存储介质 | |
| CN113419806B (zh) | 图像处理方法、装置、计算机设备和存储介质 | |
| CN116010736A (zh) | 矢量图标的处理方法、装置、设备以及存储介质 | |
| CN114371838A (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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210226 |
|
| RJ01 | Rejection of invention patent application after publication |