Business process rechecking method and system based on picture snapshot and medium

Abstract

The invention relates to a business process rechecking method and system based on picture snapshots and a medium. The method comprises the steps that business form fields are edited through a Web end page; obtaining structures of Dom elements for the edited page, and determining an appearance style of each Dom element; constructing a rendering tree and performing layout calculation according to the structure and the appearance style of the Dom element; according to the determined rendering tree and the layout calculation result, each Dom element is drawn on the Canvas; the element result drawn on the Canvas is converted into a picture, then coding is carried out, persistent processing is carried out on coded image data, and the coded image data is stored in a database; and acquiring the encoded image data from the database, converting the encoded image data into a graph, and performing rechecking and approval. Compared with the prior art, the method has the advantages that the existing development process is simplified, and the requirement for additional development work of the front end and the rear end is eliminated, so that the development efficiency is remarkably improved, and the long-term maintenance cost is reduced.

Description

Technical Field

[0001] The present invention relates to the technical field of software development, and in particular to a business process review method, system and medium based on picture snapshots. Background Art

[0002] In the traditional office automation (OA) software development process, a lot of repetitive development work is usually required to ensure that the business process can access business form data at each approval node. This practice not only increases development costs and reduces development efficiency, but also may lead to code redundancy and increased difficulty in system maintenance. Specifically, there are the following problems:

[0003] 1. Front-end developers must develop a page for each business process node to display business form data to ensure that this data can be viewed at all approval nodes.

[0004] 2. Back-end developers need to implement the persistence of business form data and provide corresponding interfaces so that the interfaces can be called at each approval node in the process to obtain these persistent data.

[0005] 3. For different business functions, front-end and back-end developers need to carry out separate development work, which lacks versatility and reusability.

[0006] Therefore, the market lacks a comprehensive and mature solution to effectively address these challenges, simplify the existing development process, and eliminate the need for additional development work on the front and back ends. Summary of the invention

[0007] The purpose of the present invention is to overcome the defects of the above-mentioned prior art and provide a business process review method, system and medium based on image snapshots that simplifies the existing development approval process and eliminates the need for additional development work on the front and back ends.

[0008] The purpose of the present invention can be achieved by the following technical solutions:

[0009] A business process review method based on image snapshots, comprising the following steps:

[0010] Edit business form fields through the web page;

[0011] For the edited page, obtain the structure of the Dom element and determine the appearance style of each Dom element; build a rendering tree based on the structure and appearance style of the Dom element to determine the rendering order of each Dom element; perform layout calculation on each Dom element to determine the position and size of each element on the page; draw each Dom element onto the Canvas based on the determined rendering tree and layout calculation results;

[0012] Convert the element results drawn on the Canvas into images;

[0013] Encode the converted image to obtain encoded image data;

[0014] Perform persistent processing on the encoded image data and store it in the database;

[0015] A business process review instruction is received, corresponding encoded image data is obtained from the database, and converted into graphics for review and approval.

[0016] Furthermore, the process of obtaining the structure of the Dom element is specifically as follows:

[0017] Use the html2canvas library to capture the structure of the page's DOM elements through pre-defined areas;

[0018] The structure of the Dom element includes the tag name, attributes, sub-elements and nested relationships of the Dom element.

[0019] Furthermore, the process of determining the appearance style of the Dom element is specifically as follows:

[0020] Use the html2canvas library to apply CSS styles to determine the appearance of each Dom element;

[0021] The appearance style of the Dom element includes the box model, color, font and positioning of the Dom element.

[0022] Furthermore, the layout calculations performed on each Dom element include CSS flow layout mode, absolute positioning layout mode, flexbox layout mode and grid layout mode.

[0023] Furthermore, the conversion of the element result drawn on the Canvas into a picture is specifically as follows:

[0024] In the Canvas environment, the content of the Dom element is converted into pixel data through html2canvas; the pixel data includes text, images and shapes.

[0025] Furthermore, encoding the converted picture is specifically as follows:

[0026] Use the toDataURL method provided by the Canvas API to convert the pixel data on the canvas into a Base64-encoded image.

[0027] Furthermore, the Base64-encoded image is in text form.

[0028] Furthermore, the encoded image data is stored in a database according to the process nodes.

[0029] The present invention also provides a business process review system based on image snapshots, comprising a memory and a processor, wherein the memory stores a computer program, and the processor calls the computer program to execute the steps of the above method.

[0030] The present invention also provides a computer-readable storage medium, on which a computer program is stored, and the computer program is executed by a processor to perform the above method.

[0031] Compared with the prior art, the present invention has the following advantages:

[0032] (1) Business application of image snapshot technology: Image snapshot technology allows the system to "take a selfie" of business form data at a specific time point, that is, by capturing the page, determining the structure and appearance style of the Dom element, and then calculating the corresponding rendering tree and layout mode to draw the element on the Canvas, and obtain the image data through base64 encoding and store it in the database after persistence processing, so as to capture the current page status and save it as an image; when review and approval is required, the corresponding encoded data can be directly obtained and converted into an image for processing. This technology is similar to snapshots in photography, which can quickly create a copy of the page status without affecting the original data.

[0033] (2) Improve development efficiency and reduce costs: Through image snapshot technology, developers do not need to develop pages and backend interfaces separately for each business process node, thereby reducing repetitive work. This method not only improves development efficiency, but also reduces development and maintenance costs.

[0034] (3) Versatility of business processes: The image snapshot technology provided by the present invention provides a universal solution that is applicable to a variety of business process review scenarios. This method is not limited to specific business functions, but can be widely used in a variety of business processes, improving the flexibility and reusability of the system. BRIEF DESCRIPTION OF THE DRAWINGS

[0035] Figure 1 The present invention is a flowchart of a business process review method based on image snapshots provided in an embodiment of the present invention. DETAILED DESCRIPTION

[0036] In order to make the purpose, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Generally, the components of the embodiments of the present invention described and shown in the drawings here can be arranged and designed in various different configurations.

[0037] Therefore, the following detailed description of the embodiments of the present invention provided in the accompanying drawings is not intended to limit the scope of the invention claimed for protection, but merely represents selected embodiments of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0038] It should be noted that similar reference numerals and letters denote similar items in the following drawings, and therefore, once an item is defined in one drawing, further definition and explanation thereof is not required in subsequent drawings.

[0039] Example 1

[0040] like Figure 1 As shown, this embodiment provides a business process review method based on image snapshots, including the following steps:

[0041] S1: Edit the business form fields through the web page;

[0042] S2: For the edited page, obtain the structure of the Dom element and determine the appearance style of each Dom element; build a rendering tree based on the structure and appearance style of the Dom element to determine the rendering order of each Dom element; perform layout calculation on each Dom element to determine the position and size of each element on the page; draw each Dom element onto the Canvas based on the determined rendering tree and layout calculation results;

[0043] S3: Convert the element results drawn on the Canvas into a picture;

[0044] S4: Encode the converted image to obtain encoded image data;

[0045] S5: Persistently process the encoded image data and store it in a database;

[0046] S6: Receive the business process review instruction, obtain the corresponding encoded image data from the database, and convert it into a graphic for review and approval.

[0047] In step S1, the business personnel may fill in the business form fields through the web page;

[0048] During the development of traditional solutions, front-end developers must develop a page for each business process node to display business form data to ensure that this data can be viewed at all approval nodes.

[0049] Back-end developers need to implement the persistence of business form data and provide corresponding interfaces so that the interfaces can be called at each approval node in the process to obtain these persistent data.

[0050] Step S2 captures the Dom structure and renders it on the canvas;

[0051] Specifically, the structure of the Dom element of the page is captured through a software program using the html2canvas library through a predefined area, which includes the tag name, attributes, sub-elements and nested relationships of the element.

[0052] CSS styles are then applied via the html2canvas library to determine the appearance of each element, which includes calculating each element's box model (margins, padding, borders, content size), color, font, positioning, etc.

[0053] With the DOM structure and the applied styles, html2canvas builds a render tree, which is a flat structure containing all visible elements, which determines the order in which the elements are rendered. This process is similar to the process of the browser's rendering engine building a render tree.

[0054] Next, html2canvas performs layout calculations to determine the position and size of each element on the page. This process involves calculations of CSS flow layout, absolute positioning, flexbox, grid and other layout modes.

[0055] Finally, once we have the render tree and layout information, html2canvas starts drawing each element onto the Canvas.

[0056] In step S3, the canvas can be converted into an image using the html2canvas library.

[0057] Specifically, on Canvas, html2canvas converts the content of DOM elements into pixel data. This includes all visual elements such as text, images, shapes, etc. Through the Canvas API, html2canvas can manipulate these pixel data, achieve complex rendering effects, and finally convert them into images.

[0058] In step S4, the generated image is encoded using base64.

[0059] Specifically, use the toDataURL method provided by the Canvas API to convert the pixel data on the canvas into a Base64-encoded image. This method returns a Base64-encoded string containing the image data, starting with data:image / png;base64, followed by the encoded image data.

[0060] In step S5, the encoded data is persisted and stored in a database.

[0061] Specifically, since the Base64-encoded image data is in text form, we store it in the database. This storage method allows the image data to be separated from the original binary file form and is convenient for use in a Web environment.

[0062] In step S6, after the encoded data is stored, the business personnel clicks the submit button to initiate the business process OA process;

[0063] At a certain approval node in the process, the coded data is converted into an image, and the reviewer reviews and approves the image content.

[0064] The above is an introduction to the method embodiment. The following is a further explanation of the solution of the present invention through a system embodiment.

[0065] This embodiment also provides a business process review system based on image snapshots, including a memory and a processor, wherein the memory stores a computer program, and the processor calls the computer program to execute the steps of the above-mentioned business process review method based on image snapshots.

[0066] The computer program code for implementing the method of the present invention may be written in any combination of one or more programming languages. These computer 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 when the computer program code is executed by the processor or controller, the functions / operations specified in the flow chart and / or block diagram are implemented. The computer program code may be executed entirely on the machine, partially on the machine, partially on the machine as a stand-alone software package and partially on a remote machine, or entirely on a remote machine or server.

[0067] It should be noted that the specific content and beneficial effects of the device of the present application can be found in the above-mentioned method embodiment, which will not be repeated here.

[0068] In addition, this embodiment further provides a computer-readable storage medium, on which a computer program is stored, and the computer program is executed by a processor to implement the above-mentioned business process review method based on image snapshots.

[0069] Computer readable storage medium can be a tangible medium that can contain or store a program for use by or in conjunction with an instruction execution system, device or equipment. Computer readable storage medium can be a machine readable signal medium or a machine readable storage medium. Computer readable storage medium can include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, devices or equipment, or any suitable combination of the above. More specific examples of machine readable storage mediums can include electrical connections based on one or more lines, portable computer disks, hard disks, random access memories (RAM), read-only memories (ROM), erasable programmable read-only memories (EPROM or flash memory), optical fibers, portable compact disk read-only memories (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the above.

[0070] The preferred specific embodiments of the present invention are described in detail above. It should be understood that a person skilled in the art can make many modifications and changes based on the concept of the present invention without creative work. Therefore, any technical solution that can be obtained by a person skilled in the art through logical analysis, reasoning or limited experiments based on the concept of the present invention on the basis of the prior art should be within the scope of protection determined by the claims.

Claims

1. A business process review method based on image snapshots, characterized in that: The following steps are involved: Edit business form fields through the web page; For the edited page, obtain the structure of the Dom element and determine the appearance style of each Dom element; According to the structure and appearance style of the Dom element, a rendering tree is constructed to determine the rendering order of each Dom element; Perform layout calculations on each Dom element to determine the position and size of each element on the page; draw each Dom element onto the Canvas based on the determined rendering tree and layout calculation results; Convert the element results drawn on the Canvas into images; Encode the converted image to obtain encoded image data; Perform persistent processing on the encoded image data and store it in the database; A business process review instruction is received, corresponding encoded image data is obtained from the database, and converted into graphics for review and approval.

2. A business process review method based on picture snapshots according to claim 1, characterized in that: The process of obtaining the structure of the Dom element is specifically as follows: Use the html2canvas library to capture the structure of the page's DOM elements through pre-defined areas; The structure of the Dom element includes the tag name, attributes, sub-elements and nested relationships of the Dom element.

3. A business process review method based on picture snapshot according to claim 1, characterized in that: The process of determining the appearance style of the Dom element is specifically as follows: Use the html2canvas library to apply CSS styles to determine the appearance of each Dom element; The appearance style of the Dom element includes the box model, color, font and positioning of the Dom element.

4. A business process review method based on picture snapshot according to claim 1, characterized in that: The layout calculations for each Dom element include CSS flow layout mode, absolute positioning layout mode, flexbox layout mode and grid layout mode.

5. The business process review method based on picture snapshot according to claim 1, characterized in that: The specific steps of converting the element result drawn on the Canvas into a picture are as follows: In the Canvas environment, the content of the Dom element is converted into pixel data through html2canvas; the pixel data includes text, images and shapes.

6. A business process review method based on picture snapshots according to claim 1, characterized in that: The encoding of the converted picture is specifically as follows: Use the toDataURL method provided by the Canvas API to convert the pixel data on the canvas into a Base64-encoded image.

7. A business process review method based on picture snapshots according to claim 6, characterized in that: The Base64-encoded image is in text form.

8. A business process review method based on picture snapshots according to claim 6, characterized in that: The encoded image data is stored in the database according to the process nodes.

9. A business process review system based on image snapshots, characterized in that: The method comprises a memory and a processor, wherein the memory stores a computer program, and the processor calls the computer program to execute the steps of any one of the methods according to claims 1 to 8.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and the computer program is used by a processor to execute the method according to any one of claims 1 to 8.

Images