Front-end processing method and device for picture point selection and region drawing, medium and equipment

Abstract

The invention provides a front-end processing method and device for picture point selection and region drawing, a medium and equipment. The method comprises the following steps: adaptively initializing the size of a canvas; loading and displaying the to-be-loaded picture on the canvas when the user clicks the picture display button; when the user clicks the drawing area button, monitoring a click event and a mouse movement event of the user on the to-be-loaded picture; when the click event is monitored, taking the coordinate of a point clicked by the user as a picture point selection coordinate; drawing a connecting line between points clicked by the user when a mouse moving event occurs after the click event is monitored, ending drawing when the user clicks a drawing result storage button, and determining the geometrical shape of a drawn area; the picture point selection coordinates and the geometrical shape are converted into data in a format capable of being recognized by a back-end service; and sending the data in the format which can be identified by the back-end service to the back-end service. The invention provides an efficient and user-friendly data interaction scheme for picture point selection and region drawing.

Description

Technical Field

[0001] The present invention relates to the field of canvas technology, and in particular to a front-end processing method, device, medium and equipment for selecting points and drawing areas of an image. Background Art

[0002] In Web application development, users often need to select points and draw areas on images, and interact the data of these operations with backend services. By building electronic fences and combining AI algorithms, digital intelligence operations in various scenarios can be achieved. In addition, these operations are also very common in many application scenarios, such as online education, medical image analysis, geographic information systems (GIS), image editing, and e-commerce. Therefore, it is necessary to provide an implementation solution for image point selection and area drawing. Summary of the invention

[0003] In response to at least one of the above technical problems, an embodiment of the present invention provides a front-end processing method, device, medium, and equipment for image point selection and area drawing.

[0004] According to the first aspect, the front-end processing method for selecting points and drawing regions in an image provided by an embodiment of the present invention includes:

[0005] According to the size of the image to be loaded, the size of the canvas is adaptively initialized;

[0006] When the user clicks the display picture button, the picture to be loaded is loaded and displayed on the canvas;

[0007] When the user clicks the drawing area button, monitoring the user's click event and mouse movement event on the image to be loaded;

[0008] When the click event is detected, the coordinates of the point clicked by the user are used as the coordinates of the selected point of the image;

[0009] When the mouse move event occurs after the click event is monitored, a line is drawn between the points clicked by the user, and when the user clicks a button to save the drawing result, the drawing is ended, and the geometric shape of the drawn area is determined;

[0010] Convert the image point coordinates and the geometric shape into data in a format that can be recognized by the backend service;

[0011] The data in a format recognizable by the backend service is sent to the backend service so that the backend service performs corresponding processing as needed.

[0012] In one embodiment, sending the data in a format recognizable by the backend service to the backend service includes:

[0013] The data in a format recognizable by the backend service is sent to the backend service via an AJAX request; wherein the AJAX request is a request based on asynchronous JavaScript and extensible markup language.

[0014] In one embodiment, converting the image point coordinates and the geometric shape into data in a format recognizable by a backend service includes:

[0015] Convert the image point coordinates and the geometric shape into data in JSON format;

[0016] Correspondingly, sending the data in a format recognizable by the backend service to the backend service includes: sending the data in JSON format to the backend service.

[0017] In one embodiment, before adaptively initializing the size of the canvas according to the size of the image to be loaded, the method further includes:

[0018] A Vue.js component is preconfigured, wherein the Vue.js component includes a template, a script and a style; wherein the template includes three operation buttons and three canvas elements, wherein the three operation buttons are for clicking the display image button, the drawing area button and the save drawing result button, and the three canvas elements include canvas elements for displaying images, drawing areas and saving drawing results, and the three operation buttons correspond to the three canvas elements one by one; the script is used to define a mounted lifecycle hook function, and the style is used to define a canvas style and a button style.

[0019] In one embodiment, the adaptive initialization of the size of the canvas includes:

[0020] The size of the canvas is adaptively initialized in the mounted lifecycle hook function.

