Image processing method, terminal, storage medium and computer program product

Abstract

The invention provides an image processing method, a terminal, a storage medium and a computer program product. The image processing method comprises the following steps: acquiring an original image; graphic information and text information in the original image are extracted, a graphic list and a text list are generated respectively, the graphic list comprises coordinates and graphic types of all graphs in the original image, and the text list comprises coordinates and text content of all text blocks in the original image; drawing each graph on a canvas according to the graph list and a preset graph drawing method, drawing each character block on the canvas according to the text list and a preset character drawing method, and forming a target flow chart by each graph on the canvas and each character block; and editing the graph or the character block in response to a click event of the user on any graph or character block. According to the embodiment of the invention, secondary editing of the picture format flow chart can be realized.

Description

Technical Field

[0001] The present disclosure relates to the field of display technology, and more specifically, to an image processing method, a terminal, a storage medium, and a computer program product. Background Art

[0002] In the related art, many users draw flowcharts by hand out of habit or when it is inconvenient to use a computer for operation. For example, in meetings or studies, they often draw flowcharts or mind maps by hand to record, and then save or share them by taking photos.

[0003] However, flowcharts saved as images are not conducive to secondary editing by users. If users need to modify the flowcharts, they usually need to redraw the flowchart, which is cumbersome. Summary of the invention

[0004] The purpose of the present disclosure is to provide an image processing method, a terminal, a storage medium and a computer program product to solve the problem in the related art that flowcharts in picture format cannot be edited twice.

[0005] In order to achieve the above objectives, the present invention adopts the following technical solutions:

[0006] The first aspect of the present disclosure provides an image processing method, comprising the following steps:

[0007] Get the original image;

[0008] Extracting graphic information and text information from the original image, and generating a graphic list and a text list respectively, wherein the graphic list includes the coordinates and graphic type of each graphic in the original image, and the text list includes the coordinates and text content of each text block in the original image;

[0009] Drawing each graphic on the canvas according to the graphic list and the preset graphic drawing method, drawing each text block on the canvas according to the text list and the preset text drawing method, and the graphics and text blocks on the canvas form a target flow chart;

[0010] In response to a user's click event on any graphic or text block, the graphic or text block is edited.

[0011] Optionally, before the step of editing the graphic or text block in response to a user's click event on any graphic or text block, the step further includes:

[0012] Associating any graphic with a text block in the graphic according to the coordinates of each graphic and the coordinates of each text block, wherein each graphic and the text block in the graphic constitute a node, and each node on the canvas forms the target flow chart;

[0013] Add a click event to the node;

[0014] The step of editing the graphic or text block in response to a user click event on any graphic or text block includes: editing the node in response to a user click event on any node.

[0015] Optionally, the click event includes a first click event, and the step of editing the node in response to a user's click event on any node includes:

[0016] In response to the first click event, a first process is performed on the node, where the first process includes one or more of an operation of zooming in, zooming out, moving, and deleting.

[0017] Optionally, the click event includes a second click event, and the step of editing the node in response to the user's click event on any node includes:

[0018] In response to the second click event, a second process is performed on the text block in the node, where the second process includes one or more of modification, addition, and deletion operations.

[0019] Optionally, the step of drawing each graphic on the canvas according to the graphic list and the preset graphic drawing method includes:

[0020] Traversing each graphic in the graphic list;

[0021] For any graphic, a graphic represented by the graphic type is drawn at the coordinates of the graphic on the canvas by a first drawing component, and the graphic type includes a rounded rectangle, a right-angled rectangle, a rhombus, and a line.

[0022] Optionally, the coordinates of the text block include the starting coordinates of the text block, and the step of drawing each text block on the canvas according to the text list and the preset text drawing method includes:

[0023] Traversing each text block in the text list;

[0024] For any text block, the text represented by the text content is drawn on the canvas by a second drawing component with the coordinates of the text block as a starting point.

[0025] Optionally, after the step of obtaining the original image, the following step is further performed:

[0026] Displaying the original image on the canvas, obtaining the position coordinates of a first vertex of the original image in the canvas as first position coordinates;

