CN116150519A

CN116150519A - Dynamic rendering method, device and storage medium

Info

Publication number: CN116150519A
Application number: CN202211625033.6A
Authority: CN
Inventors: 班瑞; 马季春; 华润多; 王佳; 王迪
Original assignee: China United Network Communications Group Co Ltd; China Information Technology Designing and Consulting Institute Co Ltd
Current assignee: China United Network Communications Group Co Ltd; China Information Technology Designing and Consulting Institute Co Ltd
Priority date: 2022-12-16
Filing date: 2022-12-16
Publication date: 2023-05-23

Abstract

The invention provides a dynamic rendering method, a dynamic rendering device and a storage medium, relates to the technical field of page development, and is used for dynamically influencing rendering content by real-time interaction between a browser client and a browser server. The method comprises the following steps: receiving user event data from a browser client, the user event data being used to record rendering events for first image data displayed by a first canvas component of the browser client; creating a rendering event based on the user event data, performing playback processing of the rendering event in a second canvas component associated with the first canvas component, and extracting second image data from the playback processed second canvas component; the second image data is sent to the browser client such that the browser client invokes the first canvas component to display the second image data.

Description

Dynamic rendering method, device and storage medium

Technical Field

The present invention relates to the field of page development technologies, and in particular, to a dynamic rendering method, a dynamic rendering device, and a storage medium.

Background

With the development of scientific technology, the appearance of rendering technology enables the image quality of images and videos in a browser page to be continuously optimized, and the textures and the dark effects of the images seen by a user in the browser page are closer to those seen in actual life.

At present, a main method for rendering an image on a webpage is that a rendering server obtains image data input by a user based on a browser client, the image data is sent to a back-end server, so that the back-end server returns data to be processed corresponding to the image data to the rendering server according to the image data, then the rendering server generates a static page character string according to the data to be processed, and the static page character string is returned to the browser client, so that the browser client renders the static page character string to obtain a rendered image and displays the rendered image.

However, the method only supports static webpages, is rendered by the server and then is provided for the client in one direction, and cannot support real-time interaction between the user and the client to dynamically influence the rendering content.

Disclosure of Invention

The invention provides a dynamic rendering method, a dynamic rendering device and a storage medium, which dynamically influence rendering content by real-time interaction with a browser client.

In a first aspect, a dynamic rendering method is provided, applied to a browser server, and the method includes: receiving user event data from a browser client, the user event data being used to record rendering events for first image data displayed by a first canvas component of the browser client; creating a rendering event based on the user event data, performing playback processing of the rendering event in a second canvas component associated with the first canvas component, and extracting second image data from the playback processed second canvas component; the second image data is sent to the browser client such that the browser client invokes the first canvas component to display the second image data.

The technical scheme provided by the invention has at least the following beneficial effects: the user can dynamically adjust the image displayed by the first canvas component through real-time interaction with the browser client, and then the browser client records the interaction content with the client to form user event data and sends the user event data to the browser server. Therefore, the browser server side can update and render the picture in the second canvas component related to the first canvas component according to the received user event data in real time, so that the effect of the real-time interaction of the user through the browser client side and the browser server side on rendering the content is achieved, and the high-quality rendering of the picture is guaranteed.

In one possible implementation manner, a target server interpreter Puppeterer window corresponding to the session identifier is found based on the session identifier corresponding to the connection pre-established between the browser client and the server; and sending the user event data to the target Puppeterer window to call the target Puppeterer window to create rendering events based on the user event data, and replaying the rendering events in the second canvas component to obtain an updated second canvas component.

Based on the possible implementation manner, the browser server side can quickly find a target Puppeterer window corresponding to the session identifier based on the session identifier corresponding to the connection pre-established between the browser client side and the server side, and call the target Puppeterer window to render the image based on the user event data, so that the resource consumption greatly rendering process is transferred from the browser client side to the browser server side, and the image from any device can be rendered with high quality.

In another possible implementation, the rendering event includes any one of: pointer entry pointer event, pointer down pointer event, pointer move pointer event, pointer up pointer event, pointer away pointer event, click event, and click event.

Based on the possible implementation manner, the user can adjust the image on the first canvas component by triggering the rendering events, and the browser client can record the rendering events to form user event data, so that the browser server can receive and complete updating rendering of the image in real time.