[0021] In one embodiment, loading and displaying the to-be-loaded picture on the canvas includes:

[0022] According to the ratio between the image to be loaded and the initialization size of the canvas, the image to be loaded is scaled, and the image is loaded and displayed so that the displayed image to be loaded adapts to the initialization size of the canvas.

[0023] In one embodiment, the method further includes: when the user clicks a clear all button, clearing the drawing result of the user on the image to be loaded.

[0024] According to the second aspect, the front-end processing device for selecting points and drawing regions of an image provided by an embodiment of the present invention includes:

[0025] The initialization module is used to adaptively initialize the size of the canvas according to the size of the image to be loaded;

[0026] A picture loading module, used to load and display the picture to be loaded on the canvas when the user clicks the display picture button;

[0027] An event monitoring module, used for monitoring the user's click event and mouse movement event on the image to be loaded when the user clicks the drawing area button;

[0028] A point selection determination module, used to use the coordinates of the point clicked by the user as the image point selection coordinates when the click event is monitored;

[0029] The area drawing module is used to draw the connection line between the points clicked by the user when the mouse movement event occurs after the click event is monitored, end the drawing when the user clicks the save drawing result button, and determine the geometric shape of the drawn area;

[0030] A format conversion module, used to convert the coordinates of the selected points in the image and the geometric shape into data in a format that can be recognized by the backend service;

[0031] The data sending module is used to send data in a format that can be recognized by the back-end service to the back-end service, so that the back-end service can perform corresponding processing as needed.

[0032] In one embodiment, the data sending module is specifically used to: send the data in a format recognizable by the backend service to the backend service via an AJAX request; wherein the AJAX request is a request based on asynchronous JavaScript and extensible markup language.

[0033] In one embodiment, the format conversion module is specifically used to: convert the image point selection coordinates and the geometric shape into data in JSON format; correspondingly, the data sending module is specifically used to: send the data in JSON format to the backend service.

[0034] In one embodiment, before adaptively initializing the size of the canvas according to the size of the image to be loaded, the initialization module is also used to: pre-configure a Vue.js component, wherein the Vue.js component includes a template, a script, and a style; wherein the template includes three operation buttons and three canvas elements, wherein the three operation buttons are for clicking the display image button, the drawing area button, and the save drawing result button, and the three canvas elements include canvas elements for displaying images, drawing areas, and saving drawing results, and the three operation buttons correspond to the three canvas elements one by one; the script is used to define a mounted lifecycle hook function, and the style is used to define a canvas style and a button style.

[0035] In one embodiment, the initialization module is specifically used to adaptively initialize the size of the canvas in the mounted lifecycle hook function.

[0036] In one embodiment, the image loading module is specifically used to: scale the image to be loaded according to the ratio between the image to be loaded and the initialization size of the canvas, and load and display the image so that the displayed image to be loaded adapts to the initialization size of the canvas.

[0037] In one embodiment, the device may further include:

[0038] The result clearing module is used to clear the drawing result of the user on the image to be loaded when the user clicks the clear all button.

[0039] According to a third aspect, an embodiment of the present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed in a computer, enables the computer to execute the method provided in the first aspect.

[0040] According to a fourth aspect, an embodiment of the present invention provides a computing device, including a memory and a processor, wherein the memory stores executable code, and when the processor executes the executable code, the method provided in the first aspect is implemented.