[0027] The step of drawing each graphic on the canvas according to the graphic list and the preset graphic drawing method includes: recording the sum of the coordinates of each graphic in the original image and the first position coordinates as the coordinates of each graphic in the canvas, and drawing each graphic on the canvas according to the graphic type of each graphic and the coordinates in the canvas by the preset graphic drawing method;

[0028] The step of drawing each character on the canvas according to the text list and the preset text drawing method includes: recording the sum of the coordinates of each character block in the original image and the first position coordinates as the coordinates of each character block in the canvas, and drawing each character block on the canvas according to the text content of each character block and the coordinates in the canvas by the preset text drawing method.

[0029] Optionally, before the step of obtaining the position coordinates of the first vertex of the original image in the canvas and marking them as first position coordinates, the step further includes:

[0030] The size of the original image and the position of the original image on the canvas are adjusted in response to a first user operation.

[0031] Optionally, the step of obtaining the original image includes:

[0032] establishing a connection with an external device in response to a first connection request;

[0033] Receive the original image transmitted by the external device.

[0034] A second aspect of the present disclosure provides a terminal, including a memory, a processor, and a program stored in the memory and executable on the processor; the processor is configured to read the program in the memory to implement the steps in the image processing method described above.

[0035] A third aspect of the present disclosure provides a computer-readable storage medium having a computer program stored thereon, which implements the steps of the image processing method described above when the program is executed by a processor.

[0036] A fourth aspect of the present disclosure provides a computer program product, including a computer program, which implements the steps of the image processing method described above when executed by a processor.

[0037] The beneficial effects of the present disclosure are as follows:

[0038] The image processing method of the embodiment of the present disclosure can extract the graphic information and text information in the original image after acquiring the original image in picture format, generate a graphic list and a text list respectively, and draw each graphic on the canvas according to the graphic list and a preset graphic drawing method, and draw each text block on the canvas according to the text list and a preset text drawing method. Afterwards, when a user click event on a certain graphic or text block is detected, the graphic or text block can be secondary edited, thereby realizing secondary editing of the picture format flow chart, which can simplify user operations and improve user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] The specific implementation methods of the present disclosure are further described in detail below with reference to the accompanying drawings.

[0040] Figure 1 A flowchart of an image processing method provided by an embodiment of the present disclosure;

[0041] Figure 2 A schematic diagram of an all-in-one machine provided in an embodiment of the present disclosure acquiring an original image;

[0042] Figure 3 This is a schematic diagram of the working interface after the original image A is inserted into the workbench software;

[0043] Figure 4 This is a schematic diagram of the target flow chart drawn by the workbench software based on the original image A. DETAILED DESCRIPTION

[0044] In order to make the purpose, technical solution and advantages of the embodiments of the present disclosure clearer, the technical solution of the embodiments of the present disclosure will be clearly and completely described below in conjunction with the drawings of the embodiments of the present disclosure. Obviously, the described embodiments are part of the embodiments of the present disclosure, not all of the embodiments. Based on the described embodiments of the present disclosure, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present disclosure.

[0045] Unless otherwise defined, the technical terms or scientific terms used in the present disclosure should be understood by people with ordinary skills in the field to which the present disclosure belongs. The "first", "second" and similar words used in the present disclosure do not indicate any order, quantity or importance, but are only used to distinguish different components. Similarly, similar words such as "one", "one" or "the" do not indicate quantity restrictions, but indicate that there is at least one. Similar words such as "include" or "comprise" mean that the elements or objects appearing before the word cover the elements or objects listed after the word and their equivalents, without excluding other elements or objects. Similar words such as "connect" or "connected" are not limited to physical or mechanical connections, but can include electrical connections, whether direct or indirect. "Up", "down", "left", "right" and the like are only used to indicate relative positional relationships. When the absolute position of the described object changes, the relative positional relationship may also change accordingly.

[0046] Please refer to Figure 1 , Figure 1 A flowchart of an image processing method provided by an embodiment of the present disclosure, such as Figure 1 As shown, the following steps are included:

[0047] Step S101, obtaining an original image.

[0048] In the embodiments of the present disclosure, the original image can be understood as an image in a picture format, which contains a flowchart, such as common picture formats such as jpg, jpeg, png, gif, etc., that is, the original image can be understood as a flowchart picture. The image processing method implemented in the present disclosure is used to process the original image to generate a flowchart that can be edited secondary.