In another possible implementation, window size adjustment data is received from a browser client, the window size adjustment data including a current size of a first canvas component; adjusting the size of the second canvas component based on the current size of the first canvas component, wherein the size of the second canvas component after the size adjustment is matched with the current size of the first canvas component; extracting third image data from the resized second canvas component; the third image data is sent to the browser client such that the browser client invokes the first canvas component to display the third image data.

Based on the possible implementation manner, the canvas component of the browser server can be adjusted in real time according to the size of the first canvas component, so that the image data rendered by the browser server is more accurate, and the purpose of dynamically influencing the rendering content by real-time interaction with the browser client is further realized.

In a second aspect, a dynamic rendering method is provided, applied to a browser client, and the method includes: transmitting user event data to a browser server, wherein the user event data is used for recording a rendering event of first image data displayed by a first canvas component of a browser client; receiving second image data sent by a browser server, wherein the second image data is extracted from a second canvas component after the second canvas component associated with the first canvas component performs playback processing of a rendering event; the first canvas component is invoked to display the second image data.

In a possible implementation manner, the rendering event includes any one of the following: pointer entry pointer event, pointer down pointer event, pointer move pointer event, pointer up pointer event, pointer leave pointer event, click event, and click event

In another possible implementation, window size adjustment data is sent to the browser server, the window size adjustment data including a current size of the first canvas component; receiving third image data from a browser server, wherein the third image data is extracted from a second canvas component with the adjusted size, and the size of the second canvas component is matched with the current size of the first canvas component; the first canvas component is invoked to display third image data.

In a third aspect, a dynamic rendering device is provided, and is applied to a browser server, where the device includes: the first receiving module is used for receiving user event data from the browser client, wherein the user event data is used for recording rendering events of first image data displayed by a first canvas component of the browser client;

the processing module is used for creating a rendering event based on the user event data, performing playback processing of the rendering event in a second canvas component associated with the first canvas component, and extracting second image data from the second canvas component after the playback processing;

and the first sending module is used for sending the second image data to the browser client so that the browser client calls the first canvas component to display the second image data.

A possible implementation manner, the processing module is specifically configured to: based on a session identifier corresponding to a connection pre-established between a browser client and a server, a target Puppeterer window corresponding to the session identifier is found; and sending the user event data to the target Puppeterer window to call the target Puppeterer window to create rendering events based on the user event data, and replaying the rendering events in the second canvas component to obtain an updated second canvas component.

In another possible implementation manner, the first receiving module is further configured to receive window size adjustment data from the browser client, where the window size adjustment data includes a current size of the first canvas component; the processing module is also used for adjusting the size of the second canvas component based on the current size of the first canvas component, and the size of the second canvas component after the size adjustment is matched with the current size of the first canvas component; the processing module is also used for extracting third image data from the second canvas component after the size is adjusted; the first sending module is further configured to send the third image data to the browser client, so that the browser client invokes the first canvas component to display the third image data.

In a fourth aspect, a dynamic rendering apparatus is provided, applied to a browser client, the apparatus including:

the second sending module is used for sending user event data to the browser server, wherein the user event data is used for recording a rendering event of the first image data displayed by the first canvas component of the browser client;

the second receiving module is used for receiving second image data sent by the browser server, wherein the second image data is extracted from a second canvas component after the second canvas component associated with the first canvas component performs playback processing of a rendering event;

and the calling module is used for calling the first canvas component to display the second image data.

In one possible implementation, the rendering event includes any one of: pointer entry pointer event, pointer down pointer event, pointer move pointer event, pointer up pointer event, pointer away pointer event, click event, and click event.

In another possible implementation manner, the second sending module is further configured to send window size adjustment data to the browser server, where the window size adjustment data includes a current size of the first canvas component; the second receiving module is also used for receiving third image data from the browser server, the third image data is extracted from the second canvas component after the size is adjusted, and the size of the second canvas component after the size is adjusted is matched with the current size of the first canvas component; and the calling module is also used for calling the first canvas component to display the third image data.

In a fifth aspect, there is provided a communication apparatus comprising: a processor and a memory for storing processor-executable instructions; wherein the processor is configured to perform a dynamic rendering method as in the first aspect and any one of its possible implementations.

In a sixth aspect, a server is provided, including: a processor, a memory for storing instructions executable by the processor; wherein the processor is configured to execute instructions to implement the dynamic rendering method as provided by the first aspect and any one of its possible implementations.

