Front-end multi-layer data processing method and device

Abstract

The embodiment of the application provides a front-end multi-layer data processing method and device, relates to the field of webpage front-ends, and can also be used in the financial field. The method comprises the following steps: analyzing a picture format engineering file, obtaining a corresponding tree-shaped data object, and determining all leaf node layers of a layer combination according to the data structure of the tree-shaped data object; determining a corresponding layer adding strategy according to the layer type of the all leaf node layers and adding the all leaf node layers to a set front-end container. The application can quickly and accurately realize front-end multi-layer analysis and addition, and improves the front-end design efficiency.

Description

Technical Field

[0001] This application relates to the field of web front-end development and can also be used in the financial field, specifically to a front-end multi-layer data processing method and apparatus. Background Technology

[0002] As design requirements become more complex, the number of layers contained in a single PSD project file (Photoshop's proprietary format) is increasing. Due to the asynchronous execution nature of the front-end JavaScript language, there is a problem with the loading order of each layer and their position relative to the canvas container during the parsing process. If the parsing accuracy is not accurate, it will inevitably cause time costs for users to manually adjust each layer, and will also affect the degree of restoration of the original design resources to some extent. Summary of the Invention

[0003] To address the problems in the existing technology, this application provides a front-end multi-layer data processing method and apparatus, which can quickly and accurately realize the parsing and addition of front-end multi-layers, thereby improving front-end design efficiency.

[0004] To solve at least one of the above problems, this application provides the following technical solution:

[0005] Firstly, this application provides a front-end multi-layer data processing method, including:

[0006] The image format project file is parsed to obtain the corresponding tree data object, and all leaf node layers of the layer combination are determined according to the data structure of the tree data object;

[0007] Based on the layer type of all the leaf node layers, determine the corresponding layer addition strategy and add it to the designated front-end container.

[0008] Further, determining all leaf node layers of the layer combination based on the data structure of the tree data object includes:

[0009] Determine all child node layers of the current root node based on the data structure of the tree data object;

[0010] The array of child node layers of all child node layers is traversed and judged. The current node that does not have new child nodes is determined as a leaf node layer, thus obtaining all leaf node layers.

[0011] Further, after determining all child node layers of the current root node based on the data structure of the tree data object, the process includes:

[0012] Arrange all the child node layers in reverse order to obtain a child node layer array.

[0013] Furthermore, after traversing and judging the array of child node layers and determining the current node that has no new child nodes as a leaf node layer, the method further includes:

[0014] Determine whether the current node has a sibling node or whether the parent node of the current node has a sibling node;

[0015] If it does not exist, then it is determined that all leaf node layers have been extracted.

[0016] Further, the step of determining the corresponding layer adding strategy based on the layer type of all leaf node layers and adding them to the designated front-end container includes:

[0017] Traverse all the leaf node layers. If the layer type of the leaf node layer is an image layer, convert the leaf node layer to a file format.

[0018] The image file obtained after file format conversion will be added to the center of the front canvas by default.

[0019] The position of the image file in the front-end canvas is adjusted based on the coordinate information of the image file.

[0020] Furthermore, the step of determining the corresponding layer adding strategy based on the layer type of all leaf node layers and adding them to the designated front-end container also includes:

[0021] Traverse all the leaf node layers. If the layer type of the leaf node layer is a text layer, add the leaf node layer to the front canvas according to the coordinate information of the leaf node layer.

[0022] Furthermore, the step of parsing the image format project file to obtain the corresponding tree data object includes:

[0023] The front-end upload component sends the image format project file to the designated attachment server, so that the attachment server calls the preset file parsing tool to parse the image format project file and obtain the corresponding tree data object.

[0024] Secondly, this application provides a front-end multi-layer data processing device, comprising:

[0025] The node layer determination module is used to parse the image format project file, obtain the corresponding tree data object, and determine all leaf node layers of the layer combination according to the data structure of the tree data object.

[0026] The front-end layer adding module is used to determine the corresponding layer adding strategy based on the layer type of all the leaf node layers and add them to the set front-end container.

[0027] Furthermore, the node layer determination module includes:

[0028] The root node analysis unit is used to determine all child node layers of the current root node based on the data structure of the tree data object.

[0029] The leaf node determination unit is used to traverse and judge the array of child node layers of all child node layers, and determine the current node that does not have new child nodes as a leaf node layer, thereby obtaining all leaf node layers.

[0030] Furthermore, the node layer determination module also includes:

[0031] The reverse sorting unit is used to sort all the child node layers in reverse order to obtain a child node layer array.

[0032] Furthermore, the node layer determination module also includes:

[0033] The sibling node determination unit is used to determine whether the current node has a sibling node or whether the parent node of the current node has a sibling node.

[0034] The layer extraction completion unit is used to determine that all leaf node layers have been extracted if it does not exist.

[0035] Furthermore, the front-end layer adding module includes:

[0036] The format conversion unit is used to traverse all the leaf node layers. If the layer type of the leaf node layer is an image layer, then the leaf node layer is converted into a file format.

[0037] The image addition unit is used to add image files, which have been converted to the correct file format, to the center of the front canvas by default.

[0038] The position adjustment unit is used to adjust the position of the image file in the front-end canvas according to the coordinate information of the image file.

[0039] Furthermore, the front-end layer adding module also includes:

[0040] The text addition unit is used to traverse all the leaf node layers. If the layer type of the leaf node layer is a text layer, the leaf node layer is added to the front canvas according to the coordinate information of the leaf node layer.

[0041] Furthermore, the node layer determination module also includes:

[0042] The file upload unit is used to send image format project files to a designated attachment server through a front-end upload component, so that the attachment server calls a preset file parsing tool to parse the image format project files and obtain the corresponding tree data object.

[0043] Thirdly, this application provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the steps of the aforementioned front-end multi-layer data processing method.

[0044] Fourthly, this application provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the aforementioned front-end multi-layer data processing method.

[0045] Fifthly, this application provides a computer program product, including a computer program / instructions that, when executed by a processor, implement the steps of the aforementioned front-end multi-layer data processing method.

[0046] As can be seen from the above technical solution, this application provides a front-end multi-layer data processing method and apparatus. By parsing the image format project file, the corresponding tree data object is obtained, and all leaf node layers of the layer combination are determined according to the data structure of the tree data object. The corresponding layer addition strategy is determined according to the layer type of all leaf node layers and added to the set front-end container. This enables fast and accurate front-end multi-layer parsing and addition, improving front-end design efficiency. Attached Figure Description

[0047] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0048] Figure 1 This is one of the flowcharts illustrating the front-end multi-layer data processing method in the embodiments of this application;