[0049] Optionally, the step of obtaining the original image includes:

[0050] (1) establishing a connection with an external device in response to a first connection request;

[0051] (2) Receive the original image transmitted by the external device.

[0052] In the disclosed embodiment, the image processing method is built into the all-in-one machine in the form of an application program. The all-in-one machine can be an all-in-one machine for various application scenarios such as a home all-in-one machine, a teaching all-in-one machine, a conference all-in-one machine, etc. For example, the conference all-in-one machine integrates multiple devices such as a projector, a screen, an electronic whiteboard, a sound system, a computer, and a remote conference terminal, and has multiple functions, which is suitable for various conference scenarios. The external device can be a terminal device such as a mobile phone or a computer. Please refer to Figure 2 In the disclosed embodiment, the original image is transmitted to the all-in-one machine through the peripheral device, and then processed by the built-in image processing method of the all-in-one machine.

[0053] Taking the external device as a mobile phone as an example, in the specific implementation, the user opens the file transfer application on the mobile phone, connects the mobile phone to the all-in-one machine through Bluetooth, Wi-Fi or other wireless methods, wherein the first connection request is the wireless connection request sent by the mobile phone, and the user selects the flowchart image (i.e., the original image) to be converted on the mobile phone and transfers it to the all-in-one machine. Among them, there can be many file transfer applications, such as "Jilian Quick Transfer", "Kuaiya", "Qiezi Quick Transfer", etc. First, download a quick transfer application on the mobile phone and the all-in-one machine, and transfer the above original image through the file transfer application. After that, the user opens the application of the image processing method on the all-in-one machine, clicks Insert, and selects the original image to be converted.

[0054] In the disclosed embodiment, the application is a workbench software that integrates a variety of tools and functions to provide users with a centralized and efficient working environment. Exemplarily, the workbench software integrates functions such as graphic recognition, optical character recognition (OCR), Canvas, and paint. When the user inserts the original image to be converted into the all-in-one machine, the all-in-one machine displays the original image on the canvas.

[0055] Step S102, extracting the graphic information and text information in the original image, and generating a graphic list and a text list respectively, wherein the graphic list includes the coordinates and graphic type of each graphic in the original image, and the text list includes the coordinates and text content of each text block in the original image.

[0056] In the embodiment of the present disclosure, step S102 includes two parts: generating a graphic list and generating a text list. Figure 3 , Figure 3 This is a schematic diagram of the working interface after the original image is inserted into the workbench software, as shown in Figure 3 As shown, after the user inserts the original image A into the workbench software, the original image A will be displayed in the canvas of the workbench software, and a "digital conversion" button will also be displayed on the workbench software. When the user clicks the "digital conversion" button, step S102 is executed, that is, the graphic recognition method is called to extract the graphic information in the original image to generate a graphic list, and the text recognition method is called to extract the text information in the original image to generate a text list.

[0057] Among them, the graphic list is the digitized data of each graphic in the original image, wherein the digitized data of each graphic includes the coordinates and graphic type of the graphic, and the digitized data of each graphic constitutes a graphic data list, that is, a graphic list as shown above. In the disclosed embodiment, the graphic type includes the types of commonly used graphics in the flow chart, including but not limited to rounded rectangles, right-angled rectangles, rhombuses and lines, wherein the rounded rectangle can be represented as Round Rect, the right-angled rectangle can be represented as Rect, the rhombus can be represented as Diamond, and the line can be represented as Line. For the graphic types of rounded rectangles, right-angled rectangles and rhombuses, the coordinates of the graphic include the coordinate values ​​(x, y) of the four vertices. For example, for a rhombus, the four vertices are respectively the top (Top), the bottom (Bottom), the left (Left), and the right (Right) four vertices. For a rounded rectangle or a right rectangle, the coordinates of the graphic include the coordinates of the four vertices of the upper left vertex, the lower left vertex, the upper right vertex, and the lower right vertex. For the graphic type of a line, the coordinates of the graphic include the coordinate values ​​(x, y) of the two points of the starting point (start) and the end point (end). Optionally, the lines may also include various types such as one-way arrows, two-way arrows, lines without arrows, dotted lines, solid lines, etc. In a specific implementation, the recognized graphic list may also include identifiers representing the line types.