In a seventh aspect, a client is provided, including: a processor, a memory for storing instructions executable by the processor; wherein the processor is configured to execute instructions to implement the dynamic rendering method as provided by the second aspect and any one of its possible implementations.

In an eighth aspect, a computer readable storage medium is provided, which when executed by a processor of a server side, enables the server side to perform the dynamic rendering method as provided by the first aspect and any one of its possible implementations; alternatively, the instructions in the computer-readable storage medium, when executed by a processor of the client, enable the client to perform the dynamic rendering method as provided by the second aspect and any one of its possible implementations.

For a detailed description of the second to eighth aspects of the invention and various implementations thereof, reference may be made to the detailed description of the first aspect and various implementations thereof. The advantages of the second to eighth aspects and various implementations thereof may be referred to for analysis of the advantages of the first aspect and various implementations thereof, and will not be described here in detail.

Drawings

FIG. 1 is a schematic diagram of a dynamic rendering system according to an embodiment of the present invention;

FIG. 2 is a flowchart illustrating a dynamic rendering method according to an embodiment of the present invention;

FIG. 3 is a second flowchart of a dynamic rendering method according to an embodiment of the present invention;

FIG. 4 is a flowchart III of a dynamic rendering method according to an embodiment of the present invention;

fig. 5 is a schematic structural diagram of a dynamic rendering device according to an embodiment of the present invention;

fig. 6 is a schematic structural diagram of a dynamic rendering device according to a second embodiment of the present invention;

fig. 7 is a schematic structural diagram of a server according to an embodiment of the present invention.

Detailed Description

The following description of the embodiments of the present invention will be made clearly and completely with reference to the accompanying drawings, in which it is apparent that the embodiments described are only some embodiments of the present invention, but not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.

In the present invention, the words "exemplary" or "such as" are used to mean serving as an example, instance, or illustration. Any embodiment or design described herein as "exemplary" or "for example" should not be construed as preferred or advantageous over other embodiments or designs. Rather, the use of words such as "exemplary" or "such as" is intended to present related concepts in a concrete fashion.

In addition, in the description of the embodiments of the present invention, unless otherwise indicated, "/" means or, for example, a/B may mean a or B. "and/or" herein is merely an association relationship describing an association object, and means that three relationships may exist, for example, a and/or B may mean: a exists alone, A and B exist together, and B exists alone. In addition, in the description of the embodiments of the present invention, "plurality" means two or more than two.

With the rapid development of mobile internet applications, various mobile terminal application products are layered endlessly, and the requirements of users on the application products of the mobile terminal are higher and higher while the selection of the application products of the mobile terminal is more and more. In order to attract the eyes of users, a large number of application products, such as network games, electronic maps and the like, adopt a large number of three-dimensional rendering technologies to create a three-dimensional scene with more realism.

In the case of a relatively large number of nodes, such as more than 100 nodes, rendering of the 3D topology will consume graphics processor (Graphics Processing Unit, GPU) resources very much, and if the device does not have a dedicated GPU, it will consume central processor (Central Processing Unit, CPU) resources very much, which puts a limitation on the information and data presentation functions of the 3D topology.

However, most of the existing rendering methods are implemented by browser clients, so that a large amount of rendering often consumes a large amount of memory and video memory resources of the browser clients during running, delay of image rendering occurs even if rendering work is put on a browser server in some existing technologies, and a user cannot dynamically influence rendering content by real-time interaction between the browser clients and the browser server.

In view of the above, the present invention provides a dynamic rendering method, applied to a browser server, for recording a rendering event of first image data displayed by a first canvas component of the browser client by receiving user event data from the browser client; creating a rendering event based on the user event data, performing playback processing of the rendering event in a second canvas component associated with the first canvas component, and extracting second image data from the playback processed second canvas component; the second image data is sent to the browser client such that the browser client invokes the first canvas component to display the second image data. In this way, the rendering work with extremely high resource consumption is transferred to the service end with abundant resources by the browser client end with short resources, and the rendering content is dynamically influenced by real-time interaction with the browser client end under the condition that the interactivity with the user is maintained.

Fig. 1 is a schematic diagram of a dynamic rendering system to which the method according to the embodiment of the present invention is applicable. As shown in fig. 1, the dynamic rendering system includes a browser client 01 and a browser server 02.

The browser client 01 comprises a websocket client 011, a first canvas component 012 and a first rendering device 013.