[0041] The front-end processing method, device, medium, and equipment for selecting points and drawing areas of pictures provided by the embodiment of the present invention first initialize the size of the canvas, load and display the picture to be loaded on the canvas when the user clicks the display picture button, and monitor the user's click event and mouse movement event on the picture to be loaded when the user clicks the draw area button. When the click event is monitored, the coordinates of the point clicked by the user are used as the coordinates of the picture selection point; when the mouse movement event occurs after the click event is monitored, the connection between the points clicked by the user is drawn, and the drawing is ended when the user clicks the save drawing result button, and the geometric shape of the drawn area is determined, and then the picture selection point coordinates and geometric shape are converted into data in a format that can be recognized by the back-end service, so that the data is sent to the back-end service, so that the back-end service performs corresponding processing as needed. It can be seen that the embodiment of the present invention does not rely on a third party, and also reduces the performance burden caused by loading a third-party library, thereby improving development efficiency and providing a smoother user experience. Moreover, through data format conversion, it is convenient to accurately interact with the back-end service. Based on the method provided by the embodiment of the present invention, users can easily select points and draw areas in Web applications, thereby improving the user interaction experience. It can be seen that the embodiment of the present invention is an efficient and user-friendly data interaction method for image point selection and area drawing, and ensures seamless data interaction with the back-end server, and is suitable for various Web application development scenarios that require such functions. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] Figure 1 A schematic flow chart of a front-end processing method for selecting points and drawing regions in an image according to an embodiment of the present invention;

[0043] Figure 2 The structure block diagram of the front-end processing device for image point selection and area drawing in one embodiment of the present invention. DETAILED DESCRIPTION

[0044] In the first aspect, the embodiment of the present invention provides a front-end processing method for selecting points and drawing regions in an image, see Figure 1 The method comprises the following steps S110 to S170:

[0045] S110, adaptively initializing the size of the canvas according to the size of the image to be loaded;

[0046] In one embodiment, the adaptive initialization of the size of the canvas in S110 may include: adaptive initialization of the size of the canvas in a mounted lifecycle hook function.

[0047] Among them, the mounted lifecycle hook function is the mounted lifecycle hook function.

[0048] In Vue.js, the mounted lifecycle hook function plays a vital role. It is a callback function triggered after the Vue.js component instance is mounted. The so-called mounting means compiling the component template into a real DOM element and inserting it into the page. By calling the mounted lifecycle hook function, you can operate DOM elements, obtain data, and initialize component status. Among them, DOM stands for Document Object Model, which is the document object model in Chinese.

[0049] In S110, the width and height of the canvas are dynamically set according to the size of the image to be loaded, so as to realize the initial setting of the canvas size. For example, if the size of the image to be loaded is large, the width and / or height of the canvas are also relatively large, and if the size of the image to be loaded is small, the width and / or height of the canvas are also relatively small. After the canvas size is initialized, the ratio between the size of the image to be loaded and the size of the canvas can be recorded.

[0050] In one embodiment, before adaptively initializing the size of the canvas according to the size of the image to be loaded in S110, the method may further include:

[0051] A Vue.js component is preconfigured, wherein the Vue.js component includes a template, a script and a style; wherein the template includes three operation buttons and three canvas elements, wherein the three operation buttons are for clicking the display image button, the drawing area button and the save drawing result button, and the three canvas elements include canvas elements for displaying images, drawing areas and saving drawing results, and the three operation buttons correspond to the three canvas elements one by one; the script is used to define a mounted lifecycle hook function, and the style is used to define a canvas style and a button style.

[0052] It can be seen that the design of Vue.js components can be realized by pre-configuring Vue.js components. Vue.js components include the following parts:

[0053] (1) Template: Contains three operation buttons and three canvas elements, which are used to display pictures, draw areas, and save drawing results respectively.

[0054] (2) Script: defines the mounted lifecycle hook function, which is used to manage the state of the canvas. It can also define data objects, i.e. the user's selected point data on the image.

[0055] (3) Style: Define the style of the canvas and the style of the button to ensure that the visual effect of the component is consistent with the overall design of the application. The style of the canvas, for example, is a square shape. The style of the button, for example, is a circular shape.

[0056] S120, when the user clicks the display picture button, the picture to be loaded is loaded and displayed on the canvas;

[0057] It can be seen that when the user clicks the display image button, the image to be loaded can be loaded and displayed on the canvas.

[0058] The page has buttons for displaying pictures, drawing areas, and saving drawing results.

