一种新型高效的HTML5网页动画帧精确合成方法及系统技术方案

本发明专利技术涉及一种新型高效的HTML5网页动画帧精确合成方法及系统，属于视频动画处理技术领域，包括：CEF3主程序预创建二进制图像内存空间；获取网页对象对网页注入回调函数及共享内存对象，以实现将共享内存对象与JS进行连接；得到JS中的方法，通过CEF3调用JS的方法并传入时间点0；网页将当前画面转为RGBA数据写入到二进制图像内存空间，CEF3从共享内存对象中取出一帧二进制RGBA画面数据，得到当前时间点0画面；得到所有画面合成为视频。本发明专利技术采用时间控制动画时长，不受CPU效率影响，合成倍数可达1：4，10秒动画只需要2.5秒即可完成合成，提高了合成效率，帧精确至毫秒级，保证前后端效果一致。效果一致。效果一致。

【技术实现步骤摘要】
一种新型高效的HTML5网页动画帧精确合成方法及系统


[0001]本专利技术涉及视频动画处理
，尤其涉及一种新型高效的HTML5网页动画帧精确合成方法及系统。

技术介绍

[0002]随着HTML5技术问世，Web进入了一个成熟的应用平台，在该平台上，视频、音频、图像、动画以及交互都被标准化；而原有的网页合成需要依靠浏览器基带数据，会受到CPU效率影响，合成时帧率不稳定，容易掉帧或者静帧；且合成倍数最大只能为1：1，例如10秒的动画至少需要10秒的合成时间，导致整体合成效率较低。
[0003]需要说明的是，在上述
技术介绍
部分公开的信息只用于加强对本公开的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。

技术实现思路