The browser server 02 includes a rendering server 021 and a server interpreter Puppeter window 022.

The rendering server 021 includes a websocket server 0211 and a second rendering device 0212.

The pulser window 022 includes a websocket client 0221 and a second canvas component 0222.

The first canvas component 012 and the second canvas component 0222 contain a window object 0121 and a window object 02221, respectively.

In some embodiments, the specific process that the client completes rendering by the browser server 02 after the browser 01 draws the picture for the first time includes:

the rendering server 021 establishes a first websocket connection through a websocket server 0211 and a websocket client 011 of a browser client. And assigns a globally unique session ID to browser client 01, which is uniformly assigned and maintained by rendering server 021.

The rendering server 021 establishes a second websocket connection through the websocket server 0211 and the websocket client 0221 in the Puppeter window 022. And assigns a globally unique session ID to the pulser window 022.

The rendering server 021 establishes a globally unique mapping relationship between the session ID corresponding to the browser client 01 and the session ID corresponding to the Puppeter window 022.

The browser client 01 dynamically creates a first canvas component 012 in an html web page of the browser, and adds a callback function on the first canvas component 012 for a pointer entering a pointer event, a pointer pressing a pointer down event, a pointer moving a pointer event, a pointer lifting a pointer up event, a pointer leaving a pointer leave a pointer event, a single click event, and a double click dbclick event, and also adds a callback function for an adjustment resize event of a window object 0121.

The pointer event is an event that a user moves into a window of the browser client 01 through a mouse control pointer; the pointedown event is an event that a user selects and clicks on a window of the browser client 01 through a mouse manipulation finger; the pointer event is a pointer dragging event that a user drags a pointer to the size of a window 01 of a browser client through a mouse, or drags a picture on a first canvas component, and the like; the pointer event is an event that a user moves upwards by manipulating a pointer through a mouse; the pointerslave event is an event that a user leaves by manipulating a pointer through a mouse; the click event is a click event triggered by a pointer through a mouse by a user; the dbclick event is a double click event triggered by a user over a mouse to a pointer.

In this way, the user can adjust the image on the first canvas component by calling the callback functions on the first canvas component, and the browser client can record the rendering event of the first image data displayed on the first canvas component generated by calling the callback functions.

The browser client 01 sends parameters such as the links and nodes data of the 3D topological graph to be rendered currently, the size of the window of the browser client 01, and the size of the first canvas component 012 in the current browser window to the rendering server 021.

The rendering server 021 dynamically edits received parameters such as the links and the nodes data of the 3D topological graph which is required to be rendered currently, the size of a window of the browser client 01, the size of a first canvas component 012 in the current browser window, and a session ID corresponding to the browser client 01 into url.

The rendering server 021 calls the Puppeterer window 022, creates a browser page in the headless mode, and passes the edited url to the Puppeterer window 022.

The Puppeterer window 022 specifies the size of the Puppeterer window 022 by a window-size parameter according to the size of the browser client 01 window in url.

The Puppeterer window 022 dynamically creates a second canvas component 0222 of the 3D topological graph by using javascript codes, specifies the size of the second canvas component 0222 through width and height parameters, and simultaneously draws nodes and links data of the 3D topological graph which are currently required to be rendered in url into the second canvas component 0222.

The Puppeterer window 022 finds a corresponding browser client 01 based on the mapping relation by the session ID corresponding to the browser client 01 contained in url, extracts image data from the second canvas component 0222, and sends the extracted image data to the browser client 01.

After receiving the picture data, the browser client 01 draws the picture data into the first canvas component 012 by a url.

The dynamic rendering method provided by the embodiment of the invention is described in detail below with reference to the accompanying drawings.

Fig. 2 is a flowchart of a dynamic rendering method according to an embodiment of the present invention. As shown in fig. 2, the method comprises the steps of:

s101, a browser client sends user event data to a browser server; accordingly, the browser client receives user event data from the browser client.

The user event data is used to record rendering events for first image data displayed by a first canvas component of the browser client. Rendering events include any of the following: a pointer event, a pointer event a pointerslave event, a click event, and a dbclick event.

In some embodiments, when a user modifies a picture on a first canvas component of a browser client by manipulating a pointer with a mouse, a triggered pointer entry event, pointer press event, pointer movement event, pointer lift event, pointer exit event, single click event, and double click event are recorded by the browser client in a manner of calling a corresponding callback function to become user event data and sent to a browser server.