[0059] In one embodiment, the loading and displaying of the image to be loaded on the canvas in S120 may include: scaling the image to be loaded according to a ratio between the image to be loaded and the initialization size of the canvas, and loading and displaying the image so that the displayed image to be loaded adapts to the initialization size of the canvas.

[0060] It can be seen that according to the ratio between the size of the image to be loaded and the size of the canvas, the image to be loaded is scaled, and then the image is loaded and displayed, so that the displayed image to be loaded can adapt to the size of the canvas.

[0061] S130, when the user clicks the drawing area button, monitoring the user's click event and mouse movement event on the image to be loaded;

[0062] That is, after the user clicks the drawing area button, you can start listening for click events and mouse movement events.

[0063] The click event refers to the operation of a user clicking a point on the image.

[0064] The mouse movement event refers to an event in which the user moves the mouse after clicking a point on the image.

[0065] S140, when the click event is monitored, using the coordinates of the point clicked by the user as the coordinates of the image selection point;

[0066] That is, when a click event is detected, the coordinates of the point selected by the user on the image can be used as the image selection point coordinates, and then the image selection point coordinates can be placed in an array.

[0067] S150, when the mouse move event occurs after the click event is monitored, drawing a line between the points clicked by the user, ending the drawing when the user clicks a save drawing result button, and determining a geometric shape of the drawn area;

[0068] That is, after the user clicks a point on the image, the mouse movement event is monitored. According to the user's mouse movement operation, lines are drawn between the points on the image. When the user draws an area, the user can click the Save Drawing Result button, at which point the drawing can be ended, and the geometric shape of the drawn area can be determined.

[0069] Among them, geometric shapes, for example, rectangle, hexagon, etc.

[0070] S160, converting the image point coordinates and the geometric shape into data in a format that can be recognized by a backend service;

[0071] That is, both the image point coordinates and the geometric shape are used as data that needs to be transferred to the back end.

[0072] In one embodiment, the step of converting the image point selection coordinates and the geometric shape into data in a format recognizable by a backend service in S160 may include: converting the image point selection coordinates and the geometric shape into data in a JSON format;

[0073] Correspondingly, the subsequent step S170 of sending the data in a format recognizable by the backend service to the backend service includes: sending the data in JSON format to the backend service.

[0074] That is, the coordinates of the selected points and the geometric shapes of the image are converted into data in JSON format, and then the data in JSON format is subsequently sent to the backend service for further processing by the backend service.

[0075] It can be seen that JSON format is a data format that can be recognized by the backend service.

[0076] S170: Send the data in a format recognizable by the backend service to the backend service, so that the backend service performs corresponding processing as needed.

[0077] In one embodiment, sending the data in a format recognizable by the backend service to the backend service may include: sending the data in a format recognizable by the backend service to the backend service via an AJAX request; wherein the AJAX request is a request based on asynchronous JavaScript and extensible markup language.

[0078] That is, the data packet of the image point coordinates and the geometric shape is transmitted to the backend service through the AJAX request, so that the backend service can further process the data packet.

[0079] In one embodiment, the method may further include: when the user clicks a clear all button, clearing the drawing result of the user on the image to be loaded.

[0080] That is, a clear all button is provided, so that when the user wants to clear the drawing result, the user can click the clear all button, and the area drawn by the user on the picture will be cleared, so that the area drawing can be restarted.

[0081] In a real-world scenario, you can also save the drawn area in another canvas element so that you can re-render it when needed.

[0082] In actual scenarios, you can use media query technology and percentage width to ensure that the canvas can be displayed correctly on different devices, that is, to achieve responsive design. You must also ensure that operations on the canvas can be implemented normally in mainstream browsers, including compatibility with older versions of browsers, that is, to achieve compatibility processing.

