CN106776939A - A kind of image lossless mask method and system - Google Patents
A kind of image lossless mask method and system Download PDFInfo
- Publication number
- CN106776939A CN106776939A CN201611094657.4A CN201611094657A CN106776939A CN 106776939 A CN106776939 A CN 106776939A CN 201611094657 A CN201611094657 A CN 201611094657A CN 106776939 A CN106776939 A CN 106776939A
- Authority
- CN
- China
- Prior art keywords
- image
- marked
- web server
- server end
- information
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/50—Information retrieval; Database structures therefor; File system structures therefor of still image data
- G06F16/58—Retrieval characterised by using metadata, e.g. metadata not derived from the content or metadata generated manually
- G06F16/5866—Retrieval characterised by using metadata, e.g. metadata not derived from the content or metadata generated manually using information manually generated, e.g. tags, keywords, comments, manually generated location and time information
Abstract
The invention discloses a kind of image lossless mask method and system, wherein, the method comprising the steps of 1：Web server end receives image to be marked and is sent to browser end；Step 2：Browser end sets canvas units and usually loads image to be marked；Step 3：Browser end monitors mouse click event in real time, and the information that collection is associated with mouse click event is simultaneously sent to web server end；Each mouse click event is associated to point to be marked in image to be marked and corresponding markup information；Step 4：Web server end dynamic label placement is associated to mouse click event in image to be marked mark point and corresponding markup information, the image after dynamic label placement are resent to browser end, are loaded so as to realize the lossless mark of image by canvas element dynamics.
Description
Technical field
The invention belongs to image processing field, more particularly to a kind of image lossless mask method and system.
Background technology
Image labeling technology mainly uses certain means to add some words to image, and arrow, local detail is put
Greatly, lines, size etc. information, to express more accurately information.User more accurately understands image by markup information
The content passed on, researcher can carry out more deep analysis according to the content of mark.Additionally, the mark of image, especially
It is that the mark of 3-D view preferably assistant designer can create outstanding works.Life of the image labeling technology to us
The everyways such as living, study, research are significant.
Current image labeling function is mainly by all kinds of image processing softwares to realize.These image processing software functions
No doubt it is very powerful, but software footprint is too big, lacks necessary interaction, and learn the problems such as using relatively time-consuming still
It is very prominent.On the other hand, image is labeled using image editing software is directly operated on original image, has been marked
Be difficult to cancel after, while also destroy the original image of user, if user want to reuse original image information can only be
Manual backup before mark, this has been greatly reduced the experience of user.
The content of the invention
In order to solve the shortcoming of prior art, the first object of the present invention is to provide a kind of image lossless mask method.
A kind of image lossless mask method of the invention, the method is entered from web server end and browser end mixing side
Row description, the method includes：
Step 1：Web server end receives image to be marked and is sent to browser end；
Step 2：Browser end sets canvas units and usually loads image to be marked；
Step 3：Browser end monitors mouse click event in real time, and the information that collection is associated with mouse click event is simultaneously passed
Web server end is delivered to be stored；Each mouse click event and point to be marked and corresponding markup information in image to be marked
It is associated；
Step 4：The web server end mark that dynamic label placement is associated with mouse click event in image to be marked point and
Corresponding markup information, the image after dynamic label placement is resent to browser end, by the loading of canvas element dynamics so as to realize figure
The lossless mark of picture.
The all operations of the image labeling method of the invention are canvas layers that image is processed in web server end,
The online mark to image is realized, while not causing any destruction to original image；And the method web server end with
Browser end interacts realization, with lower coupling, reusability high, can be advantageously applied in other web systems, and energy
Enough realize that user is added, shares markup information online to the image in system；The image labeling method of the invention need not
Software is installed and builds the troublesome operations such as peculiar running environment, reached enhancing Consumer's Experience, make image labeling more easily mesh
's.
Further, in the step 1, also include：Web server end parses all original marks in image to be marked
Dot position information and markup information are simultaneously sent to browser end and are loaded by canvas elements.
The beneficial effect that the step is produced：Data are provided to go back the existing markup information of original image, while being Dynamic Display
Marked content, the request that response user obtains marked content is prepared, and existing mark point is reverted into original position, to text
The complex informations such as this mark are just shown only when mouse moves to the position, it is to avoid image information is blocked, while making boundary
Face is cleaner and tidier friendly.
Further, in the step 1, image to be marked is stored in high in the clouds, and high in the clouds is by the figure to be marked of its memory storage
As being sent to web server end.Image to be marked is stored using high in the clouds, has on the one hand saved a large amount of local storage spaces, another
Aspect ensures the information security reliability of users to share by the safety monitoring in high in the clouds.
Further, in the step 1, web server end also parses the figure wide, high and to be marked of image to be marked
The rotation information of picture, all original mark point position when being scaled 0 is calculated according to image scaling ratio.
Markup information can so be calculated (is used for X-Y scheme in different rotary angle (for 3-D view) with scaling
Picture) relative position under state, to be accurately positioned a mark point position；For the rotation of 3-D view, labeling position coordinate is same
Camera position is recorded together, renders once mark point again when rotating.
Further, in the step 3, when the position that the mouse click event that web server termination is received is associated
Information is identical, then the positional information and markup information that the mouse click event for being received using last time is associated are previous to cover
The information of secondary collection.Can so reduce web server end data redundancy storage, so query image positional information and
Markup information can greatly reduce the inquiry operation of data, improve search efficiency.
Further, web server end also sets a unique ID value to each image to be marked, ID values and its accordingly
Point position is marked in image to be marked and markup information is associated.
When the associated positional information of web server end storage mouse click event and markup information, together with figure to be marked
As corresponding ID values are stored together.Correspondence image can be just so found by retrieving markup information, at utmost be ensure that and searched
The accuracy of hitch fruit.
The second object of the present invention is to provide a kind of image lossless labeling system.
A kind of image lossless labeling system of the invention, including web server end and browser end；
Web server end, it is configured as：Receive image to be marked and be sent to browser end；
Browser end, it is configured as：
Canvas units are set and usually load image to be marked；
Mouse click event is monitored in real time, and the information that collection is associated with mouse click event is simultaneously sent to web server
End is stored；Each mouse click event is associated to point to be marked in image to be marked and corresponding markup information；
The web server end, is additionally configured to：Dynamic label placement is associated with mouse click event in image to be marked
Mark point and corresponding markup information, the image after dynamic label placement is resent to browser end, loaded by canvas element dynamics
So as to realize the lossless mark of image.
All operations of the image labeling system of the invention are the canvas that image is processed in web server end
Layer, realizes the online mark to image, while not causing any destruction to original image；And the method is in web server
End interacts realization with browser end, with lower coupling, reusability high, can be advantageously applied in other web systems,
And can realize that user is added, shares markup information online to the image in system；The image labeling system of the invention
Software need not be installed and build the troublesome operations such as peculiar running environment, reach enhancing Consumer's Experience, make image labeling more convenient
Purpose.
Further, the web server end, is additionally configured to：Web server end is additionally configured to：Parsing is to be marked
All original mark dot position informations and markup information and it is sent to browser end and is loaded by canvas elements in image.
Data are provided to go back the existing markup information of original image, while being Dynamic Display marked content, response user obtains
The request of marked content is prepared, by it is existing mark point revert to original position, to the complex informations such as text marking only when
Mouse is just shown when moving to the position, it is to avoid image information is blocked, while make interface cleaner and tidier friendly.
Further, image to be marked is stored in high in the clouds, and the image to be marked of its memory storage is sent to web services by high in the clouds
Device end.
Image to be marked is stored using high in the clouds, a large amount of local storage spaces has on the one hand been saved, on the other hand by high in the clouds
Safety monitoring ensure users to share information security reliability.
Further, the web server end, is additionally configured to：Parse the figure wide, high and to be marked of image to be marked
The rotation information of picture, all original mark point position when being scaled 0 is calculated according to image scaling ratio.Can so calculate
Relative position of the markup information under different rotary angle (being used for 3-D view) with scaling (being used for two dimensional image) state,
To be accurately positioned mark point position；For the rotation of 3-D view, labeling position coordinate is recorded together with camera position, works as hair
Again mark point is rendered once during raw rotation.
Further, the web server end, is additionally configured to：Web server end is also set to each image to be marked
Point position is marked in one unique ID value, ID values and its corresponding image to be marked and markup information is associated.
When the associated positional information of web server end storage mouse click event and markup information, together with figure to be marked
As corresponding ID values are stored together.Correspondence image can be just so found by retrieving markup information, at utmost be ensure that and searched
The accuracy of hitch fruit.
The third object of the present invention is to provide another image lossless mask method.
Another image lossless mask method of the invention, the method is described from web server side, the method bag
Include：
Step 1：Receive image to be marked and be sent to browser end；
Step 2：Receive the associated information of the next mouse click event of browser end transmission；Each mouse click event with
Point to be marked and corresponding markup information are associated in image to be marked；
Step 3：Dynamic label placement and the mark point that mouse click event is associated and corresponding mark letter in image to be marked
Breath, the image after dynamic label placement is resent to browser end, is loaded so as to realize the lossless mark of image by canvas element dynamics
Note.
The all operations of the image labeling method of the invention are to process image in web server end, are realized to figure
The online mark of picture, while not causing any destruction to original image；And the method is entered at web server end with browser end
Row interaction is realized, with lower coupling, reusability high, can be advantageously applied in other web systems, and can realize user
Image in system is added online, is shared markup information；The image labeling method of the invention need not install software and take
The troublesome operations such as peculiar running environment are built, enhancing Consumer's Experience has been reached, makes image labeling more easily purpose.
Further, in the step 1, also include：Web server end parses all original marks in image to be marked
Dot position information and markup information are simultaneously sent to browser end and are loaded by canvas elements.
The beneficial effect that the step is produced：Data are provided to go back the existing markup information of original image, while being Dynamic Display
Marked content, the request that response user obtains marked content is prepared, and existing mark point is reverted into original position, to text
The complex informations such as this mark are just shown only when mouse moves to the position, it is to avoid image information is blocked, while making boundary
Face is cleaner and tidier friendly.
Further, in the step 1, image to be marked is stored in high in the clouds, and high in the clouds is by the figure to be marked of its memory storage
As being sent to web server end.Image to be marked is stored using high in the clouds, has on the one hand saved a large amount of local storage spaces, another
Aspect ensures the information security reliability of users to share by the safety monitoring in high in the clouds.
Further, in the step 1, web server end also parses the figure wide, high and to be marked of image to be marked
The rotation information of picture, all original mark point position when being scaled 0 is calculated according to image scaling ratio.
Markup information can so be calculated (is used for X-Y scheme in different rotary angle (for 3-D view) with scaling
Picture) relative position under state, to be accurately positioned a mark point position；For the rotation of 3-D view, labeling position coordinate is same
Camera position is recorded together, renders once mark point again when rotating.
Further, in the step 2, when the position that the mouse click event that web server termination is received is associated
Information is identical, then the positional information and markup information that the mouse click event for being received using last time is associated are previous to cover
The information of secondary collection.Can so reduce web server end data redundancy storage, so query image positional information and
Markup information can greatly reduce the inquiry operation of data, improve search efficiency.
Further, web server end also sets a unique ID value to each image to be marked, ID values and its accordingly
Point position is marked in image to be marked and markup information is associated.
When the associated positional information of web server end storage mouse click event and markup information, together with figure to be marked
As corresponding ID values are stored together.Correspondence image can be just so found by retrieving markup information, at utmost be ensure that and searched
The accuracy of hitch fruit.
The fourth object of the present invention is to provide another image lossless labeling system.
Another image lossless labeling system of the invention, including web server end, the web server end includes：
Image receiver module, it is used to receive image to be marked and is sent to browser end；
Mouse click event related information receiver module, it is used to receive the mouse click event phase that browser end transmission comes
The information of association；Each mouse click event is associated to point to be marked in image to be marked and corresponding markup information；
Image dynamic label placement module, it is used for the mark that dynamic label placement is associated with mouse click event in image to be marked
Note point and corresponding markup information, the image after dynamic label placement are resent to browser end, by the loading of canvas element dynamics so as to
Realize the lossless mark of image.
All operations of the image labeling system of the invention are to process image in web server end, and it is right to realize
The online mark of image, while not causing any destruction to original image；And the method is in web server end and browser end
Realization is interacted, with lower coupling, reusability high, can be advantageously applied in other web systems, and can realize using
Image in system is added online, is shared markup information in family；The image labeling system of the invention need not install software
The troublesome operations such as peculiar running environment are built, enhancing Consumer's Experience has been reached, makes image labeling more easily purpose.
The web server end, also includes：First parsing module, it is used to parse all original marks in image to be marked
Note dot position information and markup information and be sent to browser end and loaded by canvas elements.
Data are provided to go back the existing markup information of original image, while being Dynamic Display marked content, response user obtains
The request of marked content is prepared, by it is existing mark point revert to original position, to the complex informations such as text marking only when
Mouse is just shown when moving to the position, it is to avoid image information is blocked, while make interface cleaner and tidier friendly.
Further, image to be marked is stored in high in the clouds, and the image to be marked of its memory storage is sent to web services by high in the clouds
Device end.Image to be marked is stored using high in the clouds, a large amount of local storage spaces has on the one hand been saved, on the other hand by the peace in high in the clouds
Full monitoring ensures the information security reliability of users to share.
Further, the web server end, also includes：Second parsing module, it is used to parse image to be marked
The rotation information of wide, high and image to be marked, all original mark point when being scaled 0 is calculated according to image scaling ratio
Position.
Markup information can so be calculated (is used for X-Y scheme in different rotary angle (for 3-D view) with scaling
Picture) relative position under state, to be accurately positioned a mark point position；For the rotation of 3-D view, labeling position coordinate is same
Camera position is recorded together, renders once mark point again when rotating.
Further, the web server end also includes：Memory module, it is used for when the mouse click event for receiving
Associated positional information is identical, then positional information and mark letter that the mouse click event for being received using last time is associated
Cease the information once to be gathered before covering.The data redundancy storage at web server end can be so reduced, so in query image
Positional information and markup information can greatly reduce the inquiry operation of data, improve search efficiency.
Further, the web server end, also includes：ID value setup modules, it is used for also to each image to be marked
One unique ID value is set, is marked point position in ID values and its corresponding image to be marked and markup information is associated.
Canvas elements of the present invention：
Canvas elements are used for the graphing on webpage in HTML standard HTML5, and the element tags can directly exist
Graphic operation is carried out on HTML.Canvas elements possess the side of various drawing paths, rectangle, circle, character and addition image
Method, can create abundant figure and quote.
Beneficial effects of the present invention are：
(1) all operations of the image labeling method of the invention are the canvas that image is processed in web server end
Layer, realizes the online mark to image, while not causing any destruction to original image；And the method is in web server
End interacts realization with browser end, with lower coupling, reusability high, can be advantageously applied in other web systems,
And can realize that user is added, shares markup information online to the image in system；The image labeling method of the invention
Software need not be installed and build the troublesome operations such as peculiar running environment, reach enhancing Consumer's Experience, make image labeling more convenient
Purpose.
(2) all operations of the image labeling system of the invention are to process image in web server end, are realized
To the online mark of image, while any destruction is not caused to original image；And the method is in web server end and browser
End interacts realization, with lower coupling, reusability high, can be advantageously applied in other web systems, and can realize
User is added, is shared markup information online to the image in system；The image labeling system of the invention need not install soft
Part builds the troublesome operations such as peculiar running environment, has reached enhancing Consumer's Experience, makes image labeling more easily purpose.
Brief description of the drawings
Fig. 1 is a kind of flow chart of image lossless mask method embodiment one of the invention.
Fig. 2 is a kind of structural representation of image lossless labeling system embodiment one of the invention.
Fig. 3 is a kind of flow chart of image lossless mask method embodiment two of the invention.
Fig. 4 is a kind of structural representation of image lossless labeling system embodiment two of the invention.
Specific embodiment
Below in conjunction with the accompanying drawing in the embodiment of the present invention, the technical scheme in the embodiment of the present invention is carried out clear, complete
Site preparation is described, it is clear that described embodiment is only a part of embodiment of the invention, rather than whole embodiments.
The web server end referred in the embodiment of the present invention can include that any can be that the client computer on Internet is carried
Server for the various Internet services such as WWW, Email and FTP all may be used.
The browser end referred in the embodiment of the present invention can include for needing any support under two-dimensional case
The browser of HTML5canvas all can, for 3-D view need browser support WebGL standards.
Fig. 1 is a kind of flow chart of image lossless mask method embodiment one of the invention.
A kind of image lossless mask method as shown in Figure 1, the method is from web server end and the mixing side of browser end
To be described, the method includes：Step 1~step 4.
Step 1：Web server end receives image to be marked and is sent to browser end.
Wherein, image to be marked is stored in high in the clouds, and the image to be marked of its memory storage is sent to web server by high in the clouds
End.Image to be marked is stored using high in the clouds, a large amount of local storage spaces has on the one hand been saved, on the other hand by the safety in high in the clouds
Monitoring ensures the information security reliability of users to share.
In step 1, also include：Web server end parse in image to be marked all original mark dot position informations and
Markup information is simultaneously sent to browser end and is loaded by canvas elements.
The information of each mark point is read, according to coordinate position and data high wide, correspondence under default situations is calculated
Coordinate value, such as read some point coordinate be, x0, y0, a width of w0, a height of w1, if get current device acquiescence
Canvas elements a width of w1, a height of w2, then position coordinates during point initialization loading should be x=(w0/w1) * x0, high
It is y=(h0/h1) * y0.According to x, the value of y draws a circle to show that there is a mark point position on canvas elements,
The content of Dynamic Announce the need for other, such as label time, user name, marked content etc. are loaded out after completing.Graphics
The situation of picture is similar with said process, but after coordinate information is calculated, drafting is a spheroid.
In step 1, web server end also parses the rotation information of the image wide, high and to be marked of image to be marked,
The all original mark point position when being scaled 0 is calculated according to image scaling ratio.Concrete mode is：
When user changes the scaling of image, the width (W) of currentElement is obtained, (H) high renders the x coordinate of mark point again
For：(W/width)*x0；Y-coordinate is (H/height) * y0；Wherein, x0And y0Change image when representing rendering mark point respectively
Coordinate before scaling.Scaling is directed to the distance of camera position, therefore coordinate without conversion in 3-D view.Similarly, pin
Rotation to 3-D view, labeling position coordinate is recorded together with camera position, is rendered again when rotating and once marked
Point.
Markup information can so be calculated (is used for X-Y scheme in different rotary angle (for 3-D view) with scaling
Picture) relative position under state, to be accurately positioned a mark point position.
Step 2：Browser end sets canvas units and usually loads image to be marked.
Step 3：Browser end monitors mouse click event in real time, and the information that collection is associated with mouse click event is simultaneously passed
Web server end is delivered to be stored；Each mouse click event and point to be marked and corresponding markup information in image to be marked
It is associated.
In step 3, when the associated positional information of the web server mouse click event that receives of termination is identical, then profit
The information once gathered before covering with the associated positional information of the mouse click event of last time reception and markup information.
The data redundancy storage at web server end can be so reduced, so can in the positional information and markup information of query image
Greatly reduce the inquiry operation of data, improve search efficiency.
Specifically, after image to be marked and existing markup information loaded, user annotation request is received at any time.This hair
Various mouse actions are made accordingly by the mouse event of bright image labeling method monitoring users.User's mouse clicks on image institute
At region, first, a mark point is added position is clicked, for highlighting current location, while herein for user is dynamic
State is presented a light instrument column comprising functions such as selection, movement, texts.Then, original image and current unit are obtained respectively
The width value width and height value height of element, also need to record the position (CL) of Current camera to indicate rotation in 3-D view
The position for turning, acquisition is clicked the coordinate (x, y) or (x, y, z) of position, by data width, height, CL, and (x, y) or
The value of (x, y, z) keep in it is data cached in, if user had carried out mouse action again before this mark is submitted to, with new
Value covering caching in legacy data.When user submits mark request to, the information of mark is stored in the buffer area of the mark point, most
Afterwards, the backstage that the content this in buffer area is submitted to together carries out data storage, and the Local hydrodynamic unit of front end content is only needed
To be read out from caching when submitting to just now, greatly reduce the inquiry operation of data.
Web server end also sets a unique ID value, ID values and its corresponding figure to be marked to each image to be marked
Point position is marked as in and markup information is associated.The associated positional information of web server end storage mouse click event and
During markup information, stored together with the corresponding ID values of image to be marked.So by retrieve markup information can just find it is right
Image is answered, the accuracy of Search Results is at utmost ensure that.
When certain image is retrieved in systems, such as user input term " automobile ", system retrieval service can first go to look into
The record containing " automobile " one word in image name is looked for, then goes the note containing " automobile " keyword in the word content of matching mark
Record, preferentially shows after the record duplicate removal that repetition is retrieved in two paths.
Step 4：The web server end mark that dynamic label placement is associated with mouse click event in image to be marked point and
Corresponding markup information, the image after dynamic label placement is resent to browser end, by the loading of canvas element dynamics so as to realize figure
The lossless mark of picture.
The all operations of the image labeling method of the present embodiment are the canvas that image is processed in web server end
Layer, realizes the online mark to image, while not causing any destruction to original image；And the method is in web server
End interacts realization with browser end, with lower coupling, reusability high, can be advantageously applied in other web systems,
And can realize that user is added, shares markup information online to the image in system；The image labeling side of the present embodiment
Method need not install software and build the troublesome operations such as peculiar running environment, reach enhancing Consumer's Experience, make image labeling more just
Prompt purpose.
Fig. 2 is a kind of structural representation of image lossless labeling system embodiment one of the invention.This as shown in Figure 2 be
A kind of system, the then image lossless labeling system of the embodiment, including web corresponding with the image lossless mask method shown in Fig. 1
Server end and browser end.
(1) web server end
Web server end, it is configured as：
Receive image to be marked and be sent to browser end.
The web server end, is additionally configured to：Dynamic label placement is associated with mouse click event in image to be marked
Mark point and corresponding markup information, the image after dynamic label placement is resent to browser end, loaded by canvas element dynamics
So as to realize the lossless mark of image.
Wherein, mark image is stored in high in the clouds, and web server end obtains image to be marked from high in the clouds.Image to be marked is adopted
Stored with high in the clouds, on the one hand saved a large amount of local storage spaces, on the other hand ensure that user is total to by the safety monitoring in high in the clouds
The information security reliability enjoyed.
Further, web server end, is additionally configured to：Parse the image wide, high and to be marked of image to be marked
Rotation information, all original mark point position when being scaled 0 is calculated according to image scaling ratio.Mark can so be calculated
Relative position of the information under different rotary angle (being used for 3-D view) with scaling (being used for two dimensional image) state, so as to
It is accurately positioned mark point position；For the rotation of 3-D view, labeling position coordinate is recorded together with camera position, when revolving
Again mark point is rendered once when turning.
Further, the web server end, is additionally configured to：Web server end is also set to each image to be marked
Point position is marked in one unique ID value, ID values and its corresponding image to be marked and markup information is associated.Storage mouse point
When hitting the associated positional information of event and markup information, stored together with the corresponding ID values of image to be marked.So pass through
Retrieval markup information can just find correspondence image, at utmost ensure that the accuracy of Search Results.
(2) browser end
Browser end, it is configured as：
Canvas units are set and usually load image to be marked；
Mouse click event is monitored in real time, and the information that collection is associated with mouse click event is simultaneously sent to web server
End is stored；Each mouse click event is associated to point to be marked in image to be marked and corresponding markup information.
All operations of the image labeling system of the present embodiment are the canvas that image is processed in web server end
Layer, realizes the online mark to image, while not causing any destruction to original image；And the method is in web server
End interacts realization with browser end, with lower coupling, reusability high, can be advantageously applied in other web systems,
And can realize that user is added, shares markup information online to the image in system；The image labeling system of the present embodiment
System need not install software and build the troublesome operations such as peculiar running environment, reach enhancing Consumer's Experience, make image labeling more just
Prompt purpose.
Fig. 3 is a kind of flow chart of embodiment two of image lossless mask method of the invention.Image lossless as shown in Figure 3
Mask method, the method is described from web server side, and the method includes：Step 1~step 3.
Step 1：Receive image to be marked and be sent to browser end.
Wherein, mark image is stored in high in the clouds, and web server end obtains image to be marked from high in the clouds.Image to be marked is adopted
Stored with high in the clouds, so on the one hand saved a large amount of local storage spaces, on the other hand ensure to use by the safety monitoring in high in the clouds
The shared information security reliability in family.
In step 1, also include：Web server end parse in image to be marked all original mark dot position informations and
Markup information is simultaneously sent to browser end.
In step 1, web server end also parses the rotation information of the image wide, high and to be marked of image to be marked,
The all original mark point position when being scaled 0 is calculated according to image scaling ratio.Concrete mode is：
When user changes the scaling of image, the width (W) of currentElement is obtained, (H) high renders the x coordinate of mark point again
For：(W/width)*x0；Y-coordinate is (H/height) * y0；Wherein, x0And y0Change image when representing rendering mark point respectively
Coordinate before scaling.Scaling is directed to the distance of camera position, therefore coordinate without conversion in 3-D view.Similarly, pin
Rotation to 3-D view, labeling position coordinate is recorded together with camera position, is rendered again when rotating and once marked
Point.
Markup information can so be calculated (is used for X-Y scheme in different rotary angle (for 3-D view) with scaling
Picture) relative position under state, to be accurately positioned a mark point position.
Step 2：Receive the associated information of the next mouse click event of browser end transmission；Each mouse click event with
Point to be marked and corresponding markup information are associated in image to be marked.
When the positional information that the mouse click event that web server termination is received is associated is identical, then using last time
The associated positional information of the mouse click event of reception and markup information are come the information that is once gathered before covering.Can so subtract
The data redundancy storage at few web server end, so the positional information and markup information in query image can greatly reduce number
According to inquiry operation, improve search efficiency.
Specifically, after image to be marked and existing markup information loaded, user annotation request is received at any time.This hair
Various mouse actions are made accordingly by the mouse event of bright image labeling method monitoring users.User's mouse clicks on image institute
At region, first, a mark point is added position is clicked, for highlighting current location, while herein for user is dynamic
State is presented a light instrument column comprising functions such as selection, movement, texts.Then, original image and current unit are obtained respectively
Width the and height values of element, also need to record the position (CL) of Current camera to indicate the position of rotation in 3-D view, obtain
Take the coordinate (x, y) or (x, y, z) for being clicked position, by data width, height, CL, and (x, y) or (x, y, z) value
Keep in it is data cached in, if user had carried out mouse action again before this mark is submitted to, covered with new value and delayed
Deposit middle legacy data.When user submits mark request to, the information of mark is stored in the buffer area of the mark point, finally, the point
The backstage that content in buffer area is submitted to together carries out data storage, and the Local hydrodynamic unit of front end content only needs to be carried from just now
Read out in caching during friendship, greatly reduce the inquiry operation of data.
It is corresponding with each image difference to be marked that web server end also sets up a unique ID value, web server end
When the associated positional information of storage mouse click event and markup information, deposited together with the corresponding ID values of image to be marked
Storage.Correspondence image can be just so found by retrieving markup information, the accuracy of Search Results is at utmost ensure that.
When certain image is retrieved in systems, such as user input term " automobile ", system retrieval service can first go to look into
The record containing " automobile " one word in image name is looked for, then goes the note containing " automobile " keyword in the word content of matching mark
Record, preferentially shows after the record duplicate removal that repetition is retrieved in two paths.
Step 3：Dynamic label placement and the mark point that mouse click event is associated and corresponding mark letter in image to be marked
Breath, the image after dynamic label placement is resent to browser end, is loaded so as to realize the lossless mark of image by canvas element dynamics
Note.
The all operations of the image labeling method of the present embodiment are to process image in web server end, and it is right to realize
The online mark of image, while not causing any destruction to original image；And the method is in web server end and browser end
Realization is interacted, with lower coupling, reusability high, can be advantageously applied in other web systems, and can realize using
Image in system is added online, is shared markup information in family；The image labeling method of the present embodiment need not install soft
Part builds the troublesome operations such as peculiar running environment, has reached enhancing Consumer's Experience, makes image labeling more easily purpose.
Fig. 4 is a kind of structural representation of image lossless labeling system embodiment two of the invention.This as shown in Figure 4 be
A kind of system, the then image lossless labeling system of the embodiment, including web corresponding with the image lossless mask method shown in Fig. 3
Server end.
Another image lossless labeling system of the invention, including web server end, the web server end includes：Figure
As acquisition module, action listener module and event response module.
(1) image receiver module, it is used to receive image to be marked and is sent to browser end.
(2) mouse click event related information receiver module, it is used to receive the mouse click thing that browser end transmission comes
The associated information of part；Each mouse click event is associated to point to be marked in image to be marked and corresponding markup information.
(3) image dynamic label placement module, it is used for the dynamic label placement in image to be marked is associated with mouse click event
Mark point and corresponding markup information, the image after dynamic label placement is resent to browser end, loaded by canvas element dynamics
So as to realize the lossless mark of image.
Further, web server end, also includes：First parsing module, it is used to parse all originals in image to be marked
Begin to mark dot position information and markup information and be sent to browser end to be loaded by canvas elements.
Data are provided to go back the existing markup information of original image, while being Dynamic Display marked content, response user obtains
The request of marked content is prepared, by it is existing mark point revert to original position, to the complex informations such as text marking only when
Mouse is just shown when moving to the position, it is to avoid image information is blocked, while make interface cleaner and tidier friendly.
Further, image to be marked is stored in high in the clouds, and the image to be marked of its memory storage is sent to web services by high in the clouds
Device end.Image to be marked is stored using high in the clouds, a large amount of local storage spaces has on the one hand been saved, on the other hand by the peace in high in the clouds
Full monitoring ensures the information security reliability of users to share.
Further, web server end, also includes：Second parsing module, its wide, height for being used to parse image to be marked
And the rotation information of image to be marked, all original mark point position when being scaled 0 is calculated according to image scaling ratio.
Markup information can so be calculated in different rotary angle (for 3-D view) and scaling (for two dimensional image) state
Under relative position, so as to be accurately positioned mark point a position；For the rotation of 3-D view, the same camera position of labeling position coordinate
Record together, render once mark point again when rotating.
Further, web server end, also includes：Memory module, it is used for when the mouse click event monitored and gather
Associated positional information is identical, then positional information and mark letter that the mouse click event for being received using last time is associated
Cease the information once to be gathered before covering.The data redundancy storage at web server end can be so reduced, so in query image
Positional information and markup information can greatly reduce the inquiry operation of data, improve search efficiency.
Further, web server end, also includes：ID value setup modules, its be used for set a unique ID value with it is every
Individual image to be marked difference is corresponding, when the associated positional information of storage mouse click event and markup information, together with waiting to mark
The note corresponding ID values of image are stored together.Correspondence image can be just so found by retrieving markup information, is at utmost ensured
The accuracy of Search Results.
All operations of the image labeling system of the present embodiment are to process image in web server end, are realized
To the online mark of image, while any destruction is not caused to original image；And the method is in web server end and browser
End interacts realization, with lower coupling, reusability high, can be advantageously applied in other web systems, and can realize
User is added, is shared markup information online to the image in system；The image labeling system of the present embodiment is without installing
Software builds the troublesome operations such as peculiar running environment, has reached enhancing Consumer's Experience, makes image labeling more easily purpose.
It should be understood by those skilled in the art that, embodiments of the invention can be provided as method, system or computer program
Product.Therefore, the present invention can be using the shape of the embodiment in terms of hardware embodiment, software implementation or combination software and hardware
Formula.And, the present invention can be used can use storage in one or more computers for wherein including computer usable program code
The form of the computer program product implemented on medium (including but not limited to magnetic disk storage and optical memory etc.).
The present invention is the flow with reference to method according to embodiments of the present invention, equipment (system) and computer program product
Figure and/or block diagram are described.It should be understood that every first-class during flow chart and/or block diagram can be realized by computer program instructions
The combination of flow and/or square frame in journey and/or square frame and flow chart and/or block diagram.These computer programs can be provided
The processor of all-purpose computer, special-purpose computer, Embedded Processor or other programmable data processing devices is instructed to produce
A raw machine so that produced for reality by the instruction of computer or the computing device of other programmable data processing devices
The device of the function of being specified in present one flow of flow chart or multiple one square frame of flow and/or block diagram or multiple square frames.
These computer program instructions may be alternatively stored in can guide computer or other programmable data processing devices with spy
In determining the computer-readable memory that mode works so that instruction of the storage in the computer-readable memory is produced and include finger
Make the manufacture of device, the command device realize in one flow of flow chart or multiple one square frame of flow and/or block diagram or
The function of being specified in multiple square frames.
These computer program instructions can be also loaded into computer or other programmable data processing devices so that in meter
Series of operation steps is performed on calculation machine or other programmable devices to produce computer implemented treatment, so as in computer or
The instruction performed on other programmable devices is provided for realizing in one flow of flow chart or multiple flows and/or block diagram one
The step of function of being specified in individual square frame or multiple square frames.
One of ordinary skill in the art will appreciate that all or part of flow in realizing above-described embodiment method, can be
The hardware of correlation is instructed to complete by computer program, described program can be stored in a computer read/write memory medium
In, the program is upon execution, it may include such as the flow of the embodiment of above-mentioned each method.Wherein, described storage medium can be magnetic
Dish, CD, read-only memory (Read-Only Memory, ROM) or random access memory (Random
AccessMemory, RAM) etc..
Although above-mentioned be described with reference to accompanying drawing to specific embodiment of the invention, not to present invention protection model
The limitation enclosed, one of ordinary skill in the art should be understood that on the basis of technical scheme those skilled in the art are not
Need the various modifications made by paying creative work or deformation still within protection scope of the present invention.
Claims (10)
1. a kind of image lossless mask method, it is characterised in that including：
Step 1：Web server end receives image to be marked and is sent to browser end；
Step 2：Browser end sets canvas units and usually loads image to be marked；
Step 3：Browser end monitors mouse click event in real time, and the information that collection is associated with mouse click event is simultaneously sent to
Web server end is stored；Each mouse click event is related to point to be marked and corresponding markup information in image to be marked
Connection；
Step 4：The web server end mark point that dynamic label placement and mouse click event are associated in image to be marked and corresponding
Markup information, the image after dynamic label placement is resent to browser end, by the loading of canvas element dynamics so as to realize image
Lossless mark.
2. a kind of image lossless mask method as claimed in claim 1, it is characterised in that in the step 1, also include：
Web server end parse in image to be marked all original mark dot position informations and markup information and be sent to browser end by
Canvas elements are loaded.
3. a kind of image lossless mask method as claimed in claim 1, it is characterised in that image to be marked is stored in high in the clouds,
The image to be marked of its memory storage is sent to web server end by high in the clouds.
4. a kind of image lossless mask method as claimed in claim 2, it is characterised in that in the step 1, web services
Device end also parses the rotation information of the image wide, high and to be marked of image to be marked, is calculated when contracting according to image scaling ratio
Put for 0 when it is all original mark point a position.
5. a kind of image lossless mask method as claimed in claim 1, it is characterised in that in the step 3, when web clothes
The positional information that the mouse click event that business device termination is received is associated is identical, then the mouse for being received using last time clicks on thing
The associated positional information of part and markup information are come the information that is once gathered before covering.
6. a kind of image lossless mask method as claimed in claim 1, it is characterised in that also treated to each at web server end
Mark image sets a unique ID value, marks point position in ID values and its corresponding image to be marked and markup information is related
Connection.
7. a kind of image lossless labeling system, it is characterised in that including web server end and browser end；
Web server end, it is configured as：Receive image to be marked and be sent to browser end；
Browser end, it is configured as：
Canvas units are set and usually load image to be marked；
Monitor mouse click event in real time, the information that is associated with mouse click event of collection is simultaneously sent to web server end and enters
Row storage；Each mouse click event is associated to point to be marked in image to be marked and corresponding markup information；
The web server end, is additionally configured to：The mark that dynamic label placement is associated with mouse click event in image to be marked
Note point and corresponding markup information, the image after dynamic label placement are resent to browser end, by the loading of canvas element dynamics so as to
Realize the lossless mark of image.
8. a kind of image lossless labeling system as claimed in claim 7, it is characterised in that web server end is additionally configured to：
Parse in image to be marked all original mark dot position informations and markup information and be sent to browser end by canvas elements
Loading；
Or image to be marked is stored in high in the clouds, the image to be marked of its memory storage is sent to web server end by high in the clouds.
9. a kind of image lossless labeling system as claimed in claim 8, it is characterised in that web server end is additionally configured to：
The rotation information of the image wide, high and to be marked of image to be marked is parsed, is calculated when being scaled 0 according to image scaling ratio
It is all original mark point a position.
10. a kind of image lossless labeling system as claimed in claim 8, it is characterised in that also treated to each at web server end
Mark image sets a unique ID value, marks point position in ID values and its corresponding image to be marked and markup information is related
Connection.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611094657.4A CN106776939A (en) | 2016-12-01 | 2016-12-01 | A kind of image lossless mask method and system |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611094657.4A CN106776939A (en) | 2016-12-01 | 2016-12-01 | A kind of image lossless mask method and system |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN106776939A true CN106776939A (en) | 2017-05-31 |
Family
ID=58883613
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201611094657.4A Pending CN106776939A (en) | 2016-12-01 | 2016-12-01 | A kind of image lossless mask method and system |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106776939A (en) |
Cited By (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108268626A (en) * | 2018-01-11 | 2018-07-10 | 中科院微电子研究所昆山分所 | The method and device of label is added, shown on a kind of HTML images |
| CN109741397A (en) * | 2019-01-04 | 2019-05-10 | 京东方科技集团股份有限公司 | Picture indicia method, apparatus, computer equipment and readable storage medium storing program for executing |
| CN109949907A (en) * | 2019-03-29 | 2019-06-28 | 西安交通大学 | Large-scale pathological image cooperation annotation method and system based on cloud |
| CN110134808A (en) * | 2019-05-22 | 2019-08-16 | 北京旷视科技有限公司 | Picture retrieval method, device, electronic equipment and storage medium |
| CN110377777A (en) * | 2019-06-29 | 2019-10-25 | 苏州浪潮智能科技有限公司 | A kind of multiple mask method of picture based on deep learning and device |
| CN111198639A (en) * | 2019-12-27 | 2020-05-26 | 深圳市优必选科技股份有限公司 | Picture marking method, device, terminal and computer storage medium |
| CN111367445A (en) * | 2020-03-31 | 2020-07-03 | 中国建设银行股份有限公司 | Image annotation method and device |
| CN112667834A (en) * | 2020-12-23 | 2021-04-16 | 深圳开立生物医疗科技股份有限公司 | Image annotation method and related device |
| CN112764642A (en) * | 2020-12-31 | 2021-05-07 | 达而观数据(成都)有限公司 | Canvas technology-based universal document labeling method and system |
| WO2021217543A1 (en) * | 2020-04-30 | 2021-11-04 | 华为技术有限公司 | Image annotation method, apparatus, device and medium |
| CN114581558A (en) * | 2022-02-25 | 2022-06-03 | 北京百度网讯科技有限公司 | Image processing method, device, equipment and storage medium |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101430677A (en) * | 2008-12-08 | 2009-05-13 | 北大方正集团有限公司 | Method and system for reserving document editing trace |
| CN101477697A (en) * | 2009-01-21 | 2009-07-08 | 施昊 | Network information inputting editor, network information inputting editing system and method |
| CN102081701A (en) * | 2009-11-30 | 2011-06-01 | 索尼公司 | Information processing apparatus, method and computer-readable medium |
| US20130129252A1 (en) * | 2011-11-08 | 2013-05-23 | Vidinoti Sa | Image annotation method and system |
| CN103425690A (en) * | 2012-05-22 | 2013-12-04 | 湖南家工场网络技术有限公司 | Picture information labeling and displaying method based on cascading style sheets |
| CN103970820A (en) * | 2014-01-23 | 2014-08-06 | 河海大学 | Method and device for visualization of Web multimedia resource open annotation data |
-
2016
- 2016-12-01 CN CN201611094657.4A patent/CN106776939A/en active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101430677A (en) * | 2008-12-08 | 2009-05-13 | 北大方正集团有限公司 | Method and system for reserving document editing trace |
| CN101477697A (en) * | 2009-01-21 | 2009-07-08 | 施昊 | Network information inputting editor, network information inputting editing system and method |
| CN102081701A (en) * | 2009-11-30 | 2011-06-01 | 索尼公司 | Information processing apparatus, method and computer-readable medium |
| US20130129252A1 (en) * | 2011-11-08 | 2013-05-23 | Vidinoti Sa | Image annotation method and system |
| CN103425690A (en) * | 2012-05-22 | 2013-12-04 | 湖南家工场网络技术有限公司 | Picture information labeling and displaying method based on cascading style sheets |
| CN103970820A (en) * | 2014-01-23 | 2014-08-06 | 河海大学 | Method and device for visualization of Web multimedia resource open annotation data |
Cited By (15)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108268626A (en) * | 2018-01-11 | 2018-07-10 | 中科院微电子研究所昆山分所 | The method and device of label is added, shown on a kind of HTML images |
| US10984570B2 (en) | 2019-01-04 | 2021-04-20 | Boe Technology Group Co., Ltd. | Picture marking method and apparatus, computer device, and computer readable storage medium |
| CN109741397A (en) * | 2019-01-04 | 2019-05-10 | 京东方科技集团股份有限公司 | Picture indicia method, apparatus, computer equipment and readable storage medium storing program for executing |
| CN109949907A (en) * | 2019-03-29 | 2019-06-28 | 西安交通大学 | Large-scale pathological image cooperation annotation method and system based on cloud |
| CN109949907B (en) * | 2019-03-29 | 2021-07-13 | 西安交通大学 | Cloud-based large pathology image collaborative annotation method and system |
| CN110134808A (en) * | 2019-05-22 | 2019-08-16 | 北京旷视科技有限公司 | Picture retrieval method, device, electronic equipment and storage medium |
| CN110134808B (en) * | 2019-05-22 | 2020-06-05 | 北京旷视科技有限公司 | Picture retrieval method and device, electronic equipment and storage medium |
| CN110377777A (en) * | 2019-06-29 | 2019-10-25 | 苏州浪潮智能科技有限公司 | A kind of multiple mask method of picture based on deep learning and device |
| CN111198639A (en) * | 2019-12-27 | 2020-05-26 | 深圳市优必选科技股份有限公司 | Picture marking method, device, terminal and computer storage medium |
| CN111367445A (en) * | 2020-03-31 | 2020-07-03 | 中国建设银行股份有限公司 | Image annotation method and device |
| CN111367445B (en) * | 2020-03-31 | 2021-07-09 | 中国建设银行股份有限公司 | Image annotation method and device |
| WO2021217543A1 (en) * | 2020-04-30 | 2021-11-04 | 华为技术有限公司 | Image annotation method, apparatus, device and medium |
| CN112667834A (en) * | 2020-12-23 | 2021-04-16 | 深圳开立生物医疗科技股份有限公司 | Image annotation method and related device |
| CN112764642A (en) * | 2020-12-31 | 2021-05-07 | 达而观数据(成都)有限公司 | Canvas technology-based universal document labeling method and system |
| CN114581558A (en) * | 2022-02-25 | 2022-06-03 | 北京百度网讯科技有限公司 | Image processing method, device, equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106776939A (en) | A kind of image lossless mask method and system | |
| US8711148B2 (en) | Method and system for generating and displaying an interactive dynamic selective view of multiply connected objects | |
| US20200073920A1 (en) | Systems and methods for remote dashboard image generation | |
| JP4382326B2 (en) | Method and apparatus for re-editing and re-distributing web documents | |
| CN104216691B (en) | A kind of method and device for creating application | |
| US8886669B2 (en) | File access via conduit application | |
| US20180365873A1 (en) | Recursive cell-based hierarchy for data visualizations | |
| US8711147B2 (en) | Method and system for generating and displaying an interactive dynamic graph view of multiply connected objects | |
| CN105260170B (en) | A kind of accident deducing manoeuver method and system based on case | |
| CN102411614A (en) | Display Of Image Search Results | |
| CN102306174A (en) | Method and equipment for interacting with user based on web page elements | |
| CN103618773B (en) | Display method, device and system for thermodynamic diagrams | |
| CN103559194B (en) | A kind of searching method, server, system | |
| CN114357345A (en) | Picture processing method and device, electronic equipment and computer readable storage medium | |
| CN107247591A (en) | A kind of big data displaying interface alternation method based on map | |
| CN110506267A (en) | The rendering of digital assembly background | |
| CN102982088B (en) | It is a kind of for providing user the method for the feedback information on target pages | |
| CN107357810A (en) | A kind of method and system for being used to export special topic landing page | |
| US10210001B2 (en) | Automatic execution of objects in a user interface | |
| CN114647409A (en) | Large-screen visualization application creation platform, method, computing device and storage medium | |
| CN114895891A (en) | Graphic software processing method and device, electronic equipment and storage medium | |
| CN110399063B (en) | Method and device for viewing page element attributes | |
| CN103970763A (en) | Three-dimensional image displaying system and method | |
| US20210271728A1 (en) | Replaying user activity by capturing content and rebuilding the webpage at each web event | |
| US8413062B1 (en) | Method and system for accessing interface design elements via a wireframe mock-up |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20170531 |
|
| RJ01 | Rejection of invention patent application after publication |