A web-side dynamic atlas batch processing method and system

Abstract

The application discloses a web end dynamic atlas batch processing method and system, and relates to the technical field of graphics processing. The method comprises the following steps: creating a graphics container and a Canvas-based atlas texture; obtaining to-be-processed data, traversing a rectangular array, when there is unoccupied space in the rectangular array, placing a small picture in the unoccupied space by using a preset atlas algorithm, segmenting the remaining unoccupied space after the placement, putting a rectangle into the rectangular array, and drawing graphics content at a corresponding position of the atlas texture according to the position of the placement. The application realizes dynamic atlas batch processing of objects such as text and UI top cards which need to change with data, can improve the web end rendering performance, solves the problem of excessive memory occupation of pictures on the web end due to the reduction of texture creation, improves the performance of the web end project, and can uniformly integrate pictures, Canvas text and Canvas graphics required for web end rendering into atlas batch processing.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of graphics processing, and in particular to a web-side dynamic atlas batch processing method and system. BACKGROUND

[0002] With the increasing complexity of three-dimensional projects on the browser side and the increasing number of objects in the scene, performance optimization becomes increasingly important. Common rendering optimization methods usually involve batch processing. For objects such as text and UI top cards that need to change with data, if a large number of small images are packed into a large image for dynamic batch processing using atlas algorithms, the creation of textures can be reduced, and the memory usage can be reduced, thereby improving performance.

[0003] However, existing dynamic atlas solutions on the market can only process images or text, and cannot uniformly include images, Canvas text, and Canvas graphics required for web-side rendering in atlas batch processing. SUMMARY

[0004] The present application solves the problem that existing dynamic atlas solutions cannot uniformly include images, Canvas text, and Canvas graphics required for web-side rendering in atlas batch processing. To solve the above technical problems, the present application provides a web-side dynamic atlas batch processing method and system.

[0005] In a first aspect, a web-side dynamic atlas batch processing method is provided, comprising:

[0006] creating a graphics container and a Canvas-based atlas texture, the atlas texture and the graphics container having the same size and one-to-one correspondence in position, the graphics container comprising an array of rectangles;

[0007] obtaining data to be processed, when the data to be processed is an Image image or a Canvas graphic, traversing the array of rectangles, determining whether there is unoccupied space in the array of rectangles, when there is unoccupied space in the array of rectangles, using a preset atlas algorithm to place the Image image or the Canvas graphic in the unoccupied space, dividing the remaining unoccupied space after placement, placing a rectangle of the Image image or the Canvas graphic into the array of rectangles, and drawing graphic content of the Image image or the Canvas graphic at a corresponding position of the atlas texture according to the placement position;

[0008] When the to-be-processed data is a Canvas text, rectangular size information of the Canvas text is acquired, the rectangular array is traversed, it is judged according to the rectangular size information whether there is unoccupied space in the rectangular array, when there is unoccupied space in the rectangular array, the Canvas text is placed in the unoccupied space using a preset atlas algorithm, the remaining unoccupied space after placement is segmented, the rectangle of the Canvas text is put into the rectangular array, and the text content of the Canvas text is drawn at the corresponding position of the atlas texture according to the placement position.

[0009] In a possible implementation of the first aspect, the method further includes:

[0010] When an Image image, a Canvas graphic or a Canvas text is deleted, the space occupied by the Image image, the Canvas graphic or the Canvas text in the rectangular array is released, and graphic content or text content at the corresponding position of the atlas texture is deleted according to the release position.

[0011] In a possible implementation of the first aspect, the method further includes:

[0012] Rectangles of all unoccupied spaces are sorted according to the longest side;

[0013] The atlas texture is backed up, and the atlas texture and the graphic container are reset;

[0014] All sorted rectangles are traversed, and the preset atlas algorithm is used to find a position in the graphic container for each rectangle to be placed, and the content of the atlas texture is updated according to the placement result.

[0015] In a possible implementation of the first aspect, the preset atlas algorithm includes:

[0016] A graphic container with a size of N*N is horizontally segmented into two small containers, namely a right container and a down container, the right container has a width of N and a height of 0, the down container has a width of N and a height of N, and a rectangle with a width of N and a height of N is put into the rectangular array.

[0017] The rectangular array is traversed, it is judged whether there is remaining space for placing a rectangle with a number 0 in the rectangular data, when there is remaining space for placing the rectangle with the number 0, the rectangle with the number 0 is placed, the remaining space is segmented into two small containers, namely a right container and a down container, and the rectangle with the number 0 is put into the rectangular array.

[0018] In a possible implementation of the first aspect, the rectangular size information of the Canvas text includes:

[0019] using the font attribute, setting the font size and font type of the Canvas text, the font size being the height of the rectangle of the Canvas text;

[0020] using the measureText() interface to obtain the width of the rectangle of the Canvas text.

[0021] In a second aspect, a web-side dynamic atlas batch processing system is provided, comprising:

[0022] a creating unit configured to create a graphics container and a Canvas-based atlas texture, the atlas texture and the graphics container having the same size and one-to-one correspondence in position, the graphics container comprising an array of rectangles;

[0023] a obtaining unit configured to obtain to-be-processed data;

[0024] a processing unit configured to, when the to-be-processed data is an Image image or a Canvas graphic, traverse the array of rectangles, determine whether there is unoccupied space in the array of rectangles, place the Image image or the Canvas graphic in the unoccupied space using a preset atlas algorithm when there is unoccupied space in the array of rectangles, segment the remaining unoccupied space after placement, put the rectangle of the Image image or the Canvas graphic into the array of rectangles, and draw the graphic content of the Image image or the Canvas graphic at the corresponding position of the atlas texture according to the position of placement.

[0025] The processing unit is further configured to, when the to-be-processed data is Canvas text, obtain the rectangle size information of the Canvas text, traverse the array of rectangles, determine whether there is unoccupied space in the array of rectangles according to the rectangle size information, place the Canvas text in the unoccupied space using a preset atlas algorithm when there is unoccupied space in the array of rectangles, segment the remaining unoccupied space after placement, put the rectangle of the Canvas text into the array of rectangles, and draw the text content of the Canvas text at the corresponding position of the atlas texture according to the position of placement.

[0026] In a possible implementation of the second aspect, the processing unit is further configured to, when an Image image, a Canvas graphic or Canvas text is deleted, release the space occupied by the Image image, the Canvas graphic or the Canvas text in the array of rectangles, and delete the graphic content or text content at the corresponding position of the atlas texture according to the released position.

[0027] In a possible implementation of the second aspect, the processing unit is further configured to sort all the rectangles of unoccupied spaces according to the longest side; back up the atlas texture, reset the atlas texture and the graphic container; traverse all the sorted rectangles, and use the preset atlas algorithm to find a position in the graphic container for each rectangle to place, and update the content of the atlas texture according to the placement result.

[0028] In a possible implementation of the second aspect, the preset atlas algorithm comprises:

[0029] The graphic container with a size of N*N is horizontally split into two small containers, a right container and a down container, the right container has a width of N and a height of 0, and the down container has a width of N and a height of N, and a rectangle with a width of N and a height of N is placed in the rectangle array.

[0030] The rectangle array is traversed, and it is determined whether there is remaining space in the rectangle data to place the rectangle with the number 0; when there is remaining space to place the rectangle with the number 0, the rectangle with the number 0 is placed, and the remaining space is split into two small containers, a right container and a down container, and the rectangle with the number 0 is placed in the rectangle array.

[0031] In a possible implementation of the second aspect, the processing unit is specifically configured to use a font attribute to set a font size and a font type, the font size is the height of the rectangle of the Canvas text, and a measureText() interface is used to obtain the width of the rectangle of the Canvas text.

[0032] The scheme realizes dynamic batching of objects such as texts and UI top cards that need to change with data, and can improve the rendering performance of the web end. Since the creation of textures is reduced, the problem of excessive memory occupation of pictures on the web end is solved, and the performance of the web end project is improved. Pictures, Canvas texts and Canvas graphics required for web end rendering can be uniformly included in atlas batch processing.