[0083] Some web applications use third-party libraries or plug-ins to implement these functions, but these methods have some limitations: 1. Dependency: Many traditional methods rely on specific third-party libraries or plug-ins, which limits the flexibility of development and may introduce compatibility and security issues. 2. Performance issues: Third-party libraries may affect the performance of web applications because they are too large or complex, especially on mobile devices. 3. Development efficiency: Traditional methods may require a lot of code and complex configuration, which increases development time and maintenance costs. 4. Data interaction: When the data of front-end operations interact with back-end services, traditional methods often require additional development work to ensure the compatibility of data formats and the real-time nature of the interaction. 5. User experience: Traditional methods may not provide a smooth and intuitive user experience, especially when dealing with complex image operations. In order to address these limitations, the embodiments of the present invention utilize the characteristics of the Vue.js component and give full play to the drawing capabilities of the canvas, thereby ensuring the convenience and real-time nature of data interaction.

[0084] The embodiments of the present invention have the following beneficial effects:

[0085] (1) Improve development efficiency and flexibility: Using the Vue.js framework and canvas interface can reduce dependence on third-party libraries, simplify the development process, improve development efficiency, and enhance code maintainability.

[0086] (2) Optimize performance: By directly using Web standard technologies, the performance burden of loading third-party libraries is reduced, especially on mobile devices and low-power devices, to provide a smoother user experience.

[0087] (3) Enhanced data interaction capabilities: By converting data into a standardized data format, it facilitates real-time and accurate data interaction with back-end services.

[0088] (4) Improve user experience: Provide an intuitive and responsive user interface that allows users to easily select points and draw areas on images in Web applications, thereby improving the user interaction experience.

[0089] (5) Componentization and modularization: Through the componentization feature of Vue.js, the image point selection and area drawing functions are encapsulated into reusable components, which are easy to use in different projects and applications.

[0090] It can be seen that the present invention can solve the problems of dependency, performance, development efficiency, data interaction and user experience when processing image point selection and area drawing in the field of Web application development.

[0091] In summary, through the above content, the embodiment of the present invention proposes a data interaction method for image point selection and area drawing implemented in a Web application using Vue.js components and a canvas. Through Vue.js componentization and direct operation of the canvas, the development efficiency, interaction efficiency and performance are greatly improved. The embodiment of the present invention is an efficient, flexible and user-friendly data interaction method for image point selection and area drawing, which is suitable for various Web application development scenarios that require such functions. The embodiment of the present invention can provide a powerful, efficient and user-friendly solution for Web application development to handle the needs of image point selection and area drawing, and ensure seamless data interaction with the back-end server. This will provide significant value and convenience for various industries that require such functions, such as online education, medical image analysis, geographic information systems, and e-commerce.

[0092] In a second aspect, an embodiment of the present invention provides a front-end processing device for selecting points and drawing regions in an image, see Figure 2 , the device 100 comprises:

[0093] Initialization module 110, used to adaptively initialize the size of the canvas according to the size of the image to be loaded;

[0094] The picture loading module 120 is used to load and display the picture to be loaded on the canvas when the user clicks the display picture button;

[0095] An event monitoring module 130 is used to monitor the user's click event and mouse movement event on the image to be loaded when the user clicks the drawing area button;

[0096] The point selection determination module 140 is used to use the coordinates of the point clicked by the user as the image point selection coordinates when the click event is monitored;

[0097] The area drawing module 150 is used to draw a line between the points clicked by the user when the mouse move event occurs after the click event is monitored, end the drawing when the user clicks a save drawing result button, and determine the geometric shape of the drawn area;

[0098] A format conversion module 160, used to convert the image point coordinates and the geometric shape into data in a format that can be recognized by a backend service;

[0099] The data sending module 170 is used to send data in a format recognizable by the backend service to the backend service, so that the backend service performs corresponding processing as needed.

[0100] In one embodiment, the data sending module is specifically used to: send the data in a format recognizable by the backend service to the backend service via an AJAX request; wherein the AJAX request is a request based on asynchronous JavaScript and extensible markup language.

[0101] In one embodiment, the format conversion module is specifically used to: convert the image point selection coordinates and the geometric shape into data in JSON format; correspondingly, the data sending module is specifically used to: send the data in JSON format to the backend service.