[0049] Figure 2 This is a second flowchart illustrating the front-end multi-layer data processing method in this application embodiment;

[0050] Figure 3 This is the third flowchart illustrating the front-end multi-layer data processing method in this application embodiment;

[0051] Figure 4This is the fourth flowchart illustrating the front-end multi-layer data processing method in the embodiments of this application;

[0052] Figure 5 This is one of the structural diagrams of the front-end multi-layer data processing device in the embodiments of this application;

[0053] Figure 6 This is a second structural diagram of the front-end multi-layer data processing device in the embodiments of this application;

[0054] Figure 7 This is the third structural diagram of the front-end multi-layer data processing device in the embodiments of this application;

[0055] Figure 8 This is the fourth structural diagram of the front-end multi-layer data processing device in the embodiments of this application;

[0056] Figure 9 This is the fifth structural diagram of the front-end multi-layer data processing device in the embodiments of this application;

[0057] Figure 10 This is the sixth structural diagram of the front-end multi-layer data processing device in the embodiments of this application;

[0058] Figure 11 This is the seventh structural diagram of the front-end multi-layer data processing device in the embodiments of this application;

[0059] Figure 12 This is a flowchart illustrating the overall parsing process in a specific embodiment of this application;

[0060] Figure 13 This is a data processing flowchart in a specific embodiment of this application;

[0061] Figure 14 This is a flowchart of the image layer loading process in a specific embodiment of this application;

[0062] Figure 15 This is a schematic diagram of the structure of the electronic device in the embodiments of this application. Detailed Implementation

[0063] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0064] The acquisition, storage, use, and processing of data in this application all comply with the relevant provisions of national laws and regulations.

[0065] In view of the problems existing in the prior art, this application provides a front-end multi-layer data processing method and apparatus. By parsing the image format project file, the corresponding tree data object is obtained, and all leaf node layers of the layer combination are determined according to the data structure of the tree data object. The corresponding layer adding strategy is determined according to the layer type of all leaf node layers and added to a set front-end container. This enables fast and accurate front-end multi-layer parsing and adding, improving front-end design efficiency.