[0058] by Figure 3 Taking the simple leave application process shown in the figure as an example, the original image A includes 2 rounded rectangles, two right-angled rectangles, 1 rhombus, and 5 one-way arrow lines. After image processing of the original image A, the graphic list obtained can be expressed as:

[0059] Round Rect1: (x11,y11), (x12,y12), (x13,y13), (x14,y14);

[0060] Rect1: (x21,y21), (x22,y22), (x23,y23), (x24,y24);

[0061] Rect2: (x31,y31), (x32,y32), (x33,y33), (x34,y34);

[0062] Diamond1: (x41,y41), (x42,y42), (x43,y43), (x44,y44);

[0063] Round Rect2: (x51,y51), (x52,y52), (x53,y53), (x54,y54);

[0064] Line1: (x61,y61), (x62,y62);

[0065] Line2: (x71,y71), (x72,y72);

[0066] Line3: (x81,y81), (x82,y82);

[0067] Line4: (x91,y91), (x92,y92);

[0068] Line5: (x101,y101), (x102,y102);

[0069] Among them, Round Rect1 and Round Rect2 represent two rounded rectangles in the original image A, Rect1 and Rect2 represent two right-angled rectangles in the original image A, Diamond1 represents a rectangular frame in the original image A, and Line1, Line2, Line3, Line4, and Line5 represent five single-arrow lines in the original image A. The coordinates after Round Rect1, RoundRect2, Rect1, Rect2, and Diamond1 represent the coordinates of the four vertices, and the coordinates after Line1 to Line5 represent the starting point coordinates and the end point coordinates of the lines.

[0070] The text list is the digitized data of each text block in the original image, and the digitized data of each text block includes the coordinates and text content of the text block. The digitized data of each text block constitutes a text data list, that is, the text list as described above. In the embodiment of the present disclosure, when performing text recognition, the continuous multiple characters in each line can be recognized as a text block in units of lines. Characters in different lines are recognized as different text blocks.

[0071] Continue with Figure 3 Taking the embodiment shown as an example, the text list obtained by performing text recognition on the original image A can be expressed as:

[0072] Block1: (x103, y103), content: start;

[0073] Block2: (x104, y104), content: leave application;

[0074] Block3: (x105, y105), content: fill in leave information;

[0075] Block4: (x106, y106), content: supervisor approval;

[0076] Block5: (x107, y107), content: approved?;

[0077] Block6: (x108, y108), content: yes;

[0078] Block7: (x109, y109), content: no;

[0079] Block8: (x110, y110), content: end.

[0080] Among them, Block1 to Block8 represent the text blocks in the original image A respectively, the coordinates after Block1 to Block8 represent the starting coordinates of each text block, and the content after Block1 to Block8 represents the text content of each text block.

[0081] Step S103, drawing each graphic on the canvas according to the graphic list and the preset graphic drawing method, drawing each text block on the canvas according to the text list and the preset text drawing method, and the graphics and text blocks on the canvas form a target flow chart. In the embodiment of the present disclosure, after drawing each graphic and each text block on the canvas, the same flow chart as in the original image can be obtained, and in order to distinguish and represent it, it is recorded as the target flow chart.

[0082] Optionally, the preset graphics drawing method is Canvas, and the preset text drawing method is paint.

[0083] In the disclosed embodiment, the step of drawing each graphic on the canvas according to the graphic list and the preset graphic drawing method includes: traversing each graphic in the graphic list; for any graphic, drawing the graphic represented by the graphic type at the coordinates of the graphic on the canvas through the first drawing component, and the graphic types include rounded rectangles, right-angled rectangles, diamonds and lines. Among them, the first drawing component is the Canvas class. In the computer field, Canvas specifically refers to an HTML5 element for drawing graphics on a web page. Canvas allows images, charts, games, etc. to be dynamically generated through JavaScript and CSS. It is a bitmap that can be operated with JavaScript, can generate and modify image content in real time, and has powerful image processing functions, such as scaling, rotation, translation, etc., making image processing more convenient.