In some embodiments, the browser client, upon discovering that the user triggered a rendering event on the first canvas component, may make a shallow copy of the rendering event and then send it to a rendering server in the browser server. In this way, due to the bidirectional interaction characteristic of the topology, the browser server can receive and process the interaction operation information from the browser client in real time while completing content rendering.

S102, the browser service end creates a rendering event based on the user event data, performs playback processing of the rendering event in a second canvas component associated with the first canvas component, and extracts second image data from the second canvas component after the playback processing.

In some embodiments, as shown in fig. 3, step S102 may be embodied as step S1021 and step S1022.

S1021, the browser server searches a target server interpreter Puppeterer window corresponding to the session identifier based on the session identifier corresponding to the connection pre-established between the browser client and the server.

The rendering server is located at the browser server and establishes a globally unique mapping relationship for a session identifier corresponding to the browser client and a session identifier corresponding to the Puppeter window, so that the browser server can find a target server interpreter Puppeter window corresponding to the session identifier based on the session identifier corresponding to the connection pre-established between the browser client and the server.

S1022, the browser server sends the user event data to the target Puppeterer window to call the target Puppeterer window to create a rendering event based on the user event data, and replays the rendering event in the second canvas component to obtain the updated second canvas component.

The Puppeterer window is an interpreter positioned at the browser server and is used for creating rendering events based on user event data and replaying the rendering events in a second canvas component in the window of the Puppeterer window to obtain an updated second canvas component.

In some embodiments, the target Puppeterer window creates a corresponding rendering event by a new method after receiving the user event data, and sends the rendering event to the second canvas component for playback to obtain an updated second canvas component.

In some embodiments, the second image data includes a spectrum and intensity of each point of light on the image and pixel information of the image. For example, the pixel information of an image can be represented in a numerical value, and for a color image, the three primary color components of red, green and blue are commonly used for representing the gray scale. The information for each pixel is extracted sequentially and a discrete array can be used to represent a continuous image.

Based on the method, the rendering work with extremely high resource consumption is transferred from the browser client with short resources to the server with rich resources, so that the resources of the browser client are saved, and meanwhile, the image rendering efficiency is improved.

S103, the browser server side sends second image data to the browser client side; accordingly, the browser client receives the second image data from the browser server.

The second image data is illustratively in png or jpeg format.

In some embodiments, the second image data is sent to the browser client at a preset period, illustratively every 100 milliseconds.

In this way, the server can receive and process the interactive operation information from the browser client in real time while completing the content rendering, and after feedback, the server regenerates the rendered content and then pushes the new rendered content to the client in time, thereby achieving the effects of 'server rendering and client operation'.

S104, the browser client calls the first canvas component to display the second image data.

In some embodiments, after the browser server sends the second image data to the browser client, the browser client draws the second image data into the first canvas component of the browser client by a url.

Based on the user event data sent by the browser client, the browser server can update the rendered content in the second canvas component in real time, and send the updated and rendered image data to the browser client, so that the browser client calls the first canvas component to display the updated and rendered content in real time, and the user can dynamically influence the rendered content through real-time interaction between the browser client and the browser server.

Fig. 4 is a flowchart of another dynamic rendering method according to an embodiment of the present invention. As shown in fig. 4, the dynamic rendering method includes the steps of:

s201, a browser client sends window size adjustment data to a browser server; correspondingly, the browser server receives window size adjustment data from the browser client.

Wherein the window resizing data comprises a current size of the first canvas component.

In some embodiments, the browser client adds a callback function for window size adjustment, and when the user controls the pointer to adjust the window size through the mouse, the browser client records in a mode of calling the callback function for window size adjustment to form window size adjustment data, and sends the window size adjustment data to the browser server. So that the browser server can adaptively adjust the size of the second canvas component according to the window size adjustment data.

S202, the browser server adjusts the size of the second canvas component based on the current size of the first canvas component, the size of the second canvas component after the size adjustment is matched with the current size of the first canvas component, and third image data is extracted from the second canvas component after the size adjustment.

S203, the browser server sends the third image data to the browser client; correspondingly, the browser client receives the third image data from the browser server.

In some embodiments, the browser client receives third image data from the browser server, the third image data extracted from the resized second canvas component having a size that matches the current size of the first canvas component;