[0004]本专利技术的目的在于克服现有技术的缺点，提供了一种新型高效的HTML5网页动画帧精确合成方法及系统，解决了现有网页合成存在的不足。
[0005]本专利技术的目的通过以下技术方案来实现：一种新型高效的HTML5网页动画帧精确合成方法，所述方法包括：S1、CEF3主程序预创建二进制图像内存空间，以创建CEF3和JS的共享内存对象；S2、打开动画网页，获取网页对象对网页注入回调函数及共享内存对象，以实现将共享内存对象与JS进行连接，保证后续数据交互；S3、得到JS中的二进制获取函数，通过CEF3调用JS的二进制获取函数并传入时间点0；S4、网页将当前画面转为RGBA数据写入到二进制图像内存空间，CEF3从共享内存对象中取出一帧二进制RGBA画面数据，得到当前时间点0画面；S5、重复步骤S4继续下一个画面，得到所有画面合成为视频。
[0006]所述打开动画网页，获取网页对象对网页注入回调函数及共享内存对象包括：CEF3向网页对象注入初始化回调函数callback；CEF3向网页对象注入初始化参数；CEF3向网页对象注入共享内存对象，共享内容对象作为CEF3与JS共用池，以保证数据的高速交互。
[0007]所述得到JS中的二进制获取函数包括：网页对象初始化完成后，网页对象回调注入的callback函数，以向CEF3通知已经准备完毕，开始渲染，并在通知的同时CEF3得到从callback函数带来的二进制获取函数，通过二进制获取函数方法构建CEF3与JS的交互连接。
[0008]所述CEF3调用JS的二进制获取函数并传入时间点0包括：CEF3向JS发出需要第0毫秒画面的请求，JS开始渲染此时间点的画面，并将当前的
所有元素绘制与一张canvas画布上；将当前画面转换为RGBA数据：JS绘制完第0毫秒的画面后，将画面中的像素值从画布中取出，并存储与共享内存对象中。
[0009]所述CEF3从共享内存对象中取出一帧二进制RGBA画面数据，得到当前时间点0画面包括：CEF3将共享内存对象进行复制，存入序列帧列表中得到第0毫秒的画面；根据需要生成的动画时长和每秒帧数，得到向JS的二进制获取函数调用的次数，以及每次的参数；通过循环或者连续调用，传入不同的参数，完成所有图像的获取，得到最终需要合成的序列帧图像。
[0010]一种新型高效的HTML5网页动画帧精确合成系统，它包括内存空间创建模块、获取对象模块、调用模块和视频合成模块；所述内存空间创建模块用于通过CEF3主程序预创建二进制图像内存空间，以创建CEF3和JS的共享内存对象；所述获取对象模块用于获取网页对象对网页注入回调函数及共享内存对象，以实现将共享内存对象与JS进行连接，保证后续数据交互；所述调用模块用于得到JS中的二进制获取函数，通过CEF3调用JS的二进制获取函数并传入时间点0；所述视频合成模块用于将当前画面转为RGBA数据写入到二进制图像内存空间，CEF3从共享内存对象中取出一帧二进制RGBA画面数据，得到当前时间点0画面，最后得到所有画面合成为视频。
[0011]本专利技术具有以下优点：一种新型高效的HTML5网页动画帧精确合成方法及系统，采用时间控制动画时长，不受CPU效率影响，合成倍数可达1：4，10秒动画只需要2.5秒即可完成合成，大大提高了合成效率，帧精确至毫秒级，保证前后端效果一致。
附图说明
[0012]图1 为本专利技术方法的流程示意图。
具体实施方式
[0013]为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。因此，以下结合附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的保护范围，而是仅仅表示本申请的选定实施例。基于本申请的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。下面结合附图对本专利技术做进一步的描述。
[0014]本专利技术中CEF3是基于谷歌内核开发的，可用于本地程序的浏览器绘制框架。或可用于开发轻量级浏览器；JS全称Java Scrpit语言，是运行在浏览器的解释性脚本语言；CEF3用C++开发，JS作为运行在浏览器内核中，两种不同的语言进行大数据交互。
[0015]如图1所示，本专利技术的一种实施方式涉及一种新型高效的HTML5网页动画帧精确合成方法，所述方法包括：S1、CEF3主程序预创建二进制图像内存空间，以创建CEF3和JS的共享内存对象；
根据画面的大小，创建固定的内存空间，以1920*1080画面为例，存储对象为RGBA的图像格式，一个像素即占用4个字节，则创建的内存大小为1920*1080*4，即8294400个字节空间。此步主要用于创建CEF3与JS的共享内存对象。
[0016]S2、打开动画网页，获取网页对象对网页注入回调函数及共享内存对象，以实现将共享内存对象与JS进行连接，保证后续数据交互；其中，CEF3主程序打开网页后，可通过侦听网页创建完成事件，得到网页对象。此时，CEF3需要创建一个初始化回调函数callback，以接收网页初始化完成的回调。具体为：CEF3向网页对象注入初始化回调函数callback；CEF3向网页对象注入初始化参数；CEF3向网页对象注入共享内存对象；共享内存对象作为CEF3与JS共用池，好比两人同用一个箱子，JS放进去的东西，CEF3直接拿出来。由于使用的是内存，所以能保证大数据的高速交互。
[0017]S3、得到JS中的二进制获取函数，通过CEF3调用JS的二进制获取函数并传入时间点0，其中二进制获取函数定义为getFrameArrayBuffer，以用来获取某一帧的二进制数据；其中，JS利用canvas对象，快速绘制1920
×
1080画面，得到二进制数据，并将二进制数据写入共享内存对象。此步对于JS网页有较高要求，需要使用canvas对象里的webgl2来绘制，可将1920*1080的一帧画面绘制时间压缩到6ms左右。
[0018本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种新型高效的HTML5网页动画帧精确合成方法，其特征在于：所述方法包括：S1、CEF3主程序预创建二进制图像内存空间，以创建CEF3和JS的共享内存对象；S2、打开动画网页，获取网页对象对网页注入回调函数及共享内存对象，以实现将共享内存对象与JS进行连接，保证后续数据交互；S3、得到JS中的二进制获取函数，通过CEF3调用JS的二进制获取函数并传入时间点0；S4、网页将当前画面转为RGBA数据写入到二进制图像内存空间，CEF3从共享内存对象中取出一帧二进制RGBA画面数据，得到当前时间点0画面；S5、重复步骤S4继续下一个画面，得到所有画面合成为视频。2.根据权利要求1所述的一种新型高效的HTML5网页动画帧精确合成方法，其特征在于：所述打开动画网页，获取网页对象对网页注入回调函数及共享内存对象包括：CEF3向网页对象注入初始化回调函数callback；CEF3向网页对象注入初始化参数；CEF3向网页对象注入共享内存对象，共享内容对象作为CEF3与JS共用池，以保证数据的高速交互。3.根据权利要求2所述的一种新型高效的HTML5网页动画帧精确合成方法，其特征在于：所述得到JS中的二进制获取函数包括：网页对象初始化完成后，网页对象回调注入的callback函数，以向CEF3通知已经准备完毕，开始渲染，并在通知的同时CEF3得到从callback函数带来的二进制获取函数，通过二进制获取函数构建CEF3与JS的交互连接。4.根据权利要求1所述的一种新型高效的HTML5网页动画帧精确合成方法，其特征在于：所述CEF3调...

【专利技术属性】
技术研发人员：唐尚海，张宇燕，李萌，代林东，漆坤元，刘盾，唐学怡，
申请(专利权)人：成都华栖云科技有限公司，
类型：发明
国别省市：