[0084] For example, Figure 3Taking the rectangular rectangle Rect1 as an example, the rectangular rectangle can be drawn on the canvas according to the vertex coordinates (x21, y21), (x22, y22), (x23, y23), and (x24, y24) of the rectangular rectangle; for the rounded rectangle RoundRect1, the rounded rectangle can be drawn according to the vertex coordinates (x11, y11), (x12, y12), (x13, y13), and (x14, y14) of the rounded rectangle and the default fillet radius or chamfer radius. Similarly, various graphics can be drawn on the canvas.

[0085] In specific implementation, Canvas can use three methods to draw rectangles:

[0086] 1. fillRect(x,y,width,height): draw a filled rectangle;

[0087] 2. strokeRect(x,y,width,height): draw a rectangular border;

[0088] 3. clearRect(x,y,widh,height): clear the specified rectangular area, and then this area will become completely transparent. The above three methods have the same parameters, where x and y refer to the coordinates of the upper left corner of the rectangle, width and height are the width and height of the drawn rectangle respectively, and the parameters required for the conversion can be calculated according to the vertex coordinates extracted in step S102.

[0089] In the embodiment of the present disclosure, the step of drawing each text block on the canvas according to the text list and the preset text drawing method includes: traversing each text block in the text list; for any text block, taking the coordinates of the text block as the starting point, drawing the text represented by the text content on the canvas through a second drawing component, wherein the second drawing component is a Paint brush that provides the most basic drawing functions, such as color, brush size, style, etc. Figure 3Take the Chinese character block Block1 as an example. The text block can be drawn on the canvas according to the starting coordinates (x103, y103) and content of the text block. In specific implementation, the font color, font size, and font spacing of the text block can be drawn based on the default initial values. In addition, a parameter setting interface can be provided for users to set the font color, size, spacing and other parameters of the brush when drawing text. For example, the following parameters can be set: setColor(): set the color of the brush; setAntiAlias(): set the jagged effect of the brush; setARGB(): set the A, R, G, B color values ​​of the brush; setAlpha(): set the Alpha value of the brush; setTextSize(): set the font size; setStyle(): set the style of the brush (hollow or solid); setStrokeWidth(): set the width of the hollow border (line width), etc.

[0090] Step S104, in response to a user's click event on any graphic or text block, the graphic or text block is edited. In the process of step S103 and step S104, the original image in the canvas is deleted, and only the drawn target flowchart is displayed. Figure 4 As shown, the target flowchart is in editable state.

[0091] In the disclosed embodiment, in order to enable the user to perform secondary editing of the target flowchart, after the target flowchart is drawn, the image processing method in the all-in-one machine will automatically add click events to the elements in the target flowchart, such as graphics or text blocks, and then the target flowchart can be secondary edited in response to the user's operation.

[0092] In specific implementation, after drawing each graphic through Canvas, you can also use Canvas to add click events to each graphic in turn. In specific implementation, you can use canvas.addEventListener('click', handleNodeClick) statement to add a click event listener to the Canvas element (such as each graphic). When the user clicks the mouse on the canvas, the handleNodeClick function will be triggered to process the click event, and then determine whether the Canvas element is clicked and perform the corresponding operation. Similarly, after drawing each text block through paint, you can also use Canvas to add click events to each text block in turn. The principle of adding click events is the same as that of adding click events to graphics, which will not be repeated here.

[0093] Compared with the related art, the image processing method of the embodiment of the present disclosure can extract the graphic information and text information in the original image after acquiring the original image in picture format, generate a graphic list and a text list respectively, and draw each graphic on the canvas according to the graphic list and the preset graphic drawing method, and draw each text block on the canvas according to the text list and the preset text drawing method. Afterwards, when a user click event on a certain graphic or text block is detected, the graphic or text block can be edited for the second time, thereby realizing the secondary editing of the picture format flow chart, which can simplify user operations and improve user experience.

[0094] In a possible implementation, before the step of editing the graphic or text block in response to a user's click event on any graphic or text block, the step further includes:

[0095] (1) Any graphic is associated with a text block in the graphic according to the coordinates of each graphic and the coordinates of each text block, wherein each graphic and the text block in the graphic constitute a node, and each node on the canvas forms a target flow chart.