[0102] In one embodiment, before adaptively initializing the size of the canvas according to the size of the image to be loaded, the initialization module is also used to: pre-configure a Vue.js component, wherein the Vue.js component includes a template, a script, and a style; wherein the template includes three operation buttons and three canvas elements, wherein the three operation buttons are for clicking the display image button, the drawing area button, and the save drawing result button, and the three canvas elements include canvas elements for displaying images, drawing areas, and saving drawing results, and the three operation buttons correspond to the three canvas elements one by one; the script is used to define a mounted lifecycle hook function, and the style is used to define a canvas style and a button style.

[0103] In one embodiment, the initialization module is specifically used to adaptively initialize the size of the canvas in the mounted lifecycle hook function.

[0104] In one embodiment, the image loading module is specifically used to: scale the image to be loaded according to the ratio between the image to be loaded and the initialization size of the canvas, and load and display the image so that the displayed image to be loaded adapts to the initialization size of the canvas.

[0105] In one embodiment, the device may further include:

[0106] The result clearing module is used to clear the drawing result of the user on the image to be loaded when the user clicks the clear all button.

[0107] It is understandable that the explanation, specific implementation, beneficial effects, examples, etc. of the relevant contents in the device provided in the embodiment of the present invention can be found in the corresponding parts of the method provided in the first aspect, and will not be repeated here.

[0108] In a third aspect, an embodiment of the present invention provides a computer-readable medium, on which computer instructions are stored. When the computer instructions are executed by a processor, the processor executes the method provided in the first aspect.

[0109] Specifically, a system or device equipped with a storage medium can be provided, on which software program code that implements the functions of any of the above-mentioned embodiments is stored, and a computer (or CPU or MPU) of the system or device can be enabled to read and execute the program code stored in the storage medium.

[0110] In this case, the program code itself read from the storage medium can realize the function of any one of the above-mentioned embodiments, and thus the program code and the storage medium storing the program code constitute a part of the present invention.

[0111] The storage medium embodiments for providing the program code include a floppy disk, a hard disk, a magneto-optical disk, an optical disk (such as CD-ROM, CD-R, CD-RW, DVD-ROM, DVD-RAM, DVD-RW, DVD+RW), a magnetic tape, a non-volatile memory card, and a ROM. Alternatively, the program code can be downloaded from a server computer by a communication network.

[0112] In addition, it should be clear that the functions of any of the above embodiments can be implemented not only by executing the program code read by the computer, but also by enabling an operating system operating on the computer to complete part or all of the actual operations based on instructions from the program code.

[0113] In addition, it can be understood that the program code read from the storage medium is written to a memory provided in an expansion board inserted into the computer or to a memory provided in an expansion module connected to the computer, and then based on the instructions of the program code, a CPU installed on the expansion board or expansion module is enabled to perform part or all of the actual operations, thereby realizing the functions of any of the above-mentioned embodiments.

[0114] It is understandable that the explanation, specific implementation methods, beneficial effects, examples, etc. of the relevant contents in the computer-readable medium provided in the embodiment of the present invention can be found in the corresponding parts of the method provided in the first aspect, and will not be repeated here.

[0115] In a fourth aspect, an embodiment of the present specification provides a computing device, including a memory and a processor, wherein the memory stores executable code, and when the processor executes the executable code, it implements the method in any embodiment of the specification.

[0116] It is understandable that the explanation, specific implementation, beneficial effects, examples, etc. of the relevant contents in the computing device provided in the embodiment of the present invention can be found in the corresponding parts of the method provided in the first aspect, and will not be repeated here.

[0117] Each embodiment in this specification is described in a progressive manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0118] Those skilled in the art should be aware that in one or more of the above examples, the functions described in the present invention can be implemented by hardware, software, widgets, or any combination thereof. When implemented by software, these functions can be stored in a computer-readable medium or transmitted as one or more instructions or codes on a computer-readable medium.

[0119] The specific implementation methods described above further illustrate the objectives, technical solutions and beneficial effects of the present invention in detail. It should be understood that the above description is only a specific implementation method of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc. made on the basis of the technical solution of the present invention should be included in the scope of protection of the present invention.