[0066] To enable rapid and accurate parsing and addition of multi-layer data in front-end development, thereby improving front-end design efficiency, this application provides an embodiment of a multi-layer data processing method for front-end development. See [link to embodiment]. Figure 1 The aforementioned front-end multi-layer data processing method specifically includes the following:

[0067] Step S101: Parse the image format project file to obtain the corresponding tree data object, and determine all leaf node layers of the layer combination according to the data structure of the tree data object.

[0068] Optionally, this application can use a front-end upload component to upload the image format project PSD file to the attachment server. After the PSD file is successfully uploaded, the path where the file is located on the attachment server is obtained and used as a parameter to provide the open-source tool PSD.js for parsing. After successful parsing, a tree data object in JSON format will be returned. The front-end code will then further process this raw data, find all leaf node layers of the layer combination, and cache them.

[0069] Step S102: Determine the corresponding layer addition strategy based on the layer type of all leaf node layers and add them to the set front-end container.

[0070] Optionally, this application can iterate through all the obtained leaf node layers. If the leaf node layer is an image layer, the addImageFromPsd() method is executed; if it is a text layer, the addTextFromPsd() method is executed. The methods for adding image and text layers need to be encapsulated as promise() objects to prevent asynchronous execution during the addition of different layers, which could lead to a disordered layer order. The parameter leafLayerList represents all leaf layers cached in step S3, and the typeTool method is the identifier for text layers from the PSD.js toolkit.

[0071] As can be seen from the above description, the front-end multi-layer data processing method provided in this application embodiment can parse the image format project file to obtain the corresponding tree data object and determine all leaf node layers of the layer combination according to the data structure of the tree data object; determine the corresponding layer adding strategy according to the layer type of all leaf node layers and add them to the set front-end container, thereby quickly and accurately realizing the parsing and adding of front-end multi-layers and improving the efficiency of front-end design.

[0072] In one embodiment of the front-end multi-layer data processing method of this application, see [link to relevant documentation]. Figure 2 It can also specifically include the following:

[0073] Step S201: Determine all child node layers of the current root node based on the data structure of the tree data object.

[0074] Step S202: Traverse and judge the child node layer array of all child node layers, and determine the current node that does not have new child nodes as a leaf node layer to obtain all leaf node layers.

[0075] Specifically, this application can use the `children()` method provided by PSD.js to obtain all child node layers of the current root node, query and cache all leaf node layers. The array of child nodes obtained after reverse sorting is traversed, and the `children()` method is used again for judgment. If the node does not have new child nodes, it is determined to be a leaf node layer, and the `push` method is used to cache it in a variable and continue to step S204. If it exists, return to step S201 and repeat the above steps. One point to note in this step is that the loop method used during traversal must be executed synchronously. However, the callback function inside the `forEach` method in JavaScript is an asynchronous function. If the `forEach` method is used, it will cause the final parsed leaf layer order to be disordered. Therefore, a `for` loop is used for parsing in this step.

[0076] In one embodiment of the front-end multi-layer data processing method of this application, after determining all child node layers of the current root node according to the data structure of the tree data object, the method includes:

[0077] Arrange all the child node layers in reverse order to obtain a child node layer array.

[0078] Optionally, all child node layers can be sorted in reverse order. Since the layers obtained through the children() method are arranged from top to bottom, while the layers need to be loaded from bottom to top to prevent the bottom layers from being obscured, this step requires reversing the order.

[0079] In one embodiment of the front-end multi-layer data processing method of this application, see [link to relevant documentation]. Figure 3 It can also specifically include the following:

[0080] Step S301: Determine whether the current node has a sibling node or whether the parent node of the current node has a sibling node.

[0081] Step S302: If it does not exist, then it is determined that all leaf node layers have been extracted.

[0082] Optionally, if the current node is a leaf node, check if the node has other sibling nodes, or if the node's parent node has other sibling nodes. If so, proceed with the logical checks for subsequent nodes. If not, it means that all leaf node layers have been extracted.

[0083] In one embodiment of the front-end multi-layer data processing method of this application, see [link to relevant documentation]. Figure 4 It can also specifically include the following:

[0084] Step S401: Traverse all the leaf node layers. If the layer type of the leaf node layer is an image layer, convert the leaf node layer into a file format.

[0085] Step S402: The image file obtained after file format conversion is added to the center of the front canvas by default.