[0096] (2) Add a click event to the node.

[0097] At this time, the step of editing the graphic or text block in response to a user's click event on any graphic or text block includes: editing the node in response to a user's click event on any node.

[0098] In the disclosed embodiment, after the target flowchart is drawn on the canvas, when adding click events, the nodes in the flowchart are added as units. In the specific implementation, the association between graphics and text blocks is first established according to the positional relationship between each graphic and each text block. For any graphic, the graphic and the text block in the graphic are associated together to form a node, and a click event is added for each node. When a user clicks on a node, the node can be edited again.

[0099] Optionally, the click event includes a first click event and a second click event. By adding multiple different click events, it is convenient for users to perform different editing operations on the node.

[0100] In a possible implementation, the click event includes a first click event, and the step of editing the node in response to the user's click event on any node includes:

[0101] In response to the first click event, a first process is performed on the node, where the first process includes one or more of an operation of zooming in, zooming out, moving, and deleting.

[0102] In the embodiment of the present disclosure, in the process of drawing the target flow chart, the image processing method can also add a first click event to each node in the target flow chart, through which the user can zoom in, zoom out, move, delete, etc. on any node. Zooming in, zooming out, moving, deleting, etc. on any node means performing the same processing on the graphics and text blocks of any node, such as zooming in, zooming out, synchronously moving or deleting, etc. in equal proportion.

[0103] Exemplarily, the first click event is a click operation. For any node, assuming that a user clicks on the node, the node enters a selected state, and a delete button is displayed in the upper left corner of the node. The user can delete the node by clicking the delete button; in addition, the user can also drag the node to any position, and the user can also zoom in and out the node by sliding with two fingers.

[0104] In a possible implementation, the click event further includes a second click event, and the step of editing the node in response to the user's click event on any node further includes:

[0105] In response to the second click event, a second process is performed on the text block in the node, where the second process includes one or more of modification, addition, and deletion operations.

[0106] In the embodiment of the present disclosure, during the process of drawing the target flowchart, the image processing method can also add a second click event to each node in the target flowchart. Through the second click event, the user can perform editing operations on the text block in the node, including but not limited to modification, addition, deletion and other operations.

[0107] Exemplarily, the second click event is a double-click operation or a continuous click operation. For any node, if it is detected that the user double-clicks or continuously clicks the node, the node enters an edit state at this time, and the user can edit the text content in the node.

[0108] When a click event is triggered, the clientX and clientY methods are used to obtain the click position. The coordinates of the click position in the canvas can be calculated, and the coordinates of the click position can be compared with the area of ​​each node to determine which node the click event occurred. The area of ​​a node can be limited or represented by the coordinates of the graphics in the node.

[0109] In one possible implementation, the graphic recognition method used in step S102 is a local algorithm running on the all-in-one machine, which is used to identify various image information in the original image (i.e., the flowchart image). The algorithm belongs to the field of image processing or computer vision and can automatically analyze the image content and extract useful information.

[0110] In specific implementation, the above-mentioned graphic recognition method includes but is not limited to the following key steps:

[0111] (1) Image preprocessing: The algorithm will preprocess the acquired original image, including denoising, grayscale, binarization and other operations, to improve the accuracy and efficiency of subsequent image recognition.

[0112] (2) Shape recognition: The algorithm uses shape recognition technology to detect different shapes in the original image, such as rounded rectangles, right-angled rectangles, diamonds, and lines. This process involves steps such as edge detection, contour extraction, and shape matching. By comparing the shape of the graphics in the original image with the preset shape template, the algorithm can determine the graphic type and coordinates of each graphic.

[0113] (3) Vertex coordinate recording: For recognized shapes such as rounded rectangles, right-angled rectangles, and rhombuses, the algorithm records the coordinate values ​​(x, y) of their four vertices. These coordinate values ​​can be used for subsequent graphic positioning and node positioning.

[0114] (4) Line recognition and coordinate recording: The algorithm also recognizes the lines in the original image and records the coordinate values ​​(x, y) of their starting and ending points, which helps to understand the connection relationship and path of each node in the original image.