s204, the browser client calls the first canvas component to display third image data.

Based on this, a change in the size of the first canvas component caused by the user's resizing of the browser client window, or a resizing event of the first canvas component directly by the user, may be recorded, forming window resizing data. The size of the window of the browser server side is adjusted according to the window size adjustment data, and the size of the second canvas component is adjusted, so that the size of the second canvas component after the size adjustment is matched with the current size of the first canvas component, and further the effect that a user can dynamically influence rendering content through real-time interaction between the browser client side and the browser server side is achieved.

The embodiment of the invention can divide the functional modules of the dynamic rendering device and the like according to the method example, for example, each functional module can be divided corresponding to each function. The integrated modules may be implemented in hardware or in software functional modules. It should be noted that, in the embodiment of the present invention, the division of the modules is schematic, which is merely a logic function division, and other division manners may be implemented in actual implementation.

Fig. 5 shows the dynamic rendering apparatus 40 applied to the browser server involved in the above-described embodiment in the case of dividing the respective functional modules with the respective functions. As shown in fig. 5, the dynamic rendering apparatus 40 includes: a first receiving module 41, a processing module 42 and a first transmitting module 43.

A first receiving module 41, configured to receive user event data from a browser client, where the user event data is used to record a rendering event for first image data displayed by a first canvas component of the browser client;

a processing module 42, configured to create the rendering event based on the user event data, perform playback processing of the rendering event in a second canvas component associated with the first canvas component, and extract second image data from the second canvas component after the playback processing;

A first sending module 43, configured to send the second image data to the browser client, so that the browser client invokes the first canvas component to display the second image data.

In some embodiments, the processing module 42 is specifically configured to: based on a session identifier corresponding to a connection pre-established between the browser client and the server, searching a target Puppeterer window corresponding to the session identifier; and sending the user event data to the target Puppeterer window to call the target Puppeterer window to create the rendering event based on the user event data, and replaying the rendering event in the second canvas component to obtain an updated second canvas component.

In some embodiments, the rendering event includes any one of: a pointer event, a pointer event a pointerslave event, a click event, and a dbclick event.

In some embodiments, the first receiving module 41 is further configured to receive window sizing data from the browser client, the window sizing data including a current size of the first canvas component; the processing module 42 is further configured to adjust a size of the second canvas component based on a current size of the first canvas component, where the adjusted size of the second canvas component matches the current size of the first canvas component; a processing module 42 further configured to extract third image data from the resized second canvas component; the first sending module 43 is further configured to send the third image data to the browser client, so that the browser client invokes the first canvas component to display the third image data.

Fig. 6 shows a dynamic rendering apparatus applied to a browser client as referred to in the above-described embodiment. As shown in fig. 6, the dynamic rendering apparatus 50 includes: a second sending module 51, a second receiving module 52 and a calling module 53.

A second sending module 51, configured to send user event data to a browser server, where the user event data is used to record a rendering event of first image data displayed by a first canvas component of the browser client;

a second receiving module 52, configured to receive second image data sent from the browser server, where the second image data is extracted from a second canvas component after the playback processing of the rendering event is performed by the second canvas component associated with the first canvas component;

and a calling module 53, configured to call the first canvas component to display the second image data.

In some embodiments, the second sending module 51 is further configured to send window size adjustment data to the browser server, where the window size adjustment data includes a current size of the first canvas component; the second receiving module 52 is further configured to receive third image data from the browser server, where the third image data is extracted from a resized second canvas component, and a size of the resized second canvas component matches a current size of the first canvas component; the calling module 53 is further configured to call the first canvas component to display the third image data.

Of course, the dynamic rendering device 40 and the dynamic rendering device 50 include, but are not limited to, the unit modules listed above. In addition, the functions that can be implemented by the above functional units include, but are not limited to, functions corresponding to the method steps in the above examples, and the detailed descriptions of the dynamic rendering device 40 and other modules of the dynamic rendering device 50 may refer to the detailed descriptions of the corresponding method steps, which are not repeated herein in the embodiments of the present invention.

The invention provides a structural schematic diagram of a server. As shown in fig. 7, the server 70 may include at least one processor 701 and a memory 703 for storing processor-executable instructions. Wherein the processor 701 is configured to execute instructions in the memory 703 to implement the data processing method in the above-described embodiments. In addition, server 70 may also include a communication bus 702 and at least one communication interface 704.