[0086] Step S403: Adjust the position of the image file in the front-end canvas according to the coordinate information of the image file.

[0087] Optionally, the image layer is converted from base64 to file format (this article first converts base64 to blob format, then to file format). The upload interface is called to upload the converted file format image to the attachment server. The image path is retrieved from the server and added to the canvas. After the upload interface is called and returns a successful upload, the path of the image stored on the server is used to call the `add()` method in the Fabric API to add the image to the canvas container for display. By default, the image will be added to the center of the canvas after addition. Since setting the image's position coordinates requires waiting until the image is completely added to the canvas, the method for adding the image also needs to be manually encapsulated as a `promise()` object. The callback function `resolve()` after successful addition is written inside the `add()` method and executed after the addition method. Here, `formdata` represents the three parameters required by the upload interface, including file information and image name; `imgCoords` represents the image coordinate object, including `top` and `left` fields, obtained from `PSD.js`; `context` represents the attachment server's general context; and `id` represents the attachment ID name after successful image upload.

[0088] Then, based on the image's distance relative to the top and left sides of the canvas, the image object's setCoords() method can be called to achieve positioning.

[0089] In one embodiment of the front-end multi-layer data processing method of this application, the step of determining the corresponding layer adding strategy based on the layer type of all leaf node layers and adding them to the set front-end container further includes:

[0090] Traverse all the leaf node layers. If the layer type of the leaf node layer is a text layer, add the leaf node layer to the front canvas according to the coordinate information of the leaf node layer.

[0091] Optionally, the process of adding text layers and corresponding text boxes is relatively simple, and there are no issues with internal positioning methods or asynchronous execution of additions, so it will not be explained further.

[0092] In one embodiment of the front-end multi-layer data processing method of this application, the step of parsing the image format project file to obtain the corresponding tree data object includes:

[0093] The front-end upload component sends the image format project file to the designated attachment server, so that the attachment server calls the preset file parsing tool to parse the image format project file and obtain the corresponding tree data object.

[0094] To enable rapid and accurate parsing and addition of multi-layer data in front-end development, thereby improving front-end design efficiency, this application provides an embodiment of a front-end multi-layer data processing apparatus for implementing all or part of the aforementioned front-end multi-layer data processing method. See [link to embodiment]. Figure 5 The front-end multi-layer data processing device specifically includes the following components:

[0095] The node layer determination module 10 is used to parse the image format project file, obtain the corresponding tree data object, and determine all leaf node layers of the layer combination according to the data structure of the tree data object.

[0096] The front-end layer adding module 20 is used to determine the corresponding layer adding strategy based on the layer type of all the leaf node layers and add them to the set front-end container.

[0097] As can be seen from the above description, the front-end multi-layer data processing device provided in this application embodiment can parse the image format project file to obtain the corresponding tree data object and determine all leaf node layers of the layer combination according to the data structure of the tree data object; determine the corresponding layer adding strategy according to the layer type of all leaf node layers and add them to the set front-end container, thereby quickly and accurately realizing the parsing and adding of front-end multi-layers and improving the efficiency of front-end design.

[0098] In one embodiment of the front-end multi-layer data processing apparatus of this application, see [link to embodiment]. Figure 6 The node layer determination module 10 includes:

[0099] The root node analysis unit 11 is used to determine all child node layers of the current root node based on the data structure of the tree data object.

[0100] The leaf node determination unit 12 is used to traverse and determine the array of child node layers of all child node layers, and determine the current node that does not have new child nodes as a leaf node layer, thereby obtaining all leaf node layers.

[0101] In one embodiment of the front-end multi-layer data processing apparatus of this application, see [link to embodiment]. Figure 7 The node layer determination module 10 further includes:

[0102] The reverse sorting unit 13 is used to sort all the child node layers in reverse order to obtain a child node layer array.

[0103] In one embodiment of the front-end multi-layer data processing apparatus of this application, see [link to embodiment]. Figure 8 The node layer determination module 10 further includes:

[0104] The sibling node determination unit 14 is used to determine whether the current node has a sibling node or whether the parent node of the current node has a sibling node.

[0105] The layer extraction completion unit 15 is used to determine that all leaf node layers have been extracted if it does not exist.

[0106] In one embodiment of the front-end multi-layer data processing apparatus of this application, see [link to embodiment]. Figure 9 The front-end layer adding module 20 includes:

[0107] The format conversion unit 21 is used to traverse all the leaf node layers, and if the layer type of the leaf node layer is an image layer, then the leaf node layer is converted into a file format.

[0108] Image adding unit 22 is used to add the image file obtained after file format conversion to the center position of the front canvas by default.

[0109] The position adjustment unit 23 is used to adjust the position of the image file in the front-end canvas according to the coordinate information of the image file.

[0110] In one embodiment of the front-end multi-layer data processing apparatus of this application, see [link to embodiment]. Figure 10 The front-end layer adding module 20 also includes:

[0111] The text addition unit 24 is used to traverse all the leaf node layers. If the layer type of the leaf node layer is a text layer, the leaf node layer is added to the front canvas according to the coordinate information of the leaf node layer.

[0112] In one embodiment of the front-end multi-layer data processing apparatus of this application, see [link to embodiment]. Figure 11 The node layer determination module 10 further includes:

[0113] The file upload unit 16 is used to send an image format project file to a designated attachment server through a front-end upload component, so that the attachment server calls a preset file parsing tool to parse the image format project file and obtain the corresponding tree data object.

[0114] To further illustrate this solution, this application also provides a specific application example of using the aforementioned front-end multi-layer data processing device to implement the front-end multi-layer data processing method, which specifically includes the following:

[0115] The overall flowchart for parsing layers is as follows: Figure 12 As shown, it consists of five steps, as detailed below:

[0116] S1. Upload the PSD project file. Use a front-end upload component to upload the PSD file to the attachment server.

[0117] S2. Cache the layer data returned by PSD.js parsing. After the PSD file is successfully uploaded, obtain the path of the file on the attachment server and use it as a parameter to provide to the open-source tool PSD.js for parsing. After successful parsing, it will return a tree data object in JSON format. The front-end code will then further process this raw data, find all the leaf node layers of the layer combination, and cache them.

[0118] The specific steps can be broken down as follows, such as Figure 13 As shown:

[0119] A201. Use the children() method provided by PSD.js to get all child node layers of the current root node.

[0120] A 202. Reverse the order of all child node layers obtained in the previous step. Since the layers obtained in the first step using the children() method are arranged in top-to-bottom order, and the layers need to be loaded in bottom-to-top order to prevent the bottom layers from being obscured, this step requires reversing the order.

[0121] Step A 203. Query and cache all leaf node layers. Iterate through the child node array obtained by reversing the order in Step A 202, and continue using the `children()` method for judgment. If a node does not have new child nodes, it is determined to be a leaf node layer, and the `push` method is used to cache it in a variable and continue to step A 204. If it exists, return to step A 201 and repeat the above steps. One point to note in this step is that the loop method used during the traversal must be executed synchronously. However, the callback function inside the `forEach` method in JavaScript is an asynchronous function. If the `forEach` method is used, it will cause the final parsed leaf layer order to be disordered. Therefore, a `for` loop is used for parsing in this step.

[0122] S204. If the current node is a leaf node, determine whether the node has other sibling nodes, or whether the node's parent node has other sibling nodes. If they exist, return to step S203 to perform logical judgments on subsequent nodes. If they do not exist, it means that all leaf node layers have been extracted.

[0123] S3. Set the overall canvas container size. This step stores the canvas's width and height information in the front-end project.

[0124] S4. Add layers to the canvas container. Iterate through all the leaf node layers obtained in step S2. If the leaf node layer is an image layer, execute the addImageFromPsd() method; if it is a text layer, execute the addTextFromPsd() method. The methods for adding image and text layers need to be encapsulated as promise() objects to prevent asynchronous execution during the addition of different layers, which could lead to a disordered layer order. The parameter leafLayerList represents all the leaf layers cached in step S3, and the typeTool method is the identifier for text layers from the PSD.js toolkit.

[0125] The detailed steps for adding an image layer can be broken down as follows: Figure 14 :

[0126] A401. Convert the image layer from base64() format to file format (this article first converts the base64() format to blob format, and then converts it to file format).

[0127] A402. Call the upload interface to upload the image, which has been converted to file format, to the attachment server.