Claims

1. A front-end processing method for image point selection and area drawing, characterized in that: include: According to the size of the image to be loaded, the size of the canvas is adaptively initialized; When the user clicks the display picture button, the picture to be loaded is loaded and displayed on the canvas; When the user clicks the drawing area button, monitoring the user's click event and mouse movement event on the image to be loaded; When the click event is detected, the coordinates of the point clicked by the user are used as the coordinates of the selected point of the image; When the mouse move event occurs after the click event is monitored, a line is drawn between the points clicked by the user, and when the user clicks a button to save the drawing result, the drawing is ended, and the geometric shape of the drawn area is determined; Convert the image point coordinates and the geometric shape into data in a format that can be recognized by the backend service; The data in a format recognizable by the backend service is sent to the backend service so that the backend service performs corresponding processing as needed.

2. The method according to claim 1, characterized in that: The sending the data in a format recognizable by the backend service to the backend service includes: The data in a format recognizable by the backend service is sent to the backend service via an AJAX request; wherein the AJAX request is a request based on asynchronous JavaScript and extensible markup language.

3. The method according to claim 1, characterized in that The step of converting the image point coordinates and the geometric shape into data in a format recognizable by a backend service includes: Convert the image point coordinates and the geometric shape into data in JSON format; Correspondingly, sending the data in a format recognizable by the backend service to the backend service includes: sending the data in JSON format to the backend service.

4. The method according to claim 1, characterized in that: Before adaptively initializing the size of the canvas according to the size of the image to be loaded, the method further includes: A Vue.js component is preconfigured, wherein the Vue.js component includes a template, a script and a style; wherein the template includes three operation buttons and three canvas elements, wherein the three operation buttons are for clicking the display image button, the drawing area button and the save drawing result button, and the three canvas elements include canvas elements for displaying images, drawing areas and saving drawing results, and the three operation buttons correspond to the three canvas elements one by one; the script is used to define a mounted lifecycle hook function, and the style is used to define a canvas style and a button style.

5. The method according to claim 4, characterized in that The adaptive initialization of the size of the canvas includes: The size of the canvas is adaptively initialized in the mounted lifecycle hook function.

6. The method according to claim 1, characterized in that The step of loading and displaying the image to be loaded on the canvas includes: According to the ratio between the image to be loaded and the initialization size of the canvas, the image to be loaded is scaled, and the image is loaded and displayed so that the displayed image to be loaded adapts to the initialization size of the canvas.

7. The method according to claim 1, characterized in that Also includes: When the user clicks the Clear All button, the drawing result of the user on the image to be loaded is cleared.

8. A front-end processing device for selecting points and drawing regions in an image, characterized in that: include: The initialization module is used to adaptively initialize the size of the canvas according to the size of the image to be loaded; A picture loading module, used to load and display the picture to be loaded on the canvas when the user clicks the display picture button; An event monitoring module, used for monitoring the user's click event and mouse movement event on the image to be loaded when the user clicks the drawing area button; A point selection determination module, used to use the coordinates of the point clicked by the user as the image point selection coordinates when the click event is monitored; The area drawing module is used to draw the connection line between the points clicked by the user when the mouse movement event occurs after the click event is monitored, end the drawing when the user clicks the save drawing result button, and determine the geometric shape of the drawn area; A format conversion module, used to convert the coordinates of the selected points in the image and the geometric shape into data in a format that can be recognized by the backend service; The data sending module is used to send data in a format recognizable by the backend service to the backend service, so that the backend service can perform corresponding processing as needed.

9. A computer-readable storage medium, characterized in that: A computer program is stored thereon, and when the computer program is executed in a computer, the computer is caused to execute the method according to any one of claims 1 to 7.

10. A computing device, characterized in that The method comprises a memory and a processor, wherein the memory stores executable codes, and when the processor executes the executable codes, the method according to any one of claims 1 to 7 is implemented.

Images