CN115359154B

CN115359154B - Novel and efficient precise synthesis method and system for HTML5 webpage animation frame

Info

Publication number: CN115359154B
Application number: CN202211277327.4A
Authority: CN
Inventors: 唐尚海; 张宇燕; 李萌; 代林东; 漆坤元; 刘盾; 唐学怡
Original assignee: Chengdu Chinamcloud Technology Co ltd
Current assignee: Chengdu Chinamcloud Technology Co ltd
Priority date: 2022-10-19
Filing date: 2022-10-19
Publication date: 2023-01-24
Anticipated expiration: 2042-10-19
Also published as: CN115359154A

Abstract

The invention relates to a novel and efficient method and a system for accurately synthesizing an HTML5 webpage animation frame, which belong to the technical field of video animation processing and comprise the following steps: a CEF3 main program pre-creates a binary image memory space; acquiring a webpage injection callback function and a shared memory object by a webpage object to realize the connection of the shared memory object and the JS; obtaining a method in JS, calling the method of JS through CEF3 and transmitting time point 0; converting a current picture into RGBA data by a webpage, writing the RGBA data into a binary image memory space, and taking out a frame of binary RGBA picture data from a shared memory object by a CEF3 to obtain a current time point 0 picture; and synthesizing all the obtained pictures into a video. The invention adopts time to control the animation duration, is not influenced by the CPU efficiency, and has the synthesis multiple of 1:4,10 second animation can be synthesized in 2.5 seconds, synthesis efficiency is improved, frames are accurate to millisecond level, and the effect consistency of the front end and the back end is guaranteed.

Description

Novel and efficient precise synthesis method and system for HTML5 webpage animation frame

Technical Field

The invention relates to the technical field of video animation processing, in particular to a novel and efficient method and system for accurately synthesizing an HTML5 webpage animation frame.

Background

With the advent of HTML5 technology, the Web has entered a mature application platform where video, audio, images, animation, and interaction are standardized; the original webpage synthesis needs to rely on browser baseband data, and is influenced by the CPU efficiency, the frame rate is unstable during synthesis, and frames are easy to drop or be still; and the maximum synthesis multiple can only be 1:1, e.g., 10 seconds of animation requires at least 10 seconds of composition time, resulting in less overall composition efficiency.

It is noted that the information disclosed in the above background section is only for enhancement of understanding of the background of the present disclosure and therefore may include information that does not constitute prior art that is already known to a person of ordinary skill in the art.

Disclosure of Invention

The invention aims to overcome the defects of the prior art, provides a novel and efficient method and a system for accurately synthesizing an HTML5 webpage animation frame, and solves the defects of the existing webpage synthesis.

The purpose of the invention is realized by the following technical scheme: a novel and efficient method for accurately synthesizing an HTML5 webpage animation frame comprises the following steps:

s1, pre-creating a binary image memory space by a CEF3 main program to create a shared memory object of the CEF3 and JS;

s2, opening the animation webpage, and acquiring a callback function injected by a webpage object to the webpage and a shared memory object so as to connect the shared memory object with the JS and ensure subsequent data interaction;

s3, obtaining a binary acquisition function in the JS, calling the binary acquisition function of the JS through the CEF3 and transmitting the binary acquisition function into a time point 0;

s4, converting the current picture into RGBA data by the webpage, writing the RGBA data into a binary image memory space, and taking out a frame of binary RGBA picture data from the shared memory object by the CEF3 to obtain a current time point 0 picture;

and S5, repeating the step S4 to continue the next picture, and obtaining all pictures to be synthesized into the video.

The step of opening the animation webpage and acquiring the webpage object, namely injecting a callback function into the webpage and sharing the memory object comprises the following steps:

CEF3 injects an initialization callback function callback to the webpage object;

CEF3 injects initialization parameters to the webpage object;

and the CEF3 injects a shared memory object into the webpage object, and the shared content object is used as a shared pool of the CEF3 and the JS so as to ensure the high-speed interaction of the data.

Obtaining the binary acquisition function in the JS comprises: after the initialization of the webpage object is completed, the webpage object calls back the injected callback function to notify the CEF3 that the preparation is completed, rendering is started, the CEF3 obtains a binary acquisition function brought by the callback function while notifying, and the interactive connection between the CEF3 and the JS is established through a binary acquisition function method.

