A small program canvas rendering method, device, equipment and storage medium
By directly drawing and cacheing applet canvas in the rendering engine, and rendering on a web browser using embedded video tags, the problem of applet canvas rendering performance loss and usage limitations is solved, and efficient cross-end rendering and flexible hierarchical control is achieved. .
Patent Information
- Application Number
- CN202210020937.X
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2022-01-10
- Publication Date
- 2024-12-31
- Estimated Expiration
- 2042-01-10
AI Technical Summary
The rendering method of the existing applet canvas has rendering performance losses and usage limitations, including the performance losses caused by cross-language data exchange, view level restrictions and scroll linkage synchronization notifications.
By calling the drawing API of the applet canvas tag in the rendering engine, the drawing graphics are drawn directly in the rendering engine context, and the drawn canvas is stored in the preset cache area. The embedded video tag is used to render the applet at the same level on the web browser. Canvas, supports CSS and event binding, and realizes cross-end applet canvas rendering.
It reduces the communication overhead between the rendering engine and the web browser, improves rendering performance, supports high frame rate requirements such as animations and games, and reduces usage restrictions, and realizes flexible hierarchical control and scrolling linkage of applet canvas.
Smart Images
Figure CN114371838B_ABST
Abstract
Description
Technical Field
[0001] The present disclosure relates to the field of computer technology, and in particular to the field of image processing technology. Background Art
[0002] The mini-program canvas provides a set of drawing application programming interfaces (APIs) for Web developers, which are often used in animation, game graphics, data visualization, image editing, and real-time video processing. Summary of the invention
[0003] The present disclosure provides a method, apparatus, device and storage medium for rendering a mini-program canvas.
[0004] According to a first aspect of the present disclosure, a method for rendering a mini-program canvas is provided, which is applied to a rendering engine and includes:
[0005] Calling the drawing API of the mini-program canvas tag to draw graphics on the mini-program canvas to obtain a drawn canvas;
[0006] The drawn canvas is stored in a preset buffer area, so that the network browser reads the drawn canvas from the preset buffer area and renders the drawn canvas in the area occupied by the video tag on the network browser;
[0007] The video tag is an embedded tag, and has a canvas rendering function, and the attributes of the video tag on the web browser are the same as the attributes of the mini-program canvas tag on the rendering engine.
[0008] According to a second aspect of the present disclosure, a method for rendering a mini-program canvas is provided, which is applied to a network browser and includes:
[0009] Reading a drawn canvas from a preset buffer area, the drawn canvas being a canvas obtained by the rendering engine calling a drawing API of a mini-program canvas tag to draw graphics on the mini-program canvas;
[0010] Rendering the drawn canvas in the area occupied by the video tag on the web browser;
[0011] The video tag is an embedded tag, and has a canvas rendering function, and the attributes of the video tag on the web browser are the same as the attributes of the mini-program canvas tag on the rendering engine.
[0012] According to a third aspect of the present disclosure, a small program canvas rendering device is provided, which is applied to a rendering engine, including:
[0013] A calling unit, used for calling a drawing API of a mini-program canvas tag to draw a graphic on the mini-program canvas to obtain a drawn canvas;
[0014] A storage unit, used for storing the drawn canvas in a preset buffer area, so that the network browser reads the drawn canvas from the preset buffer area and renders the drawn canvas in the area occupied by the video tag on the network browser;
[0015] The video tag is an embedded tag, and has a canvas rendering function, and the attributes of the video tag on the web browser are the same as the attributes of the mini-program canvas tag on the rendering engine.
[0016] According to a fourth aspect of the present disclosure, a small program canvas rendering device is provided, which is applied to a network browser, comprising:
[0017] A reading unit, used for reading a drawn canvas from a preset buffer area, wherein the drawn canvas is a canvas obtained by the rendering engine calling a drawing API of a mini-program canvas tag to draw graphics on the mini-program canvas;
[0018] A rendering unit, configured to render the drawn canvas in the area occupied by the video tag on the network browser;
[0019] The video tag is an embedded tag, and has a canvas rendering function, and the attributes of the video tag on the web browser are the same as the attributes of the mini-program canvas tag on the rendering engine.
[0020] According to a fifth aspect of the present disclosure, there is provided an electronic device, including:
[0021] at least one processor; and
[0022] a memory communicatively connected to the at least one processor; wherein,
[0023] The memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute any applet canvas rendering method provided in the first aspect or any applet canvas rendering method provided in the second aspect.
[0024] According to a sixth aspect of the present disclosure, a non-transitory computer-readable storage medium storing computer instructions is provided, wherein the computer instructions are used to enable the computer to execute any applet canvas rendering method provided according to the first aspect or any applet canvas rendering method provided according to the second aspect.
[0025] According to a seventh aspect of the present disclosure, a computer program product is provided, including a computer program, which, when executed by a processor, implements any applet canvas rendering method provided in the first aspect or any applet canvas rendering method provided in the second aspect.
[0026] It should be understood that the content described in this section is not intended to identify the key or important features of the embodiments of the present disclosure, nor is it intended to limit the scope of the present disclosure. Other features of the present disclosure will become easily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS
[0027] The accompanying drawings are used to better understand the present solution and do not constitute a limitation of the present disclosure.
[0028] Figure 1 A schematic diagram of the rendering process of the mini-program canvas in the related art;
[0029] Figure 2 This is a first flow chart of the mini-program canvas rendering method provided by the embodiment of the present disclosure;
[0030] Figure 3 It is a structural schematic diagram of a mini-program canvas rendering system provided by an embodiment of the present disclosure;
[0031] Figure 4 This is a second flowchart of the mini-program canvas rendering method provided by the embodiment of the present disclosure;
[0032] Figure 5 It is a schematic diagram of the mini-program canvas rendering process provided by the embodiment of the present disclosure;
[0033] Figure 6 It is a third flow chart of the mini-program canvas rendering method provided by the embodiment of the present disclosure;
[0034] Figure 7 This is a fourth flow chart of the mini-program canvas rendering method provided by the embodiment of the present disclosure;
[0035] Figure 8 is a schematic diagram of a sub-DOM tree provided by an embodiment of the present disclosure;
[0036] Fig. 9 This is a first structural diagram of a mini-program canvas rendering device provided by an embodiment of the present disclosure;
[0037] Fig.10 It is a second structural schematic diagram of the mini-program canvas rendering device provided by the embodiment of the present disclosure;
[0038] Fig.11 It is a first block diagram of an electronic device for implementing the applet canvas rendering method of the disclosed embodiment;
[0039] Fig.12 is a second block diagram of an electronic device for implementing the mini-program canvas rendering method of the disclosed embodiment;
[0040] Fig.13 It is a third block diagram of an electronic device used to implement the mini-program canvas rendering method of the embodiment of the present disclosure. DETAILED DESCRIPTION
[0041] The following is a description of exemplary embodiments of the present disclosure in conjunction with the accompanying drawings, including various details of the embodiments of the present disclosure to facilitate understanding, which should be considered as merely exemplary. Therefore, it should be recognized by those of ordinary skill in the art that various changes and modifications may be made to the embodiments described herein without departing from the scope and spirit of the present disclosure. Similarly, for the sake of clarity and conciseness, descriptions of well-known functions and structures are omitted in the following description.
[0042] The mini program canvas provides a set of drawing APIs for Web developers, which are often used in animation, game screen, data visualization, image editing, and real-time video processing.
[0043] In the related art, the rendering process of the mini program canvas, such as Figure 1 As shown, including:
[0044] Step 1: The web browser creates a canvas tag on the web view (Web View), that is, creates a canvas node, and configures the properties of the canvas node, wherein the properties of the canvas node include the width and height of the canvas node, and the position of the canvas node on the Web View.
[0045] Step 2: The web browser inserts the canvas node into the DOM tree, calculates the layout of the canvas node, and obtains the properties of the canvas node, including the position (x, y), width, and height of the canvas node relative to the Web View.
[0046] Figure 1 The DOM tree shown also includes nodes of multiple tags such as body, div, text, etc. This is used as an example for explanation in the embodiments of the present disclosure and does not serve as a limitation.
[0047] Step 3: The web browser sends the properties of the canvas node to the client. The client has the canvas native component.
[0048] Step 4: The client uses the canvas native component to insert a native area at the same position on the client view as the position of the canvas node relative to the WebView, and renders the native interface, that is, the canvas content of the canvas node, in the native area.
[0049] Step 5: When the position or width and height of the canvas node on the network view changes, the network browser sends the adjusted canvas node attributes to the client, so that the client adjusts the position and width and height of the native area on the client view accordingly.
[0050] The rendering task of the canvas native component at the Web View layer is very simple. It only needs to render a placeholder element. After that, the client overlays a layer of native interface on this placeholder element.
[0051] However, the above-mentioned mini-program canvas rendering method has the following disadvantages:
[0052] 1) The client view framework is implemented in Java. For example, the Android View framework is implemented in Java. The web browser is implemented in C++. When rendering the mini-program canvas, the client and the web browser need to communicate multiple times. This requires multiple cross-language data exchanges during the mini-program canvas rendering process, such as Java->C++, or C++->Java data exchanges, which in turn results in a loss in rendering performance.
[0053] In actual applications, the mini-program canvas is used in animation, games and other fields that have high requirements for frame rate, and the higher the rendering performance, the better.
[0054] 2) The canvas native component is actually a view native component, which is at a different display level from the Web View. The View native component is at the highest level, so other components in the Web View cannot cover the canvas native component no matter how the overlay order properties (such as z-index) are set.
[0055] The native canvas component cannot apply Cascading Style Sheets (CSS) and does not support multiple event binding methods (such as catch and capture events). When you need to change the background color or font size of the mini-program canvas on the web browser, the client needs to use the native canvas component to modify the code to achieve it.
[0056] In addition, as described in step 5 above, scrolling linkage cannot be achieved between the web browser and the client when displaying the mini-program canvas. The web browser needs to synchronously notify the client of the current position, and the client will synchronously move the mini-program canvas to the corresponding position.
[0057] Based on the above, it can be seen that the mini-program canvas rendering method in the related art has rendering performance loss and usage limitations. To solve this problem, the embodiment of the present disclosure provides a mini-program canvas rendering method, which is applied to a rendering engine. The rendering engine (such as the V8 engine, etc.) has a canvas native component, and the label of the canvas native component is the mini-program canvas label, that is, the canvas label. A video label is created on the web browser associated with the rendering engine. The video label can be a video label or other labels that support embedded videos, which are not limited to this.
[0058] In the disclosed embodiment, the rendering engine and the web browser may be located on the same electronic device or on different electronic devices. The electronic device may be a mobile terminal, a tablet computer, a notebook, or a server, etc., which is not limited thereto.
[0059] In an optional embodiment, in order to support high-frequency calls to the drawing API and reduce the communication overhead between the rendering engine and the network browser, the rendering engine can be bound to the network browser through the host machine, and the mini-program canvas tag runs in the context of the rendering engine. In this way, when rendering the mini-program canvas, the calls to the drawing API are all in a direct binding manner, and the drawing of the mini-program canvas is all performed in the context of the rendering engine, without the need for message communication between the network browser and the rendering engine, thereby supporting high-frequency calls to the drawing API and reducing the communication overhead between the rendering engine and the network browser.
[0060] In the disclosed embodiment, the video tag is an embedded tag, and the video tag has a canvas rendering function, and the attributes of the video tag on the web browser are the same as the attributes of the mini-program canvas tag on the rendering engine. Among them, the attributes of the mini-program canvas tag may include but are not limited to the width, height, position and content of the mini-program canvas.
[0061] In an optional embodiment, the attributes of the video tag include preset special attributes, and the preset special attributes indicate that the video tag is used for rendering the mini-program canvas at the same layer. For example, the preset special attributes can be represented by canvas-type="true". Based on the preset special attributes, it is possible to render the mini-program canvas at the same layer as the area occupied by the video tag. The video tag is an embedded tag, not a native View component. Therefore, the overlay order attribute can be used to control the display level of the video tag, which means that the content of the mini-program canvas can be displayed at any level, reducing the usage restrictions of the mini-program canvas rendering method.
[0062] Based on this, Figure 2 As shown, the above-mentioned applet canvas rendering method includes the following steps:
[0063] Step S21, calling the drawing API of the mini-program canvas tag to draw graphics on the mini-program canvas to obtain a drawn canvas.
[0064] The rendering engine provides a drawing API for the mini-program canvas tag. The rendering engine calls the drawing API to draw graphics on the mini-program canvas displayed in the rendering engine's view. The resulting canvas is called the drawn canvas.
[0065] In an embodiment of the present disclosure, the rendering engine may implement drawing graphics on the mini-program canvas based on a graphics library provided by a graphics processing function (such as a skia function, etc.).
[0066] Step S22, storing the drawn canvas in a preset buffer area, so that the network browser reads the drawn canvas from the preset buffer area, and renders the drawn canvas in the area occupied by the video tag on the network browser.
[0067] In the disclosed embodiment, the preset cache area is a cache area reused by the network browser and the rendering engine. In one example, the video tag is a video tag. When the network browser creates the video tag, it can also configure a content cache area, such as a surface cache area. The content cache area can be used as the preset cache area.
[0068] The preset buffer area may also be a buffer area pre-configured in the host machine. When the web browser creates a video tag, the buffer area is used as the preset buffer area, and the web browser and the rendering engine reuse the buffer area respectively.
[0069] In the disclosed embodiment, the video tag has a canvas rendering function. After the graphics are drawn and the drawn canvas is obtained, the rendering engine stores the drawn canvas in a preset buffer area. Afterwards, the web browser reads the drawn canvas from the preset buffer area, and uses the canvas rendering function of the video tag to render the drawn canvas in the area occupied by the video tag on the web browser.
[0070] In the technical solution provided by the embodiment of the present disclosure, the applet is divided into two operating environments: the master and the slave. The slave is hosted by the network browser, and the master is hosted by the rendering engine. The communication between the two is realized through the host machine. Figure 3 As shown, this supports cross-end mini-program canvas rendering on different operating systems.
[0071] Both the web browser and the rendering engine are implemented in C++. Therefore, when rendering the mini-program canvas, there is no need for cross-language data exchange when the client and the web browser communicate, which reduces the loss in rendering performance. The rendering performance is good and is more suitable for animation, games and other fields that have high requirements on frame rate. For example, the frame rate of the mini-game can be made close to the frame rate of the native component.
[0072] In addition, the video tag is an embedded tag on the web browser. The video tag supports all functions and events supported by the web browser, such as CSS and various event binding methods. In the technical solution provided by the embodiment of the present disclosure, the canvas generated by the canvas native component (i.e., the above-mentioned mini-program canvas) is rendered in the area occupied by the video tag, so that the mini-program canvas rendered on the web browser supports CSS and various event binding methods, reducing the usage restrictions of the mini-program canvas rendering method.
[0073] In addition, the video tag is an embedded tag on the web browser, that is, the mini-program canvas displayed by the video tag can scroll along with the web browser's web view, without synchronously notifying the client of the current position. This further reduces the usage restrictions of the mini-program canvas rendering method.
[0074] In one embodiment of the present disclosure, a method for rendering a mini-program canvas is also provided. Figure 4 As shown, applied to a rendering engine, in this method, steps S44-S45 are the same as steps S21-S22.
[0075] Step S41, sending a query request to a network browser through the host machine, the query request including the identifier of the mini-program canvas tag, so that the network browser obtains the attributes of the video tag matching the identifier and returns the attributes of the video tag to the rendering engine.
[0076] In the disclosed embodiment, the rendering engine sends a query request to the host machine, and the host machine forwards the query request to the network browser. After receiving the query request, the network browser can extract the identifier of the mini-program canvas tag from the query request, and determine the video tag that matches the identifier of the mini-program canvas tag, and then the network browser obtains the attributes of the video tag, such as width, height, position, and canvas content, and returns the obtained video tag attributes to the rendering engine.
[0077] Step S42, receiving the attributes of the video tag returned by the web browser.
[0078] After the web browser obtains the attributes of the video tag, it sends the attributes of the video tag to the host machine, and then the host machine forwards the attributes of the video tag to the rendering engine.
[0079] Step S43, creating a mini-program canvas tag that matches the attributes of the video tag on the rendering engine, and rendering a mini-program canvas that matches the attributes of the video tag in the area occupied by the mini-program canvas tag.
[0080] In the disclosed embodiment, the attributes of the video tag include the width, height, and canvas content of the area occupied by the video tag. After receiving the attributes of the video tag, the rendering engine creates a mini-program canvas tag that matches the attributes of the video tag on the rendering engine. For example, the rendering engine uses the mini-program canvas native component to render the content of the video tag in the area with the same width, height, and position as the video tag.
[0081] For example, Figure 5 As shown, the rendering engine sends a query request to the host, and the query request includes the identifier of the mini program canvas tag, such as Figure 5 The host forwards the query request to the web browser. At this time, the web browser obtains the identifier mycanvas of the applet canvas tag, such as Figure 5 getsurface('#mycanvas') in the web browser. The web browser obtains the attributes of the video tag that matches mycanvas, such as Figure 5 The width (w), height (h) and content (surface) in the image are sent to the host, such as Figure 5 In return(w, h, surface), the host sends (w, h, surface) to the rendering engine, such as Figure 5 The rendering engine obtains (w, h, surface) and renders the surface on the rendering engine's view.
[0082] In the embodiment of the present disclosure, a preset cache area is configured in the host machine, such as Figure 5 The map shown in the figure records the corresponding relationship between the label and content of the mini program canvas. Figure 5 The corresponding relationship between canvas-id and surface is shown. Based on the content stored in the preset buffer area, the content of the video tag on the network browser is adjusted.
[0083] In one example, if the content of the video tag obtained by the rendering engine is empty, the rendering engine uses the native component of the mini-program canvas to render a native interface in the area that matches the attributes of the video tag. The native interface is the mini-program screen.
[0084] In the disclosed embodiment, the rendering engine can use the mini-program canvas tag in real time to adjust the video tag content displayed by the web browser, which is convenient for developers to update the mini-program canvas and reduces the adjustment cost and development cost of the mini-program canvas.
[0085] In addition to the mini-program canvas rendering method applied to the rendering engine, the disclosed embodiment also provides a mini-program canvas rendering method, which is applied to a web browser. A video tag is created on the web browser, and the video tag can be a video tag or other tags that support embedded videos, which are not limited to this. The rendering engine associated with the web browser has a canvas native component, and the tag of the canvas native component is a mini-program canvas tag, that is, a canvas tag.
[0086] In an optional embodiment, to support high-frequency calls to the drawing API and reduce the communication overhead between the rendering engine and the web browser, the rendering engine can be bound to the web browser through the host machine, and the applet canvas tag runs in the context of the rendering engine.
[0087] In the disclosed embodiment, the video tag is an embedded tag, and the video tag has a canvas rendering function, and the attributes of the video tag on the web browser are the same as the attributes of the mini-program canvas tag on the rendering engine. In an optional embodiment, the attributes of the video tag include preset special attributes, and the preset special attributes indicate that the video tag is used for rendering the mini-program canvas on the same layer.
[0088] Based on this, Figure 6 As shown, the above-mentioned applet canvas rendering method includes the following steps:
[0089] Step S61, reading a drawn canvas from a preset buffer area, where the drawn canvas is a canvas obtained by the rendering engine calling a drawing API of the mini-program canvas tag to draw graphics on the mini-program canvas.
[0090] In the embodiment of the present disclosure, the process of the rendering engine drawing the mini-program canvas can be referred to the relevant description of the above steps S21-S22, which will not be repeated here.
[0091] The network browser may read the drawn canvas from the preset buffer area at a fixed time, or may read the drawn canvas from the preset buffer area after receiving a drawing completion message sent by the rendering engine, and there is no limitation on this.
[0092] Step S62, rendering the drawn canvas in the area occupied by the video tag on the web browser.
[0093] In the technical solution provided by the embodiment of the present disclosure, the applet is divided into two operating environments, master and slave. The slave is hosted by the network browser, and the master is hosted by the rendering engine. The communication between the two is realized through the host machine, such as Figure 3 As shown, this supports cross-end mini-program canvas rendering on different operating systems.
[0094] Both the web browser and the rendering engine are implemented in C++. Therefore, when rendering the mini-program canvas, there is no need for cross-language data exchange when the client and the web browser communicate, which reduces the loss in rendering performance. The rendering performance is good and is more suitable for animation, games and other fields that have high requirements on frame rate. For example, the frame rate of the mini-game can be made close to the frame rate of the native component.
[0095] In addition, the video tag is an embedded tag on the web browser, which itself supports CSS and various event binding methods. In the technical solution provided by the embodiment of the present disclosure, the canvas generated by the canvas native component (i.e., the above-mentioned mini-program canvas) is rendered in the area occupied by the video tag, so that the mini-program canvas rendered on the web browser supports CSS and various event binding methods, reducing the usage restrictions of the mini-program canvas rendering method.
[0096] In addition, the video tag is an embedded tag on the web browser, that is, the mini-program canvas displayed by the video tag can scroll along with the web browser's web view, without synchronously notifying the client of the current position. This further reduces the usage restrictions of the mini-program canvas rendering method.
[0097] In one embodiment of the present disclosure, a method for rendering a mini-program canvas is also provided. Figure 7 As shown, applied to a web browser, in this method, steps S76-S77 are the same as steps S61-S62.
[0098] Step S71, receiving an instruction to create a mini-program canvas tag.
[0099] In the disclosed embodiment, the web browser may provide the user with a user interface (UI) for creating a mini-program canvas, and the user may input instructions for creating a mini-program canvas tag to the web browser through the UI. The user may also input instructions for creating a mini-program canvas tag to the web browser through other devices, or may input instructions for creating a mini-program canvas tag to the web browser in other ways, which are not limited to this.
[0100] Step S72, creating a video tag on the web browser according to the instruction.
[0101] In the embodiment of the present disclosure, after receiving an instruction to create a mini-program canvas tag, the web browser can, according to the instruction, declare the mini-program canvas tag, convert the mini-program canvas tag into a video tag after conversion, and then create a video tag on the web browser. The video tag is used for rendering the mini-program canvas on the same layer.
[0102] In an optional embodiment, step S72 may specifically be: according to the instruction for creating the mini-program canvas tag, the web browser may insert an embed tag into the DOM tree, create a sub-DOM tree under the embed tag, and the sub-DOM tree includes a video tag. Based on this, the video tag is created on the web browser.
[0103] For example, the embed tag is an embed tag of Hyper Text Markup Language (Html), the sub DOM tree is an ifame tag, and the ifame tag has a video tag. Based on this, according to the instruction to create the applet canvas tag, the structure of the video tag is created on the web browser, such as Figure 8 shown. Figure 8 The figure also shows nodes with labels such as head, body, videolayer, and surface. Figure 8 This is merely an example and is not intended to be limiting.
[0104] In practical applications, the principle of canvas rendering can reuse the rendering method of the video tag. The video tag includes a surface buffer. The canvas component (i.e., the web browser) constructs a video tag to generate a surface canvas. The canvas native component (i.e., the rendering engine) is responsible for drawing the mini-program canvas, and the web browser is responsible for presenting the mini-program canvas.
[0105] In the disclosed embodiment, on the rendering engine side, the mini-program canvas may be referred to as a canvas, and on the web browser side, the mini-program canvas may be referred to as a surface canvas.
[0106] In an optional embodiment, after creating the video tag, the web browser may also create a preset buffer area, such as Figure 8 The surface cache in the rendering engine and the network browser reuse the preset cache, which is used as the backend storage of the applet canvas.
[0107] Step S73: receiving a query request sent by the rendering engine through the host machine, where the query request includes an identifier of the mini-program canvas tag.
[0108] The rendering engine sends a query request to the host machine, the query request including the identifier of the applet canvas tag; the host machine sends the query request to the network browser; the network browser receives the query request.
[0109] Step S74, obtaining the attributes of the video tag that matches the identifier.
[0110] The web browser obtains the identifier of the applet canvas tag from the query request, obtains the video tag matching the identifier, and obtains the attributes of the video tag.
[0111] Step S75, returning the attributes of the video tag to the rendering engine.
[0112] In the disclosed embodiment, the attributes of the video tag include the width, height, and canvas content of the area occupied by the video tag. After receiving the attributes of the video tag, the rendering engine creates a mini-program canvas tag that matches the attributes of the video tag on the rendering engine. For example, the rendering engine uses the mini-program canvas native component to render the content of the video tag in the area with the same width, height, and position as the video tag.
[0113] In the disclosed embodiment, the rendering engine can use the mini-program canvas tag in real time to adjust the video tag content displayed by the web browser, which is convenient for developers to update the mini-program canvas and reduces the adjustment cost and development cost of the mini-program canvas.
[0114] Corresponding to the above-mentioned applet canvas rendering method, the embodiment of the present disclosure also provides an applet canvas rendering device, which is applied to a rendering engine, such as Fig. 9 As shown, including:
[0115] The calling unit 91 is used to call the drawing API of the mini-program canvas tag to draw graphics on the mini-program canvas to obtain a drawn canvas;
[0116] The storage unit 92 is used to store the drawn canvas in a preset buffer area, so that the network browser reads the drawn canvas from the preset buffer area and renders the drawn canvas in the area occupied by the video tag on the network browser;
[0117] Among them, the video tag is an embedded tag, and the video tag has a canvas rendering function. The properties of the video tag on the web browser are the same as the properties of the mini-program canvas tag on the rendering engine.
[0118] Optionally, the mini-program canvas rendering device may further include:
[0119] A sending unit, used to send a query request to a network browser through a host machine before the drawing API of the mini-program canvas tag, wherein the query request includes an identifier of the mini-program canvas tag, so that the network browser obtains the attributes of the video tag matching the identifier, and returns the attributes of the video tag to the rendering engine;
[0120] A receiving unit, used for receiving the attributes of the video tag returned by the network browser;
[0121] A creation unit is used to create a small program canvas tag that matches the attributes of the video tag on the rendering engine, and render a small program canvas that matches the attributes of the video tag in the area occupied by the small program canvas tag.
[0122] Optionally, the attributes of the video tag include preset special attributes, and the preset special attributes indicate that the video tag is used for the same-layer rendering of the mini-program canvas.
[0123] Optionally, the rendering engine is bound to the web browser via the host machine, and the mini-program canvas tag runs in the context of the rendering engine.
[0124] Corresponding to the above-mentioned applet canvas rendering method, the embodiment of the present disclosure also provides an applet canvas rendering device, which is applied to a network browser, such as Fig.10 As shown, including:
[0125] The reading unit 101 is used to read the drawn canvas from the preset buffer area, where the drawn canvas is the canvas obtained by the rendering engine calling the drawing application program interface API of the mini-program canvas tag to draw graphics on the mini-program canvas;
[0126] A rendering unit 102 is used to render the drawn canvas in the area occupied by the video tag on the web browser;
[0127] Among them, the video tag is an embedded tag, and the video tag has a canvas rendering function. The properties of the video tag on the web browser are the same as the properties of the mini-program canvas tag on the rendering engine.
[0128] Optionally, the mini-program canvas rendering device may further include:
[0129] A first receiving unit, configured to receive an instruction to create a mini-program canvas tag before reading the drawn canvas from a preset buffer area;
[0130] A creation unit, used for creating a video tag on a web browser according to the instruction;
[0131] A second receiving unit is used to receive a query request sent by the rendering engine through the host machine, where the query request includes an identifier of the mini-program canvas tag;
[0132] An acquisition unit, used to acquire the attribute of the video tag matching the identifier;
[0133] The return unit is used to return the attributes of the video tag to the rendering engine.
[0134] Optionally, create a unit, which can be used to:
[0135] According to the instructions, insert the embed tag into the DOM tree;
[0136] Create a sub DOM tree under the embed tag, the sub DOM tree includes the video tag.
[0137] Optionally, the attributes of the video tag include preset special attributes, and the preset special attributes indicate that the video tag is used for the same-layer rendering of the mini-program canvas.
[0138] Optionally, the rendering engine is bound to the web browser via the host machine, and the mini-program canvas tag runs in the context of the rendering engine.
[0139] In the technical solution of the present disclosure, the collection, storage, use, processing, transmission, provision and disclosure of user personal information involved are in compliance with the provisions of relevant laws and regulations and do not violate public order and good morals.
[0140] According to an embodiment of the present disclosure, the present disclosure also provides an electronic device, a readable storage medium and a computer program product.
[0141] Fig.11 A first block diagram of an electronic device 110 for implementing the applet canvas rendering method of an embodiment of the present disclosure is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device may also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the present disclosure described and / or required herein.
[0142] like Fig.11As shown, the device 110 includes a computing unit 111, which can perform various appropriate actions and processes according to a computer program stored in a read-only memory (ROM) 112 or a computer program loaded from a storage unit 118 into a random access memory (RAM) 113. In the RAM 113, various programs and data required for the operation of the device 110 can also be stored. The computing unit 111, the ROM 112, and the RAM 113 are connected to each other via a bus 114. An input / output (I / O) interface 115 is also connected to the bus 114.
[0143] A number of components in the device 110 are connected to the I / O interface 115, including: an input unit 116, such as a keyboard, a mouse, etc.; an output unit 117, such as various types of displays, speakers, etc.; a storage unit 118, such as a disk, an optical disk, etc.; and a communication unit 119, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 119 allows the device 110 to exchange information / data with other devices through a computer network such as the Internet and / or various telecommunication networks.
[0144] The computing unit 111 may be a variety of general and / or special processing components with processing and computing capabilities. Some examples of the computing unit 111 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various dedicated artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, digital signal processors (DSPs), and any appropriate processors, controllers, microcontrollers, etc. The computing unit 111 performs the various methods and processes described above, such as the small program canvas rendering method. For example, in some embodiments, the small program canvas rendering method may be implemented as a computer software program, which is tangibly contained in a machine-readable medium, such as a storage unit 118. In some embodiments, part or all of the computer program may be loaded and / or installed on the device 110 via ROM 112 and / or communication unit 119. When the computer program is loaded into RAM 113 and executed by the computing unit 111, one or more steps of the small program canvas rendering method described above may be performed. Alternatively, in other embodiments, the computing unit 111 may be configured to execute the small program canvas rendering method in any other appropriate manner (e.g., by means of firmware).
[0145] Fig.12 A second block diagram of an electronic device for implementing the mini-program canvas rendering method of an embodiment of the present disclosure is shown, including:
[0146] at least one processor 121; and
[0147] A memory 122 is communicatively connected to at least one processor 121; wherein,
[0148] The memory 122 stores instructions that can be executed by at least one processor 121. The instructions are executed by at least one processor 121 so that at least one processor 121 can execute any of the above-mentioned small program canvas rendering methods applied to the rendering engine.
[0149] Fig.13 A third block diagram of an electronic device for implementing the applet canvas rendering method of the embodiment of the present disclosure is shown, including:
[0150] at least one processor 131; and
[0151] A memory 132 is communicatively connected to at least one processor 131; wherein,
[0152] The memory 132 stores instructions that can be executed by at least one processor 131. The instructions are executed by at least one processor 131 so that at least one processor 131 can execute any of the above-mentioned small program canvas rendering methods applied to the network browser.
[0153] The embodiment of the present disclosure also provides a non-transitory computer-readable storage medium storing computer instructions, wherein the computer instructions are used to enable the computer to execute any applet canvas rendering method applied to a rendering engine as described above.
[0154] The embodiment of the present disclosure also provides a non-transitory computer-readable storage medium storing computer instructions, wherein the computer instructions are used to enable the computer to execute any of the above-mentioned applet canvas rendering methods applied to a network browser.
[0155] The embodiments of the present disclosure further provide a computer program product, including a computer program, which, when executed by a processor, implements any of the above-mentioned mini-program canvas rendering methods applied to a rendering engine.
[0156] The embodiments of the present disclosure also provide a computer program product, including a computer program, which, when executed by a processor, implements any of the above-mentioned mini-program canvas rendering methods applied to a network browser.
[0157] Various implementations of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), systems on chips (SOCs), complex programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various implementations can include: being implemented in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which can be a special purpose or general purpose programmable processor that can receive data and instructions from a storage system, at least one input device, and at least one output device, and transmit data and instructions to the storage system, the at least one input device, and the at least one output device.
[0158] The program code for implementing the method of the present disclosure may be written in any combination of one or more programming languages. These program codes may be provided to a processor or controller of a general-purpose computer, a special-purpose computer, or other programmable data processing device, so that the program code, when executed by the processor or controller, enables the functions / operations specified in the flow chart and / or block diagram to be implemented. The program code may be executed entirely on the machine, partially on the machine, partially on the machine and partially on a remote machine as a stand-alone software package, or entirely on a remote machine or server.
[0159] In the context of the present disclosure, a machine-readable medium may be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, device, or equipment. A machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, device, or equipment, or any suitable combination of the foregoing. A more specific example of a machine-readable storage medium may include an electrical connection based on one or more lines, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
[0160] To provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and pointing device (e.g., a mouse or trackball) through which the user can provide input to the computer. Other types of devices can also be used to provide interaction with the user; for example, the feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including acoustic input, voice input, or tactile input).
[0161] The systems and techniques described herein may be implemented in a computing system that includes back-end components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes front-end components (e.g., a user computer with a graphical user interface or a web browser through which a user can interact with implementations of the systems and techniques described herein), or a computing system that includes any combination of such back-end components, middleware components, or front-end components. The components of the system may be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: a local area network (LAN), a wide area network (WAN), and the Internet.
[0162] A computer system may include a client and a server. The client and the server are generally remote from each other and usually interact through a communication network. The relationship of client and server is generated by computer programs running on respective computers and having a client-server relationship with each other. The server may be a cloud server, a server of a distributed system, or a server combined with a blockchain.
[0163] It should be understood that the various forms of processes shown above can be used to reorder, add or delete steps. For example, the steps recorded in this disclosure can be executed in parallel, sequentially or in different orders, as long as the desired results of the technical solutions disclosed in this disclosure can be achieved, and this document does not limit this.
[0164] The above specific implementations do not constitute a limitation on the protection scope of the present disclosure. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions can be made according to design requirements and other factors. Any modification, equivalent substitution and improvement made within the spirit and principle of the present disclosure shall be included in the protection scope of the present disclosure.
Claims
1. A method for rendering a mini-program canvas, applied to a rendering engine, wherein the rendering engine has a native component with a label of a mini-program canvas label, and the mini-program canvas is a canvas generated by the native component, comprising: Sending a query request to a network browser through the host machine, the query request including the identifier of the mini-program canvas tag, so that the network browser obtains the attributes of the video tag matching the identifier, and returns the attributes of the video tag to the rendering engine; Receiving the attributes of the video tag returned by the network browser; Creating a mini-program canvas tag that matches the attributes of the video tag on the rendering engine, and rendering the mini-program canvas that matches the attributes of the video tag in the area occupied by the mini-program canvas tag; Calling the drawing application program interface API of the mini-program canvas tag to draw graphics on the mini-program canvas to obtain a drawn canvas; The drawn canvas is stored in a preset buffer area, so that the network browser reads the drawn canvas from the preset buffer area and renders the drawn canvas in the area occupied by the video tag on the network browser; Among them, the preset cache area is a cache area reused by the network browser and the rendering engine, the video tag is an embedded tag, and the video tag has a canvas rendering function, and the attributes of the video tag on the network browser are the same as the attributes of the mini-program canvas tag on the rendering engine.
2. The method according to claim 1, wherein: The attributes of the video tag include preset special attributes, and the preset special attributes indicate that the video tag is used for rendering the mini-program canvas at the same layer.
3. The method according to claim 1, wherein: The rendering engine is bound to a network browser via a host machine, and the applet canvas tag runs in the context of the rendering engine.
4. A method for rendering a mini-program canvas, applied to a network browser, wherein the mini-program canvas is a canvas generated by a native component, comprising: receiving an instruction to create a mini-program canvas tag; creating a video tag on the web browser according to the instruction; Receiving, by the host machine, a query request sent by the rendering engine, wherein the query request includes an identifier of the mini-program canvas tag; Obtaining the attributes of the video tag that matches the identifier; Returning the attributes of the video tag to the rendering engine; Reading a drawn canvas from a preset buffer area, the drawn canvas being a canvas obtained by a rendering engine calling a drawing application program interface API of a mini-program canvas tag to draw graphics on the mini-program canvas, the rendering engine having a native component whose tag is the mini-program canvas tag, and the preset buffer area being a buffer area reused by the network browser and the rendering engine; Rendering the drawn canvas in the area occupied by the video tag on the web browser; The video tag is an embedded tag, and has a canvas rendering function, and the attributes of the video tag on the web browser are the same as the attributes of the mini-program canvas tag on the rendering engine.
5. The method according to claim 4, wherein the step of creating the video tag on the web browser according to the instruction comprises: According to the instruction, insert an embed tag into the document object model DOM tree; A sub DOM tree is created under the embed tag, the sub DOM tree including the video tag.
6. The method according to any one of claims 4 to 5, wherein: The attributes of the video tag include preset special attributes, and the preset special attributes indicate that the video tag is used for rendering the mini-program canvas at the same layer.
7. The method according to any one of claims 4 to 5, wherein: The rendering engine is bound to a network browser via a host machine, and the applet canvas tag runs in the context of the rendering engine.
8. A mini-program canvas rendering device, applied to a rendering engine, wherein the rendering engine has a native component with a label of a mini-program canvas label, and the mini-program canvas is a canvas generated by the native component, comprising: A sending unit, configured to send a query request to a network browser through a host machine, wherein the query request includes an identifier of the mini-program canvas tag, so that the network browser obtains an attribute of a video tag matching the identifier, and returns the attribute of the video tag to the rendering engine; A receiving unit, configured to receive the attributes of the video tag returned by the network browser; A creating unit, configured to create a mini-program canvas tag matching the attributes of the video tag on the rendering engine, and render the mini-program canvas matching the attributes of the video tag in the area occupied by the mini-program canvas tag; A calling unit, used for calling a drawing application program interface API of a mini-program canvas tag to draw a graphic on the mini-program canvas to obtain a drawn canvas; A storage unit, used for storing the drawn canvas in a preset buffer area, so that the network browser reads the drawn canvas from the preset buffer area and renders the drawn canvas in the area occupied by the video tag on the network browser; Among them, the preset cache area is a cache area reused by the network browser and the rendering engine, the video tag is an embedded tag, and the video tag has a canvas rendering function, and the attributes of the video tag on the network browser are the same as the attributes of the mini-program canvas tag on the rendering engine.
9. The device according to claim 8, wherein: The attributes of the video tag include preset special attributes, and the preset special attributes indicate that the video tag is used for rendering the mini-program canvas at the same layer.
10. The device according to claim 8, wherein: The rendering engine is bound to a network browser via a host machine, and the applet canvas tag runs in the context of the rendering engine.
11. A mini-program canvas rendering device, applied to a network browser, wherein the mini-program canvas is a canvas generated by a native component, comprising: A first receiving unit, configured to receive an instruction to create a mini-program canvas tag; A creating unit, configured to create a video tag on the web browser according to the instruction; A second receiving unit, configured to receive, through a host machine, a query request sent by a rendering engine, wherein the query request includes an identifier of the mini-program canvas tag; An acquisition unit, configured to acquire an attribute of the video tag matching the identifier; A returning unit, used for returning the attributes of the video tag to the rendering engine; A reading unit, used for reading a drawn canvas from a preset buffer area, wherein the drawn canvas is a canvas obtained by a rendering engine calling a drawing application program interface API of a mini-program canvas tag to draw graphics on the mini-program canvas, wherein the rendering engine has a native component whose tag is the mini-program canvas tag, and the preset buffer area is a buffer area reused by the network browser and the rendering engine; A rendering unit, configured to render the drawn canvas in the area occupied by the video tag on the network browser; The video tag is an embedded tag, and has a canvas rendering function, and the attributes of the video tag on the web browser are the same as the attributes of the mini-program canvas tag on the rendering engine.
12. The device according to claim 11, wherein The attributes of the video tag include preset special attributes, and the preset special attributes indicate that the video tag is used for rendering the mini-program canvas at the same layer.
13. The device according to claim 11, wherein: The rendering engine is bound to a network browser via a host machine, and the applet canvas tag runs in the context of the rendering engine.
14. An electronic device comprising: at least one processor; as well as a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-3 or claims 4-7.
15. A non-transitory computer-readable storage medium storing computer instructions for causing the computer to execute the method according to any one of claims 1-3 or claims 4-7.
16. A computer program product, comprising a computer program, which, when executed by a processor, implements the method according to any one of claims 1-3 or claims 4-7.