[0128] A403. Retrieve the image path from the server and add it to the canvas. After calling the upload function and receiving a successful upload response, use the image's path stored on the server to call the `add()` method in the Fabric API to add the image to the canvas container for display. By default, the image will be added to the center of the canvas after addition. Since setting the image's position coordinates requires waiting until the image is fully added to the canvas, the image addition method also needs to be manually encapsulated as a `promise()` object. The callback function `resolve()` after successful addition is written inside the `add()` method and executed after the addition method. Here, `formdata` represents the three parameters required by the upload interface, including file information and image name; `imgCoords` represents the image coordinate object, including `top` and `left` fields, obtained from `PSD.js`; `context` represents the attachment server's general context; and `id` represents the attachment ID name after successful image upload.

[0129] A404. Image Positioning. Positioning an image can be achieved by calling the `setCoords()` method of the image object, based on its distance from the top and left sides of the canvas.

[0130] The process of adding text layers and positioning corresponding text boxes is relatively simple, and there are no issues with internal positioning methods or asynchronous execution of the addition, so it will not be explained further.

[0131] As described above, this application achieves maximum decoupling of layer combinations and avoids the problem of disordered loading order between layers by extracting leaf node layers first and then adding them. Secondly, by manually encapsulating the layer-adding method as a promise() object and executing it as a synchronous task along with subsequent methods, the positioning function of each layer is accurately implemented. Combining these two aspects effectively ensures the accuracy of PSD file restoration on the front-end drawing platform and greatly saves designers the time cost of manually adjusting layer order and position in the drawing platform.

[0132] From a hardware perspective, in order to quickly and accurately parse and add multi-layer data on the front end and improve front-end design efficiency, this application provides an embodiment of an electronic device for implementing all or part of the aforementioned multi-layer data processing method on the front end. The electronic device specifically includes the following components:

[0133] The system comprises a processor, memory, a communications interface, and a bus; wherein the processor, memory, and communications interface communicate with each other via the bus; the communications interface is used to realize information transmission between the front-end multi-layer data processing device and core business systems, user terminals, and related databases and other related devices; the logic controller can be a desktop computer, tablet computer, or mobile terminal, etc., and this embodiment is not limited to these. In this embodiment, the logic controller can be implemented with reference to the embodiments of the front-end multi-layer data processing method and the front-end multi-layer data processing device in the embodiments, the content of which is incorporated herein, and repeated details will not be described again.

[0134] It is understood that the user terminal may include smartphones, tablet computers, network set-top boxes, portable computers, desktop computers, personal digital assistants (PDAs), in-vehicle devices, smart wearable devices, etc. Among these, the smart wearable devices may include smart glasses, smartwatches, smart bracelets, etc.

[0135] In practical applications, the front-end multi-layer data processing method can be partially executed on the electronic device side as described above, or all operations can be completed on the client device. The choice can be made based on the processing capabilities of the client device and the limitations of the user's usage scenario. This application does not impose any limitations on this. If all operations are completed on the client device, the client device may further include a processor.

[0136] The aforementioned client device may have a communication module (i.e., a communication unit) that can communicate with a remote server to achieve data transmission. The server may include a server on the task scheduling center side; in other implementation scenarios, it may also include a server on an intermediate platform, such as a server on a third-party server platform that has a communication link with the task scheduling center server. The server may include a single computer device, a server cluster consisting of multiple servers, or a distributed server structure.

[0137] Figure 15 This is a schematic block diagram illustrating the system configuration of the electronic device 9600 according to an embodiment of this application. Figure 15 As shown, the electronic device 9600 may include a central processing unit 9100 and a memory 9140; the memory 9140 is coupled to the central processing unit 9100. It is worth noting that... Figure 15 This is an example; other types of structures can also be used to supplement or replace this structure to achieve telecommunications functions or other functions.

[0138] In one embodiment, the front-end multi-layer data processing method function can be integrated into the central processing unit 9100. The central processing unit 9100 can be configured to perform the following control:

[0139] Step S101: Parse the image format project file to obtain the corresponding tree data object, and determine all leaf node layers of the layer combination according to the data structure of the tree data object.

[0140] Step S102: Determine the corresponding layer addition strategy based on the layer type of all leaf node layers and add them to the set front-end container.

[0141] As can be seen from the above description, the electronic device provided in this application provides a method to quickly and accurately parse and add multiple layers to the front end, thereby improving the efficiency of front-end design. This method parses the image format project file to obtain the corresponding tree data object and determines all leaf node layers of the layer combination according to the data structure of the tree data object. It also determines the corresponding layer addition strategy according to the layer type of all leaf node layers and adds them to the set front-end container.