[0033] The advantages of the additional aspects of the application will be partially given in the following description, partially become obvious from the following description, or be understood through the practice of the application. BRIEF DESCRIPTION OF DRAWINGS

[0034] Figure 1 A design class diagram is provided for an embodiment of the web end dynamic atlas batch processing method of the application;

[0035] Figure 2 A graphic container splitting diagram is provided for an embodiment of the web end dynamic atlas batch processing method of the application;

[0036] Figure 3 This is a schematic diagram illustrating the process of determining whether there is unoccupied space within a rectangular array, provided as an embodiment of the web-based dynamic image atlas batch processing method of the present invention.

[0037] Figure 4 A schematic diagram of the spatial rearrangement process provided for an embodiment of the web-based dynamic atlas batch processing method of the present invention;

[0038] Figure 5 A schematic diagram of the head-breaking algorithm provided for an embodiment of the web-based dynamic image atlas batch processing method of the present invention;

[0039] Figure 6 This is a schematic diagram showing the placement of a rectangle with the number 0 drawn on it, provided as an embodiment of the web-based dynamic image atlas batch processing method of the present invention.

[0040] Figure 7 This is a schematic diagram of a dynamically generated image atlas with rectangles placed, provided as an embodiment of the web-based dynamic image atlas batch processing method of the present invention. Detailed Implementation

[0041] The principles and features of the present invention are described below with reference to the accompanying drawings. The embodiments described are only for explaining the present invention and are not intended to limit the scope of the present invention.

[0042] like Figure 1 The diagram shown is a design class schematic of an embodiment of the web-based dynamic atlas batch processing method of the present invention. The dynamic atlas management class includes four functions: adding small images to the atlas, deleting small images from the atlas, rearranging the atlas, and obtaining the number of small images in the atlas. The atlas algorithm class includes four functions: creating an atlas container, finding the space required for small images, releasing the space occupied by small images, and resetting the atlas container. The small image placeholder information class includes four functions: obtaining the atlas to which the small image belongs, obtaining the atlas texture corresponding to the small image, obtaining the uvTransform of the small image, and obtaining the information of the small image in the atlas.

[0043] Based on the above design, the present invention will be further described below.

[0044] This invention provides a web-based dynamic image atlas batch processing method, comprising:

[0045] Create a graphics container and a Canvas-based atlas texture. The atlas texture and the graphics container have the same size and are positioned in a one-to-one correspondence. The graphics container consists of an array of rectangles.

[0046] For example, you can create a Canvas with a resolution of N*N as an atlas texture. If no parameters are passed, the default size is 2048*2048. It should be noted that atlas textures combine multiple smaller textures into one large texture, thereby reducing the memory usage in the application.

[0047] At the same time, a graphics container is created, which is an N*N virtual rectangular space, as shown in Figure 2 The graphics container is divided into two small containers, right and down, the right container has a width of N and a height of 0, and the down container has a width of N and a height of N. The rectangle is inserted into the rectangular array, which is an ordered rectangular sequence for storing the divided containers.

[0048] The data to be processed is obtained, and when the data to be processed is an Image image or a Canvas graphics, the rectangular array is traversed to determine whether there is unoccupied space in the rectangular array. When there is unoccupied space in the rectangular array, the Image image or the Canvas graphics is placed in the unoccupied space using a preset atlas algorithm, the remaining unoccupied space after placement is divided, the rectangle of the Image image or the Canvas graphics is placed into the rectangular array, and the graphics content of the Image image or the Canvas graphics is drawn at the corresponding position of the atlas texture according to the placement position;

[0049] For example, as shown in Figure 3 An exemplary flowchart for determining whether there is unoccupied space in the rectangular array is provided, the rectangular array is traversed to determine whether there is enough space in the atlas to place the small image. If so, the drawImage() interface can be called to directly draw the small image content at the corresponding position of the atlas texture, and the position information of the small image on the atlas is returned. Since each position of the atlas texture corresponds to each position of the graphics container, placing the small image into the graphics container can directly draw the small image at the corresponding position of the atlas texture.

[0050] Optionally, if there is not enough space to place the small image, Null is returned. At this time, the user can use the atlas rearrangement function to arrange the atlas fragmented space, re-traverse the array to find the position. If no space is found to place the small image, a new atlas needs to be created.

[0051] It should be noted that the drawImage interface provides multiple ways to draw images on the Canvas, for example, including:

[0052] The first kind: drawImage(image, dx, dy)

[0053] The second kind: drawImage(image, dx, dy, dWidth, dHeight)

[0054] The third kind: drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

[0055] The first and second default draw all of the image, and the third draws a clip image, only drawing part of the image.

[0056] Preferably, the third mode is used in the embodiment.

[0057] If the input small image is an Image image or a Canvas figure, the drawImage() function can directly clip the small image content and only copy part of the content without intermediate processing, which can improve performance.

[0058] If the input small image is a Canvas text description object, there is no need to create a Canvas for drawing text, and the fillText() interface of the atlas texture can be directly used to draw text, thereby saving performance in the case of frequent text creation.

[0059] When the to-be-processed data is a Canvas text, the rectangular size information of the Canvas text is obtained, the rectangular array is traversed, and it is determined whether there is unoccupied space in the rectangular array according to the rectangular size information. When there is unoccupied space in the rectangular array, the Canvas text is placed in the unoccupied space using a preset atlas algorithm, the remaining unoccupied space after placement is segmented, the rectangular of the Canvas text is put into the rectangular array, and the text content of the Canvas text is drawn at the corresponding position of the atlas texture according to the position.

[0060] It should be understood that, since the three-dimensional engine of the browser is divided into WebGL and WebGPU, in order to be compatible, the embodiment selects the commonly used Canvas of the browser as the dynamic atlas texture. The Canvas can not only draw pictures and figures, but also draw text, which meets the processing requirements.

[0061] It should be noted that the input to-be-processed data is a small image, which can be an Image image, a Canvas figure, or a Canvas text description object. The Canvas text description object is used to describe the content and attributes of the Canvas text, including font, font size, color, and thickness, etc. The embodiment can obtain the text rectangular size information according to the content and attributes of the Canvas text, find a placeable space in the figure container through a preset atlas algorithm, and draw the text on the atlas texture.

[0062] This embodiment enables dynamic batching of objects such as text and UI top signs that need to change with data, which can greatly improve the rendering performance of the web client. By reducing the creation of textures, it solves the problem of excessive memory consumption of images on the web client, improves the performance of web client projects, and can unify the images, Canvas text and Canvas graphics required for web client rendering into a graph set for batch processing.

[0063] Optionally, in some possible implementations, it also includes:

[0064] When deleting an Image, Canvas graphic, or Canvas text, the space occupied by the Image, Canvas graphic, or Canvas text in the rectangular array is released, and the graphic content or text content at the corresponding position of the atlas texture is deleted according to the release position.

[0065] Optionally, in some possible implementations, because the sizes of the small images vary, the preset atlas algorithm may lead to spatial fragmentation. In this case, the atlas rearrangement function can be used to rearrange the space, such as... Figure 4 As shown, an exemplary spatial rearrangement process is provided, which includes:

[0066] Sort all rectangles with unoccupied space according to their longest side;

[0067] Backup atlas textures, reset atlas textures and graphics containers;

[0068] Traverse all sorted rectangles, use a preset atlas algorithm to find a position for each rectangle in the graphics container and place it, and update the atlas texture content according to the placement result.

[0069] Optionally, in some possible implementations, the preset atlas algorithm includes:

[0070] Divide the N*N graphic container horizontally into two smaller containers, the right container and the down container. The right container has a width of N and a height of 0, and the down container has a width of N and a height of N. Place a rectangle with a width of N and a height of N into the rectangle array.

[0071] Iterate through the rectangle array, checking if there is any remaining space to place a rectangle with the number 0 drawn on it. If there is remaining space, place the rectangle with the number 0 drawn on it, divide the remaining space into two small containers, the right container and the down container, and add the rectangle with the number 0 drawn on it into the rectangle array.

[0072] Optionally, in some possible implementations, obtaining the rectangular size information of the Canvas text specifically includes:

[0073] The font attribute is used to set the font size and font type, and the font size is the height of the rectangle of the Canvas text;

[0074] The measureText() interface is used to obtain the width of the rectangle of the Canvas text.

[0075] The application also provides a web-side dynamic atlas batch processing system, comprising:

[0076] A creating unit is configured to create a graphics container and a Canvas-based atlas texture, the atlas texture and the graphics container have the same size and one-to-one correspondence in position, and the graphics container comprises an array of rectangles.

[0077] An obtaining unit is configured to obtain to-be-processed data.

[0078] A processing unit is configured to, when the to-be-processed data is an Image image or a Canvas graphics, traverse the array of rectangles, determine whether there is unoccupied space in the array of rectangles, place the Image image or the Canvas graphics in the unoccupied space by using a preset atlas algorithm when there is unoccupied space in the array of rectangles, segment the remaining unoccupied space after the placement, place the rectangle of the Image image or the Canvas graphics into the array of rectangles, and draw the graphics content of the Image image or the Canvas graphics at the corresponding position of the atlas texture according to the placement position.

[0079] The processing unit is further configured to, when the to-be-processed data is Canvas text, obtain the rectangle size information of the Canvas text, traverse the array of rectangles, determine whether there is unoccupied space in the array of rectangles according to the rectangle size information, place the Canvas text in the unoccupied space by using a preset atlas algorithm when there is unoccupied space in the array of rectangles, segment the remaining unoccupied space after the placement, place the rectangle of the Canvas text into the array of rectangles, and draw the text content of the Canvas text at the corresponding position of the atlas texture according to the placement position.

[0080] Optionally, in some possible implementation manners, the processing unit is further configured to, when an Image image, a Canvas graphics or Canvas text is deleted, release the space occupied by the Image image, the Canvas graphics or the Canvas text in the array of rectangles, and delete the graphics content or the text content at the corresponding position of the atlas texture according to the release position.

[0081] Optionally, in some possible implementations, the processing unit is also used to sort all unoccupied rectangles according to their longest side; back up the atlas texture, reset the atlas texture and the graphics container; traverse all sorted rectangles, use a preset atlas algorithm to find a position for each rectangle in the graphics container and place it, and update the content of the atlas texture according to the placement result.

[0082] Optionally, in some possible implementations, the preset graph atlas algorithm is a decapitation algorithm, such as... Figure 5 As shown, an exemplary flowchart of a decapitation algorithm is provided. The preset graph set algorithm includes:

[0083] Divide the N*N graphic container horizontally into two smaller containers, the right container and the down container. The right container has a width of N and a height of 0, and the down container has a width of N and a height of N. Place a rectangle with a width of N and a height of N into the rectangle array.

[0084] like Figure 6 As shown, iterate through the rectangle array, check if there is any remaining space to place a rectangle with the number 0 drawn on it. If there is remaining space, place the rectangle with the number 0 drawn on it, divide the remaining space into two small containers, the right container and the down container, and put the rectangle with the number 0 drawn on it into the rectangle array.

[0085] The final atlas with rectangles placed is as follows Figure 7 As shown.

[0086] Optionally, in some possible implementations, the processing unit is specifically used to set the font size and font type using the font attribute, where the font size is the height of the rectangle of the Canvas text; and to obtain the width of the rectangle of the Canvas text using the measureText() interface.

[0087] It should be understood that the above implementation methods are product implementation methods corresponding to the prior method implementation methods. For a description of the product implementation methods, please refer to the description of the prior method implementation methods, which will not be repeated here.

[0088] It should be understood that, without departing from the concept of the present invention, those skilled in the art can combine the above embodiments in any way, and all such combinations are within the protection scope of the present invention.