The processor 701 may be a processor (central processing units, CPU), a microprocessor unit, ASIC, or one or more integrated circuits for controlling the execution of the programs of the present invention. Communication bus 702 may include a path to transfer information between the aforementioned components.

Communication interface 704, uses any transceiver-like device for communicating with other devices or communication networks, such as ethernet, radio access network (radio access network, RAN), wireless local area network (wireless local area networks, WLAN), etc.

The memory 703 may be, but is not limited to, a read-only memory (ROM) or other type of static storage device that can store static information and instructions, a random access memory (random access memory, RAM) or other type of dynamic storage device that can store information and instructions, an electrically erasable programmable read-only memory (EEPROM), a compact disc-only memory (compact disc read-only memory) or other optical disk storage, a compact disc storage (including compact disc, laser disc, optical disc, digital versatile disc, blu-ray disc, etc.), a magnetic disk storage medium or other magnetic storage device, or any other medium that can be used to carry or store desired program code in the form of instructions or data structures and that can be accessed by a computer.

The memory may be stand alone and be connected to the processing unit by a bus. The memory may also be integrated with the processing unit. The memory 703 is used for storing instructions corresponding to executing the embodiments of the present invention, and is controlled by the processor 701 to execute the instructions. The processor 701 is configured to execute instructions stored in the memory 703 to implement the functions of the method of the embodiment of the present invention. In a particular implementation, as one embodiment, the processor 701 may include one or more CPUs, such as CPU0 and CPU1 in FIG. 7.

In a particular implementation, as one embodiment, server 70 may include multiple processors, such as processor 701 and processor 707 in FIG. 7. Each of these processors may be a single-core (single-CPU) processor or may be a multi-core (multi-CPU) processor. A processor herein may refer to one or more devices, circuits, and/or processing cores for processing data (e.g., computer program instructions).

In a specific implementation, as an embodiment, server 70 may also include an output device 705 and an input device 706. The output device 705 communicates with the processor 701 and may display information in a variety of ways. For example, the output device 705 may be a liquid crystal display (liquid crystal display, LCD), a light emitting diode (light emitting diode, LED) display device, a Cathode Ray Tube (CRT) display device, or a projector (projector), or the like. The input device 706 is in communication with the processor 701 and may accept user input in a variety of ways. For example, the input device 706 may be a mouse, keyboard, touch screen device, or sensing device, among others.

Those skilled in the art will appreciate that the structure shown in fig. 7 is not limiting of server 70 and may include more or fewer components than shown, or may combine certain components, or may employ a different arrangement of components.

Meanwhile, the schematic structural diagram of another hardware of the client provided by the present invention may refer to the description of the server 70 in fig. 7, which is not described herein. Except that the client comprises a processor for performing the steps performed by the client in the above-described embodiments.

In addition, the present invention also provides a computer-readable storage medium including instructions that, when executed by a processor, cause the processor to perform the dynamic rendering method as provided in the above embodiments.

The foregoing is merely illustrative of specific embodiments of the present invention, and the scope of the present invention is not limited thereto, but any changes or substitutions within the technical scope of the present invention should be covered by the scope of the present invention. Therefore, the protection scope of the present invention should be subject to the protection scope of the claims.

Claims

1. A dynamic rendering method, which is applied to a browser server, the method comprising:

receiving user event data from a browser client, the user event data being used to record a rendering event for first image data displayed by a first canvas component of the browser client;

creating the rendering event based on the user event data, performing playback processing of the rendering event in a second canvas component associated with the first canvas component, and extracting second image data from the second canvas component after the playback processing;

And sending the second image data to the browser client so that the browser client calls the first canvas component to display the second image data.

2. The method of claim 1, wherein the creating the rendering event based on the user event data and repeating the rendering event in a second canvas component corresponding to the first canvas component to obtain an updated second canvas component comprises:

searching a target browser server interpreter Puppeterer window corresponding to the session identifier based on the session identifier corresponding to the connection pre-established between the browser client and the browser server;

and sending the user event data to the target Puppeterer window to call the target Puppeterer window to create the rendering event based on the user event data, and replaying the rendering event in the second canvas component to obtain an updated second canvas component.

3. The method of claim 2, wherein the rendering event comprises any one of: pointer entry pointer event, pointer down pointer event, pointer move pointer event, pointer up pointer event, pointer away pointer event, click event, and click event.