[0142] In another embodiment, the front-end multi-layer data processing device can be configured separately from the central processing unit 9100. For example, the front-end multi-layer data processing device can be configured as a chip connected to the central processing unit 9100, and the front-end multi-layer data processing method function can be implemented through the control of the central processing unit.

[0143] like Figure 15As shown, the electronic device 9600 may further include: a communication module 9110, an input unit 9120, an audio processor 9130, a display 9160, and a power supply 9170. It is worth noting that the electronic device 9600 does not necessarily need to include these components. Figure 15 All components shown; in addition, the electronic device 9600 may also include Figure 15 For components not shown, please refer to existing technologies.

[0144] like Figure 15 As shown, the central processing unit 9100, sometimes also referred to as a controller or operating control, may include a microprocessor or other processor device and / or logic device, which receives inputs and controls the operation of various components of the electronic device 9600.

[0145] The memory 9140 may be, for example, one or more of a cache, flash memory, hard drive, removable media, volatile memory, non-volatile memory, or other suitable devices. It may store the aforementioned failure-related information, and also store a program for executing that information. The central processing unit 9100 may execute the program stored in the memory 9140 to perform information storage or processing, etc.

[0146] Input unit 9120 provides input to central processing unit 9100. Input unit 9120 may be, for example, a keypad or touch input device. Power supply 9170 provides power to electronic device 9600. Display 9160 displays images and text. Display may be, for example, an LCD display, but is not limited thereto.

[0147] The memory 9140 can be a solid-state memory, such as a read-only memory (ROM), random access memory (RAM), SIM card, etc. It can also be a memory that retains information even when power is off, can be selectively erased, and contains more data; examples of this type of memory are sometimes referred to as EPROMs. The memory 9140 can also be some other type of device. The memory 9140 includes a buffer memory 9141 (sometimes referred to as a buffer). The memory 9140 may include an application / function storage unit 9142 for storing application programs and function programs or processes for executing the operation of the electronic device 9600 via the central processing unit 9100.

[0148] The memory 9140 may also include a data storage unit 9143 for storing data, such as contacts, digital data, pictures, sounds, and / or any other data used by the electronic device. The driver storage unit 9144 of the memory 9140 may include various drivers for the electronic device's communication functions and / or for performing other functions of the electronic device (such as messaging applications, address book applications, etc.).

[0149] The communication module 9110 is a transmitter / receiver 9110 that transmits and receives signals via the antenna 9111. The communication module (transmitter / receiver) 9110 is coupled to the central processing unit 9100 to provide input signals and receive output signals, which can be the same as in a conventional mobile communication terminal.

[0150] Based on different communication technologies, multiple communication modules 9110 can be configured in the same electronic device, such as cellular network modules, Bluetooth modules, and / or wireless LAN modules. The communication module (transmitter / receiver) 9110 is also coupled to a speaker 9131 and a microphone 9132 via an audio processor 9130 to provide audio output via the speaker 9131 and receive audio input from the microphone 9132, thereby realizing typical telecommunications functions. The audio processor 9130 may include any suitable buffer, decoder, amplifier, etc. Additionally, the audio processor 9130 is coupled to a central processing unit 9100, enabling on-device recording via the microphone 9132 and on-device playback of stored sound via the speaker 9131.

[0151] Embodiments of this application also provide a computer-readable storage medium capable of implementing all steps of the front-end multi-layer data processing method with a server or client as the execution subject in the above embodiments. The computer-readable storage medium stores a computer program that, when executed by a processor, implements all steps of the front-end multi-layer data processing method with a server or client as the execution subject in the above embodiments. For example, when the processor executes the computer program, it implements the following steps:

[0152] Step S101: Parse the image format project file to obtain the corresponding tree data object, and determine all leaf node layers of the layer combination according to the data structure of the tree data object.

[0153] Step S102: Determine the corresponding layer addition strategy based on the layer type of all leaf node layers and add them to the set front-end container.

[0154] As can be seen from the above description, the computer-readable storage medium provided in this application provides a way to quickly and accurately parse and add multiple layers in the front end, thereby improving the efficiency of front end design. This is achieved by parsing image format project files to obtain corresponding tree data objects and determining all leaf node layers of the layer combination based on the data structure of the tree data objects. The corresponding layer addition strategy is determined based on the layer type of all leaf node layers and added to a set front end container.

[0155] Embodiments of this application also provide a computer program product capable of implementing all steps of the front-end multi-layer data processing method with the execution subject being a server or client in the above embodiments. When the computer program / instructions are executed by a processor, they implement the steps of the aforementioned front-end multi-layer data processing method. For example, the computer program / instructions implement the following steps:

[0156] Step S101: Parse the image format project file to obtain the corresponding tree data object, and determine all leaf node layers of the layer combination according to the data structure of the tree data object.

[0157] Step S102: Determine the corresponding layer addition strategy based on the layer type of all leaf node layers and add them to the set front-end container.

[0158] As can be seen from the above description, the computer program product provided in this application provides a solution that parses image format project files to obtain corresponding tree data objects and determines all leaf node layers of the layer combination based on the data structure of the tree data objects. Based on the layer type of all leaf node layers, a corresponding layer adding strategy is determined and added to a set front-end container. This enables fast and accurate parsing and adding of multiple front-end layers, improving front-end design efficiency.

[0159] Those skilled in the art will understand that embodiments of the present invention can be provided as methods, apparatus, or computer program products. Therefore, the present invention can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the present invention can take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0160] This invention is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (devices), and computer program products according to embodiments of the invention. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0161] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0162] These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable apparatus for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0163] Specific embodiments have been used to illustrate the principles and implementation methods of this invention. The descriptions of the embodiments above are only for the purpose of helping to understand the method and core ideas of this invention. At the same time, for those skilled in the art, there will be changes in the specific implementation methods and application scope based on the ideas of this invention. Therefore, the content of this specification should not be construed as a limitation of this invention.

Claims

1. A front-end multi-layer data processing method, characterized in that, The method includes: The image format project file is parsed to obtain the corresponding tree data object, and all child node layers of the current root node are determined according to the data structure of the tree data object. Arrange all the child node layers in reverse order to obtain a child node layer array; The child node layer array of all child node layers is traversed and judged. The current node that does not have new child nodes is determined as a leaf node layer, and all leaf node layers are obtained. Traverse all the leaf node layers. If the layer type of the leaf node layer is an image layer, convert the leaf node layer to a file format. The image file obtained after file format conversion is added to the center of the front canvas by default; the method for adding the image layer is encapsulated as a promise() object; The position of the image file in the front-end canvas is adjusted according to the coordinate information of the image file, where the coordinate information represents the distance of the image file relative to the top and left side of the front-end canvas.

2. The front-end multi-layer data processing method according to claim 1, characterized in that, After iterating through and judging the array of child node layers of all child node layers, and determining the current node that has no new child nodes as a leaf node layer, the process further includes: Determine whether the current node has a sibling node or whether the parent node of the current node has a sibling node; If it does not exist, then it is determined that all leaf node layers have been extracted.

3. The front-end multi-layer data processing method according to claim 1, characterized in that, The method further includes: Traverse all the leaf node layers. If the layer type of the leaf node layer is a text layer, add the leaf node layer to the front canvas according to the coordinate information of the leaf node layer.

4. The front-end multi-layer data processing method according to claim 1, characterized in that, The process of parsing the image format project file to obtain the corresponding tree data object includes: The front-end upload component sends the image format project file to the designated attachment server, so that the attachment server calls the preset file parsing tool to parse the image format project file and obtain the corresponding tree data object.

5. A front-end multi-layer data processing device, characterized in that, include: The node layer determination module is used to parse the image format project file, obtain the corresponding tree data object, and determine all child node layers of the current root node according to the data structure of the tree data object; and sort all the child node layers in reverse order to obtain a child node layer array. The child node layer array of all child node layers is traversed and judged. The current node that does not have new child nodes is determined as a leaf node layer, and all leaf node layers are obtained. The front-end layer adding module is used to traverse all the leaf node layers. If the layer type of the leaf node layer is an image layer, the leaf node layer is converted into a file format. The image file obtained after file format conversion is added to the center position of the front-end canvas by default. The method of adding the image layer is encapsulated as a promise() object. The position of the image file in the front-end canvas is adjusted according to the coordinate information of the image file, where the coordinate information represents the distance of the image file relative to the top and left side of the front-end canvas.

6. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the steps of the front-end multi-layer data processing method according to any one of claims 1 to 4.

7. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the front-end multi-layer data processing method according to any one of claims 1 to 4.

8. A computer program product comprising a computer program that, when executed by a processor, implements the method according to any one of claims 1 to 4.

Images