[0089] It is to be understood that the terminology used herein is for the purpose of describing particular embodiments only and is not intended to be limiting. It is further understood that the use of the singular includes the plural unless otherwise expressly stated and / or when it is obvious from the context that the use of the singular is intended. The description is not to be limited in scope by the specific embodiments described herein. It is to be understood that any such specific embodiments are merely examples of implementing the concepts described herein. It is further understood that individual features of each of the preferred embodiments can be combined with any or all features of the other embodiments. In addition, many modifications can be made to the embodiments described herein in light of the teachings provided herein. Further, any single processing step can be implemented by multiple units and / or any single function can be split into several functions. Thus, other embodiments are within the scope and spirit of the disclosure. The description as set forth is not intended to be exhaustive or to be construed as indicative of the only embodiments which would be considered to be within the scope of the disclosure. The description is intended to be illustrative and not limiting. Many alternatives, modifications, and variations will be apparent to those skilled in the art in light of this disclosure. Accordingly, it should be understood that various changes can be made in the form, details, and / or proportions of any implied embodiment without departing from the scope and spirit of the disclosure. The description is not to be limited by the specific examples provided and it is recognized that many variations are possible while being consistent with the principles of the disclosure. It is intended that the scope of the disclosure shall be limited only to the extent required by the claims.

[0090] In several embodiments provided in the present application, it should be understood that the disclosed device and method can be implemented in other ways. For example, the above-described method embodiments are only illustrative, for example, the division of steps is only a logical function division, and actual implementation can have another division manner, for example, multiple steps can be combined or integrated into another step, or some features can be ignored or not executed.

[0091] The above method, if realized in the form of a software function unit and sold or used as an independent product, can be stored in a computer readable storage medium. Based on such understanding, the technical solutions of the present application essentially or the part of the prior art that contributes to the present application, or the whole or part of the technical solutions can be embodied in the form of a software product. The computer software product is stored in a storage medium, including a plurality of instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the embodiments of the present application. The foregoing storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM, Read-Only Memory), a random access memory (RAM, Random Access Memory), a magnetic disk or an optical disk, and various media that can store program codes.

[0092] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art can easily think of various equivalent modifications or replacements within the technical scope disclosed by the present application, and these modifications or replacements shall be covered within the protection scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.

Claims

1. A batch processing method for dynamic image atlases on a web platform, characterized in that, include: Create a graphics container and a Canvas-based atlas texture, wherein the atlas texture and the graphics container have the same size and are in a one-to-one correspondence, and the graphics container includes a rectangular array; Obtain the data to be processed. When the data to be processed is an Image or a Canvas graphic, traverse the rectangle array and determine whether there is any unoccupied space in the rectangle array. When there is unoccupied space in the rectangle array, use a preset atlas algorithm to place the Image or the Canvas graphic in the unoccupied space. Divide the remaining unoccupied space after placement, put the rectangle of the Image or the Canvas graphic into the rectangle array, and draw the graphic content of the Image or the Canvas graphic at the corresponding position of the atlas texture according to the placement position. When the data to be processed is Canvas text, obtain the rectangle size information of the Canvas text, traverse the rectangle array, determine whether there is any unoccupied space in the rectangle array based on the rectangle size information, when there is unoccupied space in the rectangle array, use a preset atlas algorithm to place the Canvas text in the unoccupied space, divide the remaining unoccupied space after placement, put the rectangle of the Canvas text into the rectangle array, and draw the text content of the Canvas text at the corresponding position of the atlas texture according to the placement position.

2. The web-based dynamic image atlas batch processing method according to claim 1, characterized in that, Also includes: When deleting an Image, Canvas graphic, or Canvas text, the space occupied by the Image, Canvas graphic, or Canvas text in the rectangular array is released, and the graphic content or text content at the corresponding position in the atlas texture is deleted according to the released position.

3. The web-based dynamic image atlas batch processing method according to claim 1 or 2, characterized in that, Also includes: Sort all rectangles with unoccupied space according to their longest side; Back up the atlas texture, and reset the atlas texture and the graphics container; Traverse all sorted rectangles, use the preset atlas algorithm to find a position for each rectangle in the graphic container and place it, and update the content of the atlas texture according to the placement result.

4. The web-based dynamic image atlas batch processing method according to claim 3, characterized in that, The preset atlas algorithm includes: Divide the N*N graphic container horizontally into two smaller containers, the right container and the down container. The right container has a width of N and a height of 0, and the down container has a width of N and a height of N. Place a rectangle with a width of N and a height of N into the rectangle array. Iterate through the rectangle array and determine if there is any remaining space to place a rectangle with the number 0 drawn on it. If there is remaining space, place the rectangle with the number 0 drawn on it, divide the remaining space into two small containers, the right container and the down container, and put the rectangle with the number 0 drawn on it into the rectangle array.

5. The web-based dynamic image atlas batch processing method according to claim 1, characterized in that, Obtaining the rectangular size information of the Canvas text specifically includes: Use the font attribute to set the font size and font type, where the font size is the height of the rectangle containing the Canvas text; Use the measureText() interface to get the width of the rectangle containing the Canvas text.

6. A web-based dynamic image atlas batch processing system, characterized in that, include: A creation unit is used to create a graphics container and a Canvas-based atlas texture. The atlas texture and the graphics container have the same size and their positions correspond one-to-one. The graphics container includes a rectangular array. The acquisition unit is used to acquire data to be processed. The processing unit is configured to, when the data to be processed is an Image or a Canvas graphic, traverse the rectangular array, determine whether there is any unoccupied space in the rectangular array, and when there is unoccupied space in the rectangular array, use a preset atlas algorithm to place the Image or the Canvas graphic in the unoccupied space, divide the remaining unoccupied space after placement, put the rectangle of the Image or the Canvas graphic into the rectangular array, and draw the graphic content of the Image or the Canvas graphic at the corresponding position of the atlas texture according to the placement position; The processing unit is further configured to, when the data to be processed is Canvas text, obtain the rectangle size information of the Canvas text, traverse the rectangle array, determine whether there is any unoccupied space in the rectangle array based on the rectangle size information, and when there is unoccupied space in the rectangle array, use a preset atlas algorithm to place the Canvas text in the unoccupied space, divide the remaining unoccupied space after placement, put the rectangle of the Canvas text into the rectangle array, and draw the text content of the Canvas text at the corresponding position of the atlas texture according to the placement position.

7. The web-based dynamic image atlas batch processing system according to claim 6, characterized in that, The processing unit is also used to release the space occupied by the Image, Canvas graphic, or Canvas text in the rectangular array when deleting the Image, Canvas graphic, or Canvas text, and delete the graphic content or text content at the corresponding position of the atlas texture according to the release position.

8. The web-based dynamic image atlas batch processing system according to claim 6 or 7, characterized in that, The processing unit is also used to sort all the rectangles of unoccupied space according to their longest side; Back up the atlas texture, and reset the atlas texture and the graphics container; Traverse all sorted rectangles, use the preset atlas algorithm to find a position for each rectangle in the graphic container and place it, and update the content of the atlas texture according to the placement result.

9. The web-based dynamic image atlas batch processing system according to claim 8, characterized in that, The preset atlas algorithm includes: Divide the N*N graphic container horizontally into two smaller containers, the right container and the down container. The right container has a width of N and a height of 0, and the down container has a width of N and a height of N. Place a rectangle with a width of N and a height of N into the rectangle array. Iterate through the rectangle array and determine if there is any remaining space to place a rectangle with the number 0 drawn on it. If there is remaining space, place the rectangle with the number 0 drawn on it, divide the remaining space into two small containers, the right container and the down container, and put the rectangle with the number 0 drawn on it into the rectangle array.

10. The web-based dynamic image atlas batch processing system according to claim 6, characterized in that, The processing unit is specifically used to set the font size and font type using the font attribute, wherein the font size is the height of the rectangle of the Canvas text; and to obtain the width of the rectangle of the Canvas text using the measureText() interface.

Images