The CEF3 invoking the binary acquisition function of JS and passing into time point 0 comprises:

the CEF3 sends a request of needing a 0 th millisecond picture to the JS, the JS starts to render the picture at the time point, and all current elements are drawn on a canvas;

convert the current picture to RGBA data: and after the JS draws the picture of 0 th millisecond, taking out the pixel value in the picture from the canvas, and storing the pixel value in the shared memory object.

The CEF3 extracts a frame of binary RGBA picture data from the shared memory object, and obtaining a current time point 0 picture comprises:

CEF3 copies the shared memory object, and stores the copied shared memory object into the sequence frame list to obtain a 0 th millisecond picture;

obtaining the number of times of calling a binary acquisition function of the JS and parameters of each time according to the animation time length and the number of frames per second which are required to be generated;

and (4) transmitting different parameters through circulation or continuous calling to finish the acquisition of all images so as to obtain the sequence frame images which are finally required to be synthesized.

A novel and efficient precise synthesis system for HTML5 webpage animation frames comprises a memory space creation module, an object acquisition module, a calling module and a video synthesis module; the memory space creating module is used for pre-creating a binary image memory space through a CEF3 main program so as to create a shared memory object of the CEF3 and the JS; the acquisition object module is used for acquiring a webpage injection callback function and a shared memory object of the webpage object so as to realize the connection of the shared memory object and the JS and ensure the subsequent data interaction; the calling module is used for obtaining the binary acquisition function in the JS, calling the binary acquisition function of the JS through the CEF3 and transmitting the binary acquisition function into a time point 0; the video synthesis module is used for converting the current picture into RGBA data and writing the RGBA data into a binary image memory space, the CEF3 takes out a frame of binary RGBA picture data from the shared memory object to obtain a current time point 0 picture, and finally all the obtained pictures are synthesized into a video.

The invention has the following advantages: a novel and efficient method and a system for accurately synthesizing HTML5 webpage animation frames are provided, the time is adopted to control the animation duration, the animation duration is not influenced by the CPU efficiency, and the synthesis multiple can reach 1:4,10 second animation only needs 2.5 seconds to complete synthesis, the synthesis efficiency is greatly improved, the frame is accurate to millisecond level, and the consistency of front and rear end effects is ensured.

Drawings

FIG. 1 is a schematic flow diagram of the process of the present invention.

Detailed Description

In order to make the objects, technical solutions and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only a part of the embodiments of the present application, and not all the embodiments. The components of the embodiments of the present application, generally described and illustrated in the figures herein, can be arranged and designed in a wide variety of different configurations. Thus, the detailed description of the embodiments of the present application provided below in connection with the appended drawings is not intended to limit the scope of the claimed application, but is merely representative of selected embodiments of the application. All other embodiments, which can be derived by a person skilled in the art from the embodiments of the present application without making any creative effort, shall fall within the protection scope of the present application. The invention is further described below with reference to the accompanying drawings.

The CEF3 is developed based on the Google kernel and can be used for drawing a frame of a browser of a local program. Or may be used to develop lightweight browsers; JS is called Java script language completely, and is an explanatory script language running in a browser; the CEF3 is developed by C + +, the JS is used as the operation in the browser kernel, and two different languages are used for large data interaction.

As shown in fig. 1, an embodiment of the present invention relates to a new and efficient method for accurately synthesizing HTML5 web animation frames, where the method includes:

a fixed memory space is created according to the size of the frame, taking 1920 × 1080 frames as an example, the storage object is an image format of RGBA, and if one pixel occupies 4 bytes, the created memory size is 1920 × 1080 × 4, that is 8294400 byte space. This step is mainly used to create a shared memory object for CEF3 and JS.

S2, opening the animation webpage, and acquiring a callback function and a shared memory object injected by a webpage object to the webpage so as to connect the shared memory object with the JS and ensure subsequent data interaction;

after the CEF3 main program opens the webpage, the webpage object can be obtained by monitoring the webpage creation completion event. At this time, the CEF3 needs to create an initialization callback function callback to receive the callback of the web page initialization completion. The method specifically comprises the following steps:

CEF3 injects initialization parameters into the webpage object;

CEF3 injects the shared memory object into the webpage object;

the shared memory object is used as a shared pool of the CEF3 and the JS, and the CEF3 is directly taken out compared with the case used by two persons at the same time and the JS is used for putting in the object. Because the memory is used, high-speed interaction of big data can be guaranteed.

S3, obtaining a binary acquisition function in the JS, calling the binary acquisition function of the JS through the CEF3 and transmitting the binary acquisition function into a time point 0, wherein the binary acquisition function is defined as getFrameArrayBuffer and is used for acquiring binary data of a certain frame;

the JS utilizes the canvas object to rapidly draw 1920 x 1080 pictures to obtain binary data, and the binary data is written into the shared memory object. This step has a high requirement for the JS page, and needs to be rendered using the webgl2 in the canvas object, which can compress the rendering time of one frame of 1920 × 1080 to about 6 ms.

After the web page object is initialized, the process may last from several hundred milliseconds to several seconds, and is related to the resources of the web page object. When the initialization is completed, the webpage object will call back the callback function injected before, that is, JS notifies CEF3 that it is ready, and rendering can be started.

While notifying, the CEF3 can obtain a getFrameArrayBuffer method brought by a callback function, the method is an important bridge for communication or interaction between the CEF3 and the JS, and similarly, a telephone connection is established between the CEF3 and the JS, and the method is the most important step for interaction between the JS and C + + (CEF 3).

wherein, the frame rate of 25 is 40 milliseconds at each frame interval, the frame rate is 50, the duration of each frame is 20 milliseconds, different frame rates are selected according to the needs of the user, the frame picture is stored in a sequence or a structure body, the next frame is called again, and getFrameArrayBuffer is obtained; and the pictures of all the frames can be obtained by sequentially and circularly calling.

The CEF3 sends a request of needing a 0 th millisecond picture to the JS, the JS starts to render the picture at the time point, and all current elements are drawn on a canvas (browser canvas API object) canvas; for example, if there are 1 element at 0 ms, then 1 element is drawn to canvas, and if there are 4 elements at 1000 ms, then 4 elements are drawn to canvas, and the JS interior can use webgl2 (browser canvas hardware acceleration API object) to implement hardware acceleration, and the drawing time of one frame can be compressed to about 6 ms.

Convert the current picture to RGBA data: after the JS draws the picture of 0 millisecond, taking out the pixel value in the picture from the canvas, and storing the pixel value in the shared memory object; also 1920 × 1080 pixels RGBA values, 8294400 bytes of memory. The method for obtaining the pixels comprises two modes, namely, one mode is to newly build a 1920 by 1080 canvas, clone the rendering canvas to the new canvas, and directly take the unit array under the object of the new canvas; the other method is a readPixels method for transferring the shared memory object into webgl2, wherein RGBA pixels are directly stored in the shared memory object by the browser API. After this step is completed, the data in the shared memory object has been rewritten, and the next step of fetching is waited.

Further, the step of extracting a frame of binary RGBA picture data from the shared memory object by the CEF3 to obtain a current time point 0 picture includes:

obtaining the calling times of the getFrameArrayBuffer method of the JS and the parameters of each time according to the animation time length and the frames per second which are required to be generated;

adding animation needing to be generated for 10 seconds and 25 frames/second, wherein each frame is 40 millisecond intervals (1000/25), the total frame number is 10 × 25=250 frames, and calling the getFrameArrayBuffer method of JS 250 times, wherein the parameters of each time are as follows:

frame 1: 0 millisecond;

frame 2: 40 milliseconds;

frame 3: 80 milliseconds;

…

frame 249: 9920 milliseconds;

frame 250: 9960 milliseconds;

finally, a sequence frame image with the length of 250 frames is obtained in the CEF3 main program;

if the animation time required to be generated is 10 seconds and 50 frames/second, each frame is 20 millisecond interval (1000/50), the total frame number is 10 × 50=500 frames, and the getFrameArrayBuffer method of JS is called 500 times, and the parameters of each time are:

frame 1: 0 millisecond;

frame 2: 20 milliseconds;

frame 3: 40 milliseconds;

…

frame 499: 9960 milliseconds;

frame 500: 9980 milliseconds;

finally, a 500-frame-length sequence frame image is obtained in the main program of the CEF 3.

Different parameters are transmitted through circulation or continuous calling, the step of transmitting the getFrameArrayBuffer of JS by using CEF3 is repeated, and the step of copying and storing the shared memory object into the sequence frame list by using CEF3 to obtain the picture of 0 millisecond is repeated, so that all the images are obtained, and the sequence frame image which needs to be synthesized finally is obtained.

And S5, repeating the step S4 to continue the next picture, and synthesizing all the pictures into a video, or superposing the pictures and the video, or synthesizing the pictures into other media.

Further, this step may use ffmpeg or other tools to encode the sequence frames into various formats of video or motion pictures.

The invention relates to a novel high-efficiency precise synthesis system of HTML5 webpage animation frames, which comprises a memory space creation module, an object acquisition module, a calling module and a video synthesis module; the memory space creating module is used for pre-creating a binary image memory space through a CEF3 main program so as to create a shared memory object of the CEF3 and the JS; the acquisition object module is used for acquiring a webpage injection callback function and a shared memory object of the webpage object so as to realize the connection of the shared memory object and the JS and ensure the subsequent data interaction; the calling module is used for obtaining a getFrameArrayBuffer method in the JS, calling the getFrameArrayBuffer of the JS through the CEF3 and transmitting the getFrameArrayBuffer into a time point 0; the video synthesis module is used for converting the current picture into RGBA data and writing the RGBA data into a binary image memory space, the CEF3 takes out a frame of binary RGBA picture data from the shared memory object to obtain a current time point 0 picture, and finally all the obtained pictures are synthesized into a video.

The foregoing is illustrative of the preferred embodiments of the present invention, and it is to be understood that the invention is not limited to the precise form disclosed herein and is not to be construed as limited to the exclusion of other embodiments, and that various other combinations, modifications, and environments may be used and modifications may be made within the scope of the concepts described herein, either by the above teachings or the skill or knowledge of the relevant art. And that modifications and variations may be effected by those skilled in the art without departing from the spirit and scope of the invention as defined by the appended claims.

Claims

1. A novel and efficient method for accurately synthesizing an HTML5 webpage animation frame is characterized by comprising the following steps: the method comprises the following steps:

s5, repeating the step S4 to continue the next picture to obtain all pictures, and synthesizing the pictures into a video;

convert the current picture to RGBA data: after the JS draws the picture of 0 millisecond, taking out the pixel value in the picture from the canvas, and storing the pixel value in the shared memory object;

2. The method of claim 1 for accurately synthesizing new and efficient HTML5 web page animation frames, wherein: the opening of the animation webpage and the acquisition of the webpage object, the webpage injection callback function and the shared memory object comprise the following steps:

CEF3 injects initialization parameters into the webpage object;

and injecting a shared memory object into the webpage object by the CEF3, and taking the shared content object as a shared pool of the CEF3 and the JS to ensure the high-speed interaction of the data.

3. The method of claim 2 for accurately synthesizing new and efficient HTML5 web page animation frames, wherein: obtaining the binary acquisition function in the JS comprises: after the initialization of the webpage object is completed, the webpage object calls back the injected callback function to notify the CEF3 that the preparation is completed, rendering is started, the CEF3 obtains a binary acquisition function brought by the callback function while notifying, and the interactive connection between the CEF3 and the JS is established through the binary acquisition function.

4. A novel high-efficiency precise synthesis system for HTML5 webpage animation frames is characterized in that: the system comprises a memory space creating module, an object obtaining module, a calling module and a video synthesizing module; the memory space creating module is used for pre-creating a binary image memory space through a CEF3 main program so as to create a shared memory object of the CEF3 and the JS; the acquisition object module is used for acquiring a webpage injection callback function and a shared memory object of the webpage object so as to realize the connection of the shared memory object and the JS and ensure the subsequent data interaction; the calling module is used for obtaining the binary acquisition function in the JS, calling the binary acquisition function of the JS through the CEF3 and transmitting the binary acquisition function into a time point 0; the video synthesis module is used for converting a current picture into RGBA data and writing the RGBA data into a binary image memory space, the CEF3 takes out a frame of binary RGBA picture data from a shared memory object to obtain a current time point 0 picture, and finally all the obtained pictures are synthesized into a video;

the CEF3 calls the binary acquisition function of the JS and transmits the time point 0 to the JS specifically comprises the following contents:

the CEF3 extracts a frame of binary RGBA picture data from the shared memory object, and the obtaining of the picture at the current time point 0 specifically includes the following contents: