Picture mark echoing method and device, medium and equipment

Abstract

The invention provides a picture mark echoing method and device, a medium and equipment. The method comprises the following steps: determining a rectangular area marked on a current picture by a user; obtaining coordinate information of the rectangular area relative to the parcel container as first coordinate information; calculating second coordinate information; the second coordinate information is stored in an array list, and the array list is stored in a database at the rear end; when the rectangular area marked by one picture has an echo demand, acquiring second coordinate information corresponding to the target picture from a database at the rear end; multiplying the obtained second coordinate information by the zoom ratio of the target picture relative to the original picture to obtain third coordinate information; according to the third coordinate information, calculating size information of the marked rectangular area and position information relative to the parcel container; and displaying a corresponding rectangular area on the target picture according to the size information and the position information. The storage space can be saved, and the burden of the database is reduced.

Description

Technical Field

[0001] The present invention relates to the field of image processing technology, and in particular to an image tagging and echoing method, device, medium and equipment. Background Art

[0002] Due to business needs, a picture marking function is required. The picture marking function means drawing a rectangular box on the picture to mark it. When the picture is opened again, the historical marked data is required to be displayed normally, that is, the marked data can be echoed.

[0003] In order to realize the echo of the mark, there are usually two solutions: 1. Save the image after the last mark; 2. Save only the coordinate information of the mark, and when it is opened again, draw the coordinate information on the image for display. Among them, the problem of solution 1 is that it will increase the burden on the database because it needs to store both the original image and the marked image; and it is impossible to edit the mark data, such as deleting the mark information. The problem of solution 2 is that it is impossible to edit the mark data, such as deleting the mark information. Summary of the invention

[0004] In view of at least one of the above technical problems, an embodiment of the present invention provides a method, device, medium, and equipment for echoing a picture mark.

[0005] According to the first aspect, the picture marking echoing method provided by the embodiment of the present invention includes:

[0006] Determine the rectangular area marked by the user on the current image;

[0007] Obtaining coordinate information of the rectangular area relative to a wrapping container, and using the coordinate information as first coordinate information; wherein the wrapping container is a partition label that can be displayed as a rectangular frame on a page when it is set to have a border attribute;

[0008] Dividing the first coordinate information by the scaling ratio of the current picture relative to the original picture, obtain coordinate information of the rectangular area in the original picture corresponding to the current picture, and using the coordinate information as the second coordinate information;

[0009] Storing the second coordinate information in an array list, and storing the array list in a back-end database;

[0010] When there is a need to display a rectangular area marked by an image, the image is used as a target image, and the second coordinate information corresponding to the target image is obtained from the back-end database;

[0011] Multiply the acquired second coordinate information by the scaling ratio of the target image relative to the original image to obtain coordinate information of the marked rectangular area in the target image, and use the coordinate information as the third coordinate information;

[0012] Calculate the size information of the marked rectangular area and the position information relative to the package container according to the third coordinate information;

[0013] According to the size information and the position information, a corresponding rectangular area is displayed on the target image.

[0014] In one embodiment, the coordinate information of the rectangular area includes the horizontal and vertical coordinates of the upper left corner, the horizontal and vertical coordinates of the lower left corner, the horizontal and vertical coordinates of the upper right corner, and the horizontal and vertical coordinates of the lower right corner.

[0015] In one embodiment, the size information of the marked rectangular area is calculated, including: subtracting the horizontal coordinate of the upper left corner point from the horizontal coordinate of the upper right corner point in the third coordinate information to obtain the width of the rectangular area; subtracting the vertical coordinate of the upper left corner point from the vertical coordinate of the lower left corner point in the third coordinate information to obtain the height of the rectangular area; the width and the height are the scale information.

[0016] In one embodiment, calculating the position information of the marked rectangular area relative to the wrapping container includes: using the horizontal coordinate of the upper left corner point in the third coordinate information as the left margin of the rectangular area relative to the wrapping container, using the vertical coordinate of the upper left corner point in the third coordinate information as the top margin of the rectangular area relative to the wrapping container, and using the left margin and the top margin as the position information.

[0017] In one embodiment, the method further includes: upon receiving a user's deletion operation on a rectangular area on the target image, determining the unique identifier of the original image of the target image and the second coordinate information corresponding to the unique identifier of the rectangular area in the database of the backend, deleting the determined second coordinate information from the array list of the database, and deleting the rectangular area from the target image on the front end.

[0018] In one embodiment, the package container maintains an image tag and a partition list inside; wherein the image tag is used to display the original image of the current image displayed on the page; and the partition list is used to display the marked rectangular area.

[0019] In one embodiment, the outer layer position attribute of the wrapping container is a relative attribute value, and the position attribute of the partition list is an absolute attribute value.

[0020] According to the second aspect, the picture marking echoing device provided by the embodiment of the present invention includes:

[0021] A first determination module, used to determine the rectangular area marked by the user on the current picture;

[0022] A first acquisition module is used to acquire coordinate information of the rectangular area relative to a wrapping container, and use the coordinate information as first coordinate information; wherein the wrapping container is a partition label that can be displayed as a rectangular frame on a page when it is set to have a border attribute;

[0023] A first calculation module, configured to divide the first coordinate information by a scaling ratio of the current picture relative to the original picture to obtain coordinate information of the rectangular area in the original picture corresponding to the current picture, and use the coordinate information as second coordinate information;

[0024] A first saving module, used for storing the second coordinate information into an array list, and storing the array list in a back-end database;

[0025] The second acquisition module is used to use the picture as the target picture when there is a need to echo the rectangular area marked by the picture, and to obtain the second coordinate information corresponding to the target picture from the back-end database;

[0026] A second calculation module is used to multiply the acquired second coordinate information by the zoom ratio of the target image relative to the original image to obtain coordinate information of the marked rectangular area in the target image, and use the coordinate information as third coordinate information;

[0027] A third calculation module, used for calculating the size information of the marked rectangular area and the position information relative to the package container according to the third coordinate information;

[0028] The area display module is used to display the corresponding rectangular area on the target image according to the size information and the position information.

[0029] 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.

[0030] 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.

[0031] The picture mark echoing method, device, medium, and equipment provided by the embodiment of the present invention determine the rectangular area marked by the user on the current picture, use the coordinate information of the rectangular area relative to the package container as the first coordinate information, and convert the first coordinate information into the second coordinate information according to the zoom ratio of the current picture and save it in the back-end database. When it is necessary to echo, the corresponding second coordinate information is obtained, the second coordinate information is converted into the third coordinate information according to the zoom ratio of the target picture, the size and position are calculated based on the third coordinate information, and then the rectangular area is displayed on the target picture based on the size and position. Since the embodiment of the present invention does not need to save the complete picture with the mark information, the storage space can be saved and the burden on the database is reduced. Moreover, there is no need to draw the original picture in a practical sense, thereby avoiding the tedious operation of redrawing the picture on the canvas. It is only necessary to determine the size information and position information of the rectangular area according to the coordinate information, and then the rectangular area can be drawn on the picture, which is convenient and flexible. In addition, since the second coordinate information in the embodiment of the present invention is stored separately in the array list of the back-end database, it is convenient for editing operations, such as deletion. BRIEF DESCRIPTION OF THE DRAWINGS

[0032] Figure 1 Schematic diagram of the process of a method for marking and displaying a picture in one embodiment of the present invention;

[0033] Figure 2 4 is a structural block diagram of a picture marking and echoing device in one embodiment of the present invention. DETAILED DESCRIPTION

[0034] In a first aspect, an embodiment of the present invention provides a method for displaying a picture mark. Figure 1 The method includes the following steps S110 to S180:

[0035] S110, determining a rectangular area marked by a user on the current image;

[0036] Among them, S110-S140 is the picture marking stage, and S150-S180 is the marking data echoing stage.

[0037] In S110 , the user performs a marking operation on the current picture, and a rectangular area, that is, a rectangular frame, is obtained, so the rectangular area marked by the user on the current picture is obtained.

[0038] For ease of operation, the user can scale the original image to a certain extent and perform a marking operation on the scaled current image, so the current image can be a picture after the original image is scaled to a certain extent. Of course, the current image can also be the original image. If the current image is the original image, the scaling ratio is 1.

[0039] S120, obtaining coordinate information of the rectangular area relative to a wrapping container, and using the coordinate information as first coordinate information; wherein the wrapping container is a partition label that can be displayed as a rectangular frame on a page when it is set to have a border attribute;

[0040] The wrapping container is a wrapper, which is a div tag. When the wrapper is set to have a border attribute, the wrapper can be displayed as a rectangular frame on the page.

[0041] The original image has a unique identifier, and each marked rectangular area also has a unique identifier.

[0042] In one embodiment, the package container may maintain an image tag and a partition list inside; wherein the image tag is used to display the original image of the current image displayed on the page; and the partition list is used to display the marked rectangular area.

[0043] The image tag is the img tag, which is used to display the original image. The width of the image displayed by the img tag fills the width of the container wrap. The height of the img tag does not need to be set, and it will be displayed adaptively according to the aspect ratio of the image. If the image is drawn to the canvas at the original size and a base64 image is generated, the original image is displayed in the img tag.

[0044] The partition list is used to display the marked data, that is, to display the marked rectangular area in the current image corresponding to the original image.

[0045] In one embodiment, the outer layer position attribute of the wrapping container may be a relative attribute value, and the position attribute of the partition list may be an absolute attribute value.

[0046] It can be seen that the position attribute of the outer layer of the wrapping container is relative, while the position attribute of the inner partition list is absolute. This setting facilitates the subsequent calculation of the second coordinate information and the third coordinate information, ensuring the calculation accuracy of the second coordinate information and the third coordinate information.

[0047] The zoom ratio is the ratio between the width of the original image and the actual width of the current image displayed by the browser.

[0048] The first coordinate information, the second coordinate information, and the third coordinate information of the rectangular area all include the horizontal and vertical coordinates of the upper left corner, the horizontal and vertical coordinates of the lower left corner, the horizontal and vertical coordinates of the upper right corner, and the horizontal and vertical coordinates of the lower right corner.

[0049] S130, dividing the first coordinate information by the scaling ratio of the current picture relative to the original picture to obtain coordinate information of the rectangular area in the original picture corresponding to the current picture, and using the coordinate information as second coordinate information;

[0050] It is understandable that the first coordinate information is determined in the current picture, and the coordinate information of the rectangular area in the original picture, ie, the second coordinate information, can be obtained by dividing the first coordinate information by the zoom ratio of the current picture.

[0051] S140, storing the second coordinate information in an array list, and storing the array list in a backend database;

[0052] Among them, array list is array list.

[0053] It is understandable that for a current picture, one or more rectangular areas can be marked. Multiple rectangular areas marked for multiple current pictures can all be stored in an array list. Since the original picture has a unique identifier and the rectangular area also has a unique identifier, the unique identifier of the original picture and the unique identifier of the rectangular area have a corresponding relationship, so the second coordinate information corresponding to all the rectangular areas marked in the current picture corresponding to the original picture can be determined later based on the unique identifier of the original picture.

[0054] For example, the array list in the database stores second coordinate information corresponding to all rectangular areas marked in the current pictures a2, b2, c2 corresponding to the original pictures a1, b1, c1.

[0055] S150: when there is a need to display a rectangular area marked by a picture, the picture is used as a target picture, and second coordinate information corresponding to the target picture is obtained from a backend database;

[0056] For example, the user needs to echo the rectangular area marked on the picture a2 corresponding to the original picture a1 corresponding to the picture a3 in the picture a3. The pictures a3 and a2 are both pictures obtained by scaling the original picture a1 to a certain extent. The scaling ratios of the pictures a3 and a2 can be the same or different. At this time, there is an echo requirement, so the picture a3 is used as the target picture, and the second coordinate information of each rectangular area corresponding to the original picture a1 corresponding to the picture a3 is obtained from the back-end database, and the second coordinate information of a rectangular area is obtained.

[0057] S160, multiplying the acquired second coordinate information by the scaling ratio of the target image relative to the original image to obtain coordinate information of the marked rectangular area in the target image, and using the coordinate information as third coordinate information;

[0058] For example, the second coordinate information obtained in S150 is the coordinate information of the rectangular area relative to the original image a1. The second coordinate information obtained in S150 is multiplied by the zoom ratio of the image a3 to obtain the coordinate information of the rectangular area relative to the image a3, that is, the third coordinate information.

[0059] S170, calculating the size information of the marked rectangular area and the position information relative to the package container according to the third coordinate information;

[0060] It is understandable that in order to display a rectangular area on the target image, the size and position of the rectangular area need to be determined, and the size and position are both determined based on the third coordinate information.

[0061] In one embodiment, calculating the size information of the marked rectangular area may include: subtracting the horizontal coordinate of the upper left corner point from the horizontal coordinate of the upper right corner point in the third coordinate information to obtain the width of the rectangular area; subtracting the vertical coordinate of the upper left corner point from the vertical coordinate of the lower left corner point in the third coordinate information to obtain the height of the rectangular area; the width and the height are the scale information.

[0062] It can be seen that the size information of the rectangular area includes width and height. The width is the value obtained by subtracting the horizontal coordinate of the upper left corner point from the horizontal coordinate of the upper right corner point in the third coordinate information, and the height is the value obtained by subtracting the vertical coordinate of the upper left corner point from the vertical coordinate of the lower left corner point in the third coordinate information.

[0063] In one embodiment, calculating the position information of the marked rectangular area relative to the wrapping container may include: using the horizontal coordinate of the upper left corner point in the third coordinate information as the left margin of the rectangular area relative to the wrapping container, using the vertical coordinate of the upper left corner point in the third coordinate information as the top margin of the rectangular area relative to the wrapping container, and using the left margin and the top margin as the position information.

[0064] It can be seen that the position information includes the left margin of the rectangular area relative to the wrapping container and the top margin of the rectangular area relative to the wrapping container.

[0065] S180: Display a corresponding rectangular area on the target image according to the size information and the position information.

[0066] It can be seen that through the size information and position information, a rectangular area can be displayed on the target image to realize the echo of the marked data.

[0067] In one embodiment, the method may further include:

[0068] When receiving a user's deletion operation on a rectangular area on the target image, determine the unique identifier of the original image of the target image and the second coordinate information corresponding to the unique identifier of the rectangular area in the back-end database, delete the determined second coordinate information from the array list of the database, and delete the rectangular area from the target image on the front-end.

[0069] That is to say, when the user deletes a rectangular area displayed on the target image, the second coordinate information stored in the back-end database can be found according to the unique identifier of the original image corresponding to the target image and the unique identifier of the rectangular area, and the second coordinate information is deleted from the database, and the rectangular area is deleted from the target image, thus achieving simultaneous deletion of the back-end and the front-end. It can be seen that when deleting, no operation is required on the image itself.

[0070] The embodiment of the present invention mainly involves three stages: Step 1: Preparation stage: prepare a package container, that is, a container for displaying pictures and marking data; Step 2: Marking stage: save the second coordinate information corresponding to the marked rectangular area; Step 3: Echo stage: obtain the second coordinate information, convert it into the third coordinate information, and calculate the size information and position information, and then display the rectangular area. In the whole process, the embodiment of the present invention involves CSS positioning technology, Canvas technology, and Vue technology, which greatly improves the applicability, efficiency and performance of annotation. Among them, CSS is Cascading Style Sheets, and its full English name is Cascading Style Sheets. Canvas is canvas. Vue is a JavaScript framework for building user interfaces.

[0071] It can be seen that compared with the traditional method of saving complete pictures with marked information, the embodiment of the present invention can save storage space and reduce the burden on the database, because the embodiment of the present invention only needs to save the original picture, not the marked picture. Moreover, there is no need to draw the original picture in a practical sense, thereby avoiding the tedious operation of redrawing the picture on the canvas. It is only necessary to determine the size information and position information of the rectangular area according to the coordinate information to draw the rectangular area on the picture, which is convenient and flexible.

[0072] In a second aspect, an embodiment of the present invention provides a device for displaying a picture mark. Figure 2 , the device 100 comprises:

[0073] A first determination module 110 is used to determine a rectangular area marked by a user on a current picture;

[0074] The first acquisition module 120 is used to acquire the coordinate information of the rectangular area relative to the package container, and use the coordinate information as the first coordinate information; wherein the package container is a partition label that can be displayed as a rectangular frame on the page when it is set to have a border attribute;

[0075] A first calculation module 130 is used to divide the first coordinate information by the scaling ratio of the current picture relative to the original picture to obtain coordinate information of the rectangular area in the original picture corresponding to the current picture, and use the coordinate information as second coordinate information;

[0076] A first saving module 140 is used to store the second coordinate information into an array list, and store the array list in a back-end database;

[0077] The second acquisition module 150 is used to, when there is a need to display a rectangular area marked in an image, use the image as a target image and acquire second coordinate information corresponding to the target image from a backend database;

[0078] The second calculation module 160 is used to multiply the acquired second coordinate information by the scaling ratio of the target image relative to the original image to obtain the coordinate information of the marked rectangular area in the target image, and use the coordinate information as the third coordinate information;

[0079] A third calculation module 170, configured to calculate size information of the marked rectangular area and position information relative to the package container according to the third coordinate information;

[0080] The area display module 180 is used to display the corresponding rectangular area on the target image according to the size information and the position information.

[0081] In one embodiment, the coordinate information of the rectangular area includes the horizontal and vertical coordinates of the upper left corner, the horizontal and vertical coordinates of the lower left corner, the horizontal and vertical coordinates of the upper right corner, and the horizontal and vertical coordinates of the lower right corner.

[0082] In one embodiment, the third calculation module calculates the size information of the marked rectangular area, including: subtracting the horizontal coordinate of the upper left corner point from the horizontal coordinate of the upper right corner point in the third coordinate information to obtain the width of the rectangular area; subtracting the vertical coordinate of the upper left corner point from the vertical coordinate of the lower left corner point in the third coordinate information to obtain the height of the rectangular area; the width and the height are the scale information.

[0083] In one embodiment, the third calculation module calculates the position information of the marked rectangular area relative to the wrapping container, including: using the horizontal coordinate of the upper left corner point in the third coordinate information as the left margin of the rectangular area relative to the wrapping container, using the vertical coordinate of the upper left corner point in the third coordinate information as the top margin of the rectangular area relative to the wrapping container, and using the left margin and the top margin as the position information.

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

[0085] The mark deletion module is used to determine the unique identifier of the original image of the target image and the second coordinate information corresponding to the unique identifier of the rectangular area in the back-end database when receiving a user's deletion operation on a rectangular area on the target image, delete the determined second coordinate information from the array list of the database, and delete the rectangular area from the target image on the front-end.

[0086] In one embodiment, the package container maintains an image tag and a partition list inside; wherein the image tag is used to display the original image of the current image displayed on the page; and the partition list is used to display the marked rectangular area.

[0087] In one embodiment, the outer layer position attribute of the wrapping container is a relative attribute value, and the position attribute of the partition list is an absolute attribute value.

[0088] 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.

[0089] 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.

[0090] 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.

[0091] 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.

[0092] 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.

[0093] 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.

[0094] 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.

[0095] 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.

[0096] 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.

[0097] 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.

[0098] 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.

[0099] 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.

[0100] 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 method for echoing a picture mark, characterized in that: include: Determine the rectangular area marked by the user on the current image; Obtaining coordinate information of the rectangular area relative to a wrapping container, and using the coordinate information as first coordinate information; wherein the wrapping container is a partition label that can be displayed as a rectangular frame on a page when it is set to have a border attribute; Dividing the first coordinate information by the scaling ratio of the current picture relative to the original picture, obtain coordinate information of the rectangular area in the original picture corresponding to the current picture, and using the coordinate information as the second coordinate information; Storing the second coordinate information in an array list, and storing the array list in a back-end database; When there is a need to display a rectangular area marked by an image, the image is used as a target image, and the second coordinate information corresponding to the target image is obtained from the back-end database; Multiply the acquired second coordinate information by the scaling ratio of the target image relative to the original image to obtain coordinate information of the marked rectangular area in the target image, and use the coordinate information as the third coordinate information; Calculate the size information of the marked rectangular area and the position information relative to the package container according to the third coordinate information; According to the size information and the position information, a corresponding rectangular area is displayed on the target image.

2. The method according to claim 1, characterized in that The coordinate information of the rectangular area includes the horizontal and vertical coordinates of the upper left corner, the horizontal and vertical coordinates of the lower left corner, the horizontal and vertical coordinates of the upper right corner, and the horizontal and vertical coordinates of the lower right corner.

3. The method according to claim 2, characterized in that Calculate the size information of the marked rectangular area, including: The width of the rectangular area is obtained by subtracting the horizontal coordinate of the upper left corner point from the horizontal coordinate of the upper right corner point in the third coordinate information; the height of the rectangular area is obtained by subtracting the vertical coordinate of the upper left corner point from the vertical coordinate of the lower left corner point in the third coordinate information; the width and the height are the scale information.

4. The method according to claim 2, characterized in that: Calculating the position information of the marked rectangular area relative to the package container includes: The horizontal coordinate of the upper left corner point in the third coordinate information is used as the left margin of the rectangular area relative to the wrapping container, the vertical coordinate of the upper left corner point in the third coordinate information is used as the top margin of the rectangular area relative to the wrapping container, and the left margin and the top margin are used as the position information.

5. The method according to claim 1, characterized in that Also includes: When receiving a user's deletion operation on a rectangular area on the target image, determine the unique identifier of the original image of the target image and the second coordinate information corresponding to the unique identifier of the rectangular area in the back-end database, delete the determined second coordinate information from the array list of the database, and delete the rectangular area from the target image on the front-end.

6. The method according to claim 1, characterized in that The package container maintains an image tag and a partition list inside; wherein the image tag is used to display the original image of the current image displayed on the page; and the partition list is used to display the marked rectangular area.

7. The method according to claim 6, characterized in that The outer layer position attribute of the wrapping container is a relative attribute value, and the position attribute of the partition list is an absolute attribute value.

8. A picture tag echoing device, characterized in that: include: A first determination module, used to determine the rectangular area marked by the user on the current picture; A first acquisition module is used to acquire coordinate information of the rectangular area relative to a wrapping container, and use the coordinate information as first coordinate information; wherein the wrapping container is a partition label that can be displayed as a rectangular frame on a page when it is set to have a border attribute; A first calculation module, configured to divide the first coordinate information by a scaling ratio of the current picture relative to the original picture to obtain coordinate information of the rectangular area in the original picture corresponding to the current picture, and use the coordinate information as second coordinate information; A first saving module, used for storing the second coordinate information into an array list, and storing the array list in a back-end database; The second acquisition module is used to, when there is a need to echo a rectangular area marked in an image, use the image as a target image and acquire second coordinate information corresponding to the target image from a backend database; A second calculation module is used to multiply the acquired second coordinate information by the scaling ratio of the target image relative to the original image to obtain coordinate information of the marked rectangular area in the target image, and use the coordinate information as third coordinate information; A third calculation module, used for calculating the size information of the marked rectangular area and the position information relative to the package container according to the third coordinate information; The area display module is used to display the corresponding rectangular area on the target image according to the size information and the position information.

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