4. A method according to any one of claims 1 to 3, further comprising:

receiving window size adjustment data from the browser client, the window size adjustment data comprising a current size of the first canvas component;

based on the current size of the first canvas component, adjusting the size of the second canvas component, wherein the size of the second canvas component after the size adjustment is matched with the current size of the first canvas component;

extracting third image data from the resized second canvas component;

and sending the third image data to the browser client so that the browser client calls the first canvas component to display the third image data.

5. A dynamic rendering method, applied to a browser client, the method comprising:

user event data is sent to a browser server side, and the user event data is used for recording rendering events of first image data displayed by a first canvas component aiming at a browser client side;

receiving second image data sent by the browser server, wherein the second image data is extracted from a second canvas component after the second canvas component associated with the first canvas component performs playback processing of the rendering event;

And calling the first canvas component to display the second image data.

6. The method of claim 5, wherein the rendering event comprises any one of: pointer entry pointer event, pointer down pointer event, pointer move pointer event, pointer up pointer event, pointer away pointer event, click event, and click event.

7. The method according to claim 5 or 6, characterized in that the method further comprises:

transmitting window size adjustment data to the browser server, wherein the window size adjustment data comprises the current size of the first canvas component;

receiving third image data from the browser server, wherein the third image data is extracted from a second canvas component with an adjusted size, and the size of the second canvas component with the adjusted size is matched with the current size of the first canvas component;

and calling the first canvas component to display the third image data.

8. A dynamic rendering device, applied to a browser server, comprising:

a first receiving module for receiving user event data from a browser client, the user event data for recording a rendering event for first image data displayed by a first canvas component of the browser client;

The processing module is used for creating the rendering event based on the user event data, performing playback processing of the rendering event in a second canvas component associated with the first canvas component and extracting second image data from the second canvas component after the playback processing;

9. The apparatus of claim 8, wherein the device comprises a plurality of sensors,

the processing module is specifically configured to:

based on a session identifier corresponding to a connection pre-established between the browser client and the browser server, searching a target Puppeterer window corresponding to the session identifier;

10. The apparatus of claim 9, wherein the rendering event comprises any one of: pointer entry pointer event, pointer down pointer event, pointer move pointer event, pointer up pointer event, pointer away pointer event, click event, and click event.

11. The device according to any one of claims 8 to 10, wherein,

the first receiving module is further configured to receive window size adjustment data from the browser client, where the window size adjustment data includes a current size of the first canvas component;

the processing module is further used for adjusting the size of the second canvas component based on the current size of the first canvas component, and the size of the second canvas component after the size adjustment is matched with the current size of the first canvas component;

the processing module is further used for extracting third image data from the second canvas component after the size adjustment;

the first sending module is further configured to send the third image data to the browser client, so that the browser client invokes the first canvas component to display the third image data.

12. A dynamic rendering apparatus for application to a browser client, the apparatus comprising:

the second sending module is used for sending user event data to the browser server, wherein the user event data is used for recording a rendering event of first image data displayed by a first canvas component of the browser client;

The second receiving module is used for receiving second image data sent by the browser server, wherein the second image data is extracted from a second canvas component after the reproduction processing of the rendering event is carried out by the second canvas component associated with the first canvas component;

13. The apparatus of claim 12, wherein the rendering event comprises any one of: pointer entry pointer event, pointer down pointer event, pointer move pointer event, pointer up pointer event, pointer away pointer event, click event, and click event.

14. The device according to claim 12 or 13, wherein,

the second sending module is further configured to send window size adjustment data to the browser server, where the window size adjustment data includes a current size of the first canvas component;

the second receiving module is further configured to receive third image data from the browser server, where the third image data is extracted from a second canvas component with an adjusted size, and the size of the second canvas component with the adjusted size is matched with the current size of the first canvas component;

And the calling module is also used for calling the first canvas component to display the third image data.

15. A server, comprising: a processor, a memory for storing instructions executable by the processor; wherein the processor is configured to execute instructions to implement the dynamic rendering method of any one of claims 1 to 4.

16. A client, comprising: a processor, a memory for storing instructions executable by the processor; wherein the processor is configured to execute instructions to implement the dynamic rendering method of any one of claims 5 to 7.

17. A computer readable storage medium having stored thereon computer instructions which, when run on a communication device, cause the communication device to perform the dynamic rendering method according to any of claims 1 to 7.