[0115] In a possible implementation, the text recognition method uses OCR technology, which can recognize the text content on the original image, convert the text into an editable text format, and extract each block of text, that is, the starting coordinate value (x, y) of each text block.

[0116] In a possible implementation, after the step of obtaining the original image, the following steps are further performed:

[0117] The original image is displayed on the canvas, and the position coordinates of a first vertex in the original image in the canvas are obtained and marked as first position coordinates.

[0118] Correspondingly, the step of drawing each graphic on the canvas according to the graphic list and the preset graphic drawing method includes: recording the sum of the coordinates of each graphic in the original image and the first position coordinates as the coordinates of each graphic in the canvas, and drawing each graphic on the canvas according to the graphic type of each graphic and the coordinates in the canvas by the preset graphic drawing method;

[0119] Correspondingly, the step of drawing each text on the canvas according to the text list and the preset text drawing method includes: recording the sum of the coordinates of each text block in the original image and the first position coordinates as the coordinates of each text block in the canvas, and drawing each text block on the canvas according to the text content of each text block and the coordinates in the canvas by the preset text drawing method.

[0120] For example, Figure 3 As shown, the first vertex can be the upper left vertex of the original image A, and the position coordinates of the first vertex in the canvas are marked as (X0, Y0), which takes the upper left vertex of the canvas as the coordinate origin (0, 0). In the disclosed embodiment, step S102 processes the original image, and the coordinates of each graphic obtained represent the position of the graphic in the original image, which takes the upper left vertex of the original image A as the coordinate origin. The coordinates of each text block obtained represent the position of each text block in the original image, which also takes the upper left vertex of the original image A as the coordinate origin. When drawing each graphic or text block in the canvas, it is necessary to obtain the position of each graphic or text block in the canvas. Therefore, before drawing, the coordinates of each graphic or text block need to be converted. Specifically, the coordinates of each graphic plus (X0, Y0) are the real coordinates of each graphic in the canvas, and the coordinates of each text block plus (X0, Y0) are the real coordinates of each text block in the canvas.

[0121] Optionally, before the step of obtaining the position coordinates of the first vertex in the original image in the canvas and marking them as first position coordinates, the step further includes: adjusting the size of the original image and the position of the original image on the canvas in response to a first user operation.

[0122] In the disclosed embodiment, after inserting the original image into the canvas, the user can also move the original image to change the position of the original image in the canvas. In addition, the user can also scale the original image to further adjust the size of the original image and the position of the original image in the canvas.

[0123] Based on the same inventive concept, the second aspect of the present disclosure provides a terminal, including a memory, a processor, and a program stored in the memory and executable on the processor; the processor is used to read the program in the memory to implement the steps in the image processing method described above.

[0124] Exemplarily, the terminal may be a display device such as a mobile phone, a tablet, a computer, or an all-in-one machine.

[0125] Based on the same inventive concept, the third aspect of the present disclosure provides a computer-readable storage medium on which a computer program is stored, and when the program is executed by a processor, the steps of the image processing method described above are implemented. In the specific implementation process, the computer storage medium may include: a universal serial bus flash drive (USB), a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, and other storage media that can store program codes.

[0126] Based on the same inventive concept, the fourth aspect of the present disclosure provides a computer program product, including a computer program, which implements the steps of the above-mentioned image processing method when executed by a processor. Since the principle of solving the problem by the above-mentioned computer program is similar to the principle of the image processing method, the implementation of the above-mentioned computer program can refer to the implementation of the image processing method, and the repeated parts will not be repeated.

[0127] The computer program product may employ any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. The readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination thereof. More specific examples (non-exhaustive list) of readable storage media include: an electrical connection with one or more wires, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CDROM), an optical storage device, a magnetic storage device, or any suitable combination thereof.

[0128] Among them, the display module in the embodiment of the present disclosure can be an organic light-emitting diode (OLED) display module. It is understandable that the display module can also be set to other types according to actual needs. For example, the display module can also be a quantum dot light emitting diode (QLED) display module or a micro light emitting diode (MicroLED) display module.

[0129] Obviously, the above embodiments of the present disclosure are merely examples for clearly illustrating the present disclosure, and are not limitations on the implementation methods of the present disclosure. For ordinary technicians in this field, other different forms of changes or modifications can be made on the basis of the above description. It is impossible to list all the implementation methods here. All obvious changes or modifications derived from the technical solution of the present disclosure are still within the protection scope of the present disclosure.

Claims

1. An image processing method, characterized in that: The following steps are involved: Get the original image; Extracting graphic information and text information from the original image, and generating a graphic list and a text list respectively, wherein the graphic list includes the coordinates and graphic type of each graphic in the original image, and the text list includes the coordinates and text content of each text block in the original image; Drawing each graphic on the canvas according to the graphic list and the preset graphic drawing method, drawing each text block on the canvas according to the text list and the preset text drawing method, and the graphics and text blocks on the canvas form a target flow chart; In response to a user's click event on any graphic or text block, the graphic or text block is edited.

2. The image processing method according to claim 1, characterized in that: Before the step of editing the graphic or text block in response to a user's click event on any graphic or text block, the method further includes: Associating any graphic with a text block in the graphic according to the coordinates of each graphic and the coordinates of each text block, wherein each graphic and the text block in the graphic constitute a node, and each node on the canvas forms the target flow chart; Add a click event to the node; The step of editing the graphic or text block in response to a user click event on any graphic or text block includes: editing the node in response to a user click event on any node.

3. The image processing method according to claim 2, characterized in that: The click event includes a first click event, and the step of editing the node in response to a user's click event on any node includes: In response to the first click event, a first process is performed on the node, where the first process includes one or more of an operation of zooming in, zooming out, moving, and deleting.

4. The image processing method according to claim 2 or 3, characterized in that: The click event includes a second click event, and the step of editing the node in response to a user's click event on any node includes: In response to the second click event, a second process is performed on the text block in the node, where the second process includes one or more of modification, addition, and deletion operations.

5. The image processing method according to claim 1, characterized in that: The step of drawing each graphic on the canvas according to the graphic list and the preset graphic drawing method comprises: Traversing each graphic in the graphic list; For any graphic, a graphic represented by the graphic type is drawn at the coordinates of the graphic on the canvas by a first drawing component, and the graphic type includes a rounded rectangle, a right-angled rectangle, a rhombus, and a line.

6. The image processing method according to claim 1, characterized in that: The coordinates of the text block include the starting coordinates of the text block, and the step of drawing each text block on the canvas according to the text list and the preset text drawing method includes: Traversing each text block in the text list; For any text block, the text represented by the text content is drawn on the canvas by a second drawing component with the coordinates of the text block as a starting point.

7. The image processing method according to claim 1, characterized in that: The step of obtaining the original image also includes: Displaying the original image on the canvas, obtaining the position coordinates of a first vertex of the original image in the canvas as first position coordinates; The step of drawing each graphic on the canvas according to the graphic list and the preset graphic drawing method includes: recording the sum of the coordinates of each graphic in the original image and the first position coordinates as the coordinates of each graphic in the canvas, and drawing each graphic on the canvas according to the graphic type of each graphic and the coordinates in the canvas by the preset graphic drawing method; The step of drawing each character on the canvas according to the text list and the preset text drawing method includes: recording the sum of the coordinates of each character block in the original image and the first position coordinates as the coordinates of each character block in the canvas, and drawing each character block on the canvas according to the text content of each character block and the coordinates in the canvas by the preset text drawing method.

8. The image processing method according to claim 7, characterized in that: Before the step of obtaining the position coordinates of the first vertex of the original image in the canvas and marking them as first position coordinates, the step further includes: The size of the original image and the position of the original image on the canvas are adjusted in response to a first user operation.

9. The image processing method according to claim 1, characterized in that: The steps to obtain the original image include: establishing a connection with an external device in response to a first connection request; Receive the original image transmitted by the external device.

10. A terminal comprising a memory, a processor, and a program stored in the memory and executable on the processor; characterized in that: The processor is used to read the program in the memory to implement the steps in the image processing method according to any one of claims 1 to 9.

11. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the steps of the image processing method according to any one of claims 1 to 9 are implemented.

12. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the steps of the image processing method according to any one of claims 1 to 9 are implemented.

Images