Picture method of cutting out and device
Technical field
The present invention relates to computer realms, in particular to a kind of picture method of cutting out and device.
Background technology
Currently, in the prior art, the picture method of cutting out of generally use is:Crop box is established on picture, and is dragged
Crop box selection cuts object, and further, the size for changing crop box determines the position range cut.However, in above-mentioned cutting
In the process, since the position range of cutting is that user manually controls adjustment, so the picture after cutting can not be accurately controlled
The ratio of width to height so that it is easy to appear the picture problem on deformation caused by adjustment is improper when cutting picture, to influence to cut
The normal display of picture afterwards.
For above-mentioned problem, currently no effective solution has been proposed.
Invention content
An embodiment of the present invention provides a kind of picture method of cutting out and devices, at least to solve due to using existing picture
The yielding technical problem of picture caused by method of cutting out.
One side according to the ... of the embodiment of the present invention provides a kind of picture method of cutting out, including:According to target area
The cutting parameter of the clipping region to match establishes crop box, wherein above-mentioned target area is used to show the target figure after cutting
Piece, the cutting parameter of above-mentioned clipping region are used to indicate the size of above-mentioned crop box;According to the original scale tune of picture to be cut
The relativeness of whole above-mentioned picture to be cut and above-mentioned crop box, to build cutting object;Above-mentioned cutting object is cut to
State Target Photo.
Optionally, above-mentioned picture to be cut and above-mentioned crop box are adjusted in the above-mentioned original scale according to picture to be cut
Relativeness, before building cutting object, to further include:Obtain the original size of above-mentioned picture to be cut;It positions above-mentioned to be cut
The initial position of picture is cut, the location information of above-mentioned initial position includes the coordinate information of above-mentioned picture to be cut.
Optionally, after the above-mentioned initial position for positioning above-mentioned picture to be cut, further include:It is aobvious in above-mentioned initial position
Show the identical above-mentioned picture to be cut of two bound, wherein the first overlaying graphics to be cut in above-mentioned picture to be cut
It is placed on the top of the second picture to be cut in above-mentioned picture to be cut;The indication range of more above-mentioned picture to be cut with it is upper
State the size of the coverage area of crop box;If the indication range of above-mentioned picture to be cut is more than the coverage area of above-mentioned crop box,
Above-mentioned picture to be cut directly then is dragged to above-mentioned crop box, so that above-mentioned crop box and above-mentioned overlaying graphics to be cut;It will be upper
It states the part in the first picture to be cut outside above-mentioned crop box to hide, and adjusts the transparency of the above-mentioned second picture to be cut,
So that the above-mentioned first picture to be cut in above-mentioned crop box constitutes one with the above-mentioned second picture to be cut outside above-mentioned crop box
Zhang Shangshu pictures to be cut.
Optionally, after the above-mentioned initial position for positioning above-mentioned picture to be cut, further include:If above-mentioned picture to be cut
Indication range be less than or equal to above-mentioned crop box coverage area, then adjust above-mentioned picture to be cut and fill up in above-mentioned crop box
Above-mentioned clipping region.
Optionally, the above-mentioned original scale according to picture to be cut adjusts the phase of above-mentioned picture to be cut and above-mentioned crop box
To relationship, cutting object with structure includes:Above-mentioned picture to be cut is moved to target location according to the first control instruction, wherein
Above-mentioned includes above-mentioned Target Photo when cutting picture in above-mentioned target location, in above-mentioned crop box;And/or according to the second control
Instruction controls above-mentioned picture to be cut according to original scale, to build above-mentioned cutting object.
Optionally, above-mentioned to include according to the above-mentioned picture to be cut of the first control instruction movement to target location:By above-mentioned mesh
Mark on a map the center of piece is moved to the center of above-mentioned crop box.
Optionally, above-mentioned to include according to original scale according to the above-mentioned picture to be cut of the second control instruction control:With
The center of above-mentioned crop box is basic point, scales left upper apex and above-mentioned crop box of the above-mentioned picture to be cut to above-mentioned Target Photo
Left upper apex overlap.
Optionally, include at least one of to the zoom operations of above-mentioned picture to be cut:Rolling pulley, adjustment slide into
Spend item;Moving operation to above-mentioned picture to be cut includes:Drag mouse.
Another aspect according to the ... of the embodiment of the present invention additionally provides a kind of picture Scissoring device, including:Unit is established, is used
Cutting parameter in the clipping region that basis matches with target area establishes crop box, wherein above-mentioned target area is for showing
Show that the Target Photo after cutting, the cutting parameter of above-mentioned clipping region are used to indicate the size of above-mentioned crop box;Construction unit is used
In the relativeness for adjusting above-mentioned picture to be cut and above-mentioned crop box according to the original scale of picture to be cut, cut with building
Object;Unit is cut, for above-mentioned cutting object to be cut to above-mentioned Target Photo.
Optionally, above-mentioned apparatus includes:Acquiring unit, for being adjusted in the above-mentioned original scale according to picture to be cut
The relativeness for stating picture to be cut and above-mentioned crop box before cutting object with structure, obtains the original of above-mentioned picture to be cut
Beginning size;The location information of positioning unit, the initial position for positioning above-mentioned picture to be cut, above-mentioned initial position includes upper
State the coordinate information of picture to be cut.
Optionally, above-mentioned apparatus further includes:Display unit, in the above-mentioned initial position for positioning above-mentioned picture to be cut
Later, the two identical above-mentioned pictures to be cut bound are shown in above-mentioned initial position, wherein in above-mentioned picture to be cut
The first overlaying graphics to be cut be placed on the top of the second picture to be cut in above-mentioned picture to be cut;Comparing unit is used
In the size of the coverage area of the indication range and above-mentioned crop box of more above-mentioned picture to be cut;Tug unit is used for
It states when the indication range for cutting picture is more than the coverage area of above-mentioned crop box, above-mentioned picture to be cut directly is dragged to above-mentioned
Crop box, so that above-mentioned crop box and above-mentioned overlaying graphics to be cut;The first adjustment unit, for waiting for cutting figure by above-mentioned first
Part in piece outside above-mentioned crop box hides, and adjusts the transparency of the above-mentioned second picture to be cut, so that above-mentioned crop box
Interior the above-mentioned first picture to be cut with the above-mentioned second picture composition one to be cut outside above-mentioned crop box is above-mentioned waits for cutting figure
Piece.
Optionally, above-mentioned apparatus further includes:Second adjustment unit, for the display in above-mentioned picture to be cut
Range is less than or equal to above-mentioned sanction with after the size of the coverage area of above-mentioned crop box in the indication range of above-mentioned picture to be cut
When cutting the coverage area of frame, adjusts above-mentioned picture to be cut and fill up the above-mentioned clipping region in above-mentioned crop box.
Optionally, above-mentioned construction unit includes:Mobile module, for waiting for cutting figure according to the movement of the first control instruction is above-mentioned
Piece is to target location, wherein and it is above-mentioned when cutting picture in above-mentioned target location, include above-mentioned target figure in above-mentioned crop box
Piece;And/or Zoom module, for controlling above-mentioned picture to be cut according to original scale, with structure according to the second control instruction
Build above-mentioned cutting object.
Optionally, above-mentioned mobile module includes:Mobile submodule, for the center of above-mentioned Target Photo to be moved to
The center of above-mentioned crop box.
Optionally, above-mentioned Zoom module includes:Submodule is scaled, for using the center of above-mentioned crop box as basic point, scaling
The left upper apex of above-mentioned picture to be cut to above-mentioned Target Photo is overlapped with the left upper apex of above-mentioned crop box.
In embodiments of the present invention, it according to the cutting parameter of the clipping region to match with target area, establishes and cuts
The corresponding crop box in region is adjusted in the case where remaining the ratio of width to height of crop box according to picture original scale to be cut
The relativeness of picture and crop box to be cut further, will cut object and be cut to and target area to build cutting object
Required Target Photo cuts the figure caused by picture manually adjusting the size of crop box in the prior art to overcome
The problem of piece metamorphopsic distortion;In addition, being cut by adjusting picture to be cut, it is thus also avoided that due to manually adjusting Crop Area
The problem of clipping region inaccuracy caused by domain to realize the accuracy for improving and locally cutting, and also simplifies cutting
Operation.
Description of the drawings
Attached drawing described herein is used to provide further understanding of the present invention, and is constituted part of this application, this hair
Bright illustrative embodiments and their description are not constituted improper limitations of the present invention for explaining the present invention.In the accompanying drawings:
Fig. 1 is a kind of flow chart of optional picture method of cutting out according to the ... of the embodiment of the present invention;
Fig. 2 is a kind of schematic diagram of optional picture method of cutting out according to the ... of the embodiment of the present invention;
Fig. 3 is the schematic diagram of another optional picture method of cutting out according to the ... of the embodiment of the present invention;
Fig. 4 is the schematic diagram of another optional picture method of cutting out according to the ... of the embodiment of the present invention;And
Fig. 5 is a kind of schematic diagram of optional picture Scissoring device according to the ... of the embodiment of the present invention.
Specific implementation mode
In order to enable those skilled in the art to better understand the solution of the present invention, below in conjunction in the embodiment of the present invention
Attached drawing, technical scheme in the embodiment of the invention is clearly and completely described, it is clear that described embodiment is only
The embodiment of a part of the invention, instead of all the embodiments.Based on the embodiments of the present invention, ordinary skill people
The every other embodiment that member is obtained without making creative work should all belong to the model that the present invention protects
It encloses.
It should be noted that term " first " in description and claims of this specification and above-mentioned attached drawing, "
Two " etc. be for distinguishing similar object, without being used to describe specific sequence or precedence.It should be appreciated that using in this way
Data can be interchanged in the appropriate case, so as to the embodiment of the present invention described herein can in addition to illustrating herein or
Sequence other than those of description is implemented.In addition, term " comprising " and " having " and their any deformation, it is intended that cover
It includes to be not necessarily limited to for example, containing the process of series of steps or unit, method, system, product or equipment to cover non-exclusive
Those of clearly list step or unit, but may include not listing clearly or for these processes, method, product
Or the other steps or unit that equipment is intrinsic.
Embodiment 1
According to embodiments of the present invention, a kind of embodiment of picture method of cutting out is provided, it should be noted that in attached drawing
The step of flow illustrates can execute in the computer system of such as a group of computer-executable instructions, although also,
Logical order is shown in flow chart, but in some cases, it can be to execute shown different from sequence herein or retouch
The step of stating.
Fig. 1 is picture method of cutting out according to the ... of the embodiment of the present invention, as shown in Figure 1, this method comprises the following steps:
S102 establishes crop box, wherein target area according to the cutting parameter of the clipping region to match with target area
For showing that the Target Photo after cutting, the cutting parameter of clipping region are used to indicate the size of crop box;
S104 adjusts the relativeness of picture and crop box to be cut according to the original scale of picture to be cut, with structure
Cut object;
S106 will cut object and be cut to Target Photo.
Optionally, in the present embodiment, above-mentioned picture method of cutting out can be, but not limited to the picture to be cut on webpage
During being cut, according to the cutting parameter of the clipping region to match with target area, width, height such as clipping region
Degree establishes crop box corresponding with clipping region, in the case where remaining the ratio of width to height of crop box, according to picture to be cut
Original scale adjusts the relativeness of picture and crop box to be cut, and to build cutting object, further, will cut object and cuts
For with the Target Photo needed for target area, to avoid the problem that cut after Target Photo deform, and then guarantee sanction
The normal display of picture after cutting.For example, some webpage needs user's upload user head portrait, then the sanction of default size can be utilized
It cuts frame to cut the picture of upload, to obtain finally meeting the head portrait of actual needs.Above-mentioned is only a kind of example, this implementation
Any restriction is not done to this in example.
That is, by clipping region is set as the region consistent with the target area at actual use, protected always
In the case of the size for holding clipping region, by adjusting picture to be cut in clipping region according to the original scale of picture to be cut
Picture to be cut is cut to Target Photo needed for target area, to overcome the prior art by interior display content to realize
In manually adjust the size of crop box to cut the picture metamorphopsic distortion caused by picture the problem of;In addition, by adjusting
Picture to be cut is cut, it is thus also avoided that caused by the manually adjusting clipping region problem of clipping region inaccuracy,
To realize the accuracy for improving and locally cutting, and also simplify trimming operation.
Optionally, in the present embodiment, above-mentioned cutting parameter can be, but not limited to include following one:The width of clipping region
Degree and height, the ratio of width to height of clipping region.Wherein, above-mentioned cutting parameter matches with target area, consequently facilitating ensureing to cut out
Cut in the case of cutting ratio, to avoid wait cut picture cut after deform the problem of.
Optionally, in the present embodiment, the above-mentioned original scale according to picture to be cut adjusts the operation of picture to be cut
Including at least one of:Moving operation, zoom operations.Wherein, treat cut picture zoom operations include it is following at least it
One:Rolling pulley, adjustment sliding progress bar;Treat cut picture moving operation include:Drag mouse.For example, such as Fig. 2 institutes
Show, clipping region 202 corresponds to crop box 204, and sliding progress bar is arranged outside crop box 204, by sliding above-mentioned sliding progress
Item may be implemented to treat the zoom operations for cutting picture, specifically following example be combined to illustrate, the initial value for sliding progress bar is 0
When, that is, the size state that picture initialization load to be cut is come in, the overall width of sliding area is where sliding progress bar
100%, picture width to be cut be 100px, i.e., 1:1, then when 1px is moved in the position for sliding progress bar, will to wait for
Cut picture amplification 1%.
It should be noted that in the present embodiment, above-mentioned zoom operations include but not limited to following at least one:The first
It is the width that picture to be cut is set, highly by browser adaptive change;It is for second the original scale by picture to be cut
To reset the width and height of picture to be cut.
Optionally, in the present embodiment, can also include but not limited to following steps after establishing crop box:
S1 binds webpage and mouse action, e.g., mouse moving event, mouse down event, so as to leave work in mouse
It can still continue to treat behind area and cut picture and dragged or scaled, and avoid only executing in the corresponding clipping region of crop box
The adjustment for cutting picture is treated, to expand opereating specification.
It should be noted that above-mentioned workspace is used to lock position of the clipping region on webpage, to avoid waiting cutting
Picture is excessive and takes whole webpages, while avoiding picture to be cut too small and influencing page layout.That is, in this reality
It applies in example, crop box is established according to the cutting parameter of clipping region by being realized in above-mentioned workspace, treat and cut picture progress
It cuts, to obtain the process of Target Photo.
Optionally, in the present embodiment, picture and crop box to be cut are being adjusted according to the original scale of picture to be cut
Relativeness, with structure cut object before, further include:
S1 initializes the page, obtains the original size of picture to be cut;
S2 positions the initial position of picture to be cut.
That is, obtaining the original image information of picture to be cut by initialization.
Optionally, in the present embodiment, above-mentioned when cutting picture in initial position load, it needs to judge picture to be cut
Indication range and crop box coverage area magnitude relationship;If judging, the indication range of picture to be cut is more than crop box
Coverage area, then can picture to be cut directly be dragged to crop box, so that picture to be cut is Chong Die with crop box;If judging
The indication range for going out picture to be cut is less than or equal to the coverage area of crop box, then needs picture to be cut filling up above-mentioned cutting
Frame.To avoid the problem that causing to be left white in crop box since picture to be cut is too small, and then cutting picture is treated in simplification
Cutting, cut the effect that is locally cut of picture to improve to treat.
Optionally, in the present embodiment, above-mentioned cutting object includes two identical pictures to be cut bound,
In, first overlaying graphics to be cut is placed on the top of second picture to be cut;It is being cut in first picture to be cut
The part of outer frame is hidden, the difference of the transparency of second picture to be cut and first picture to be cut, so that crop box
First interior picture to be cut constitutes a picture to be cut with second picture to be cut outside crop box.For example, such as Fig. 3
Shown, crop box words spoken by an actor from offstage bottom is divided into the content in first picture to be cut, the outer grey bottom of crop box be divided into second it is to be cut
Cut the content in picture.
It is established according to the cutting parameter of the clipping region to match with target area by embodiment provided by the present application
Crop box corresponding with clipping region, in the case where remaining the ratio of width to height of crop box, according to the original ratio of picture to be cut
Example adjusts the relativeness of picture and crop box to be cut, and to build cutting object, further, cutting object is cut to and mesh
The Target Photo needed for region is marked, to overcome in the prior art since the size for manually adjusting crop box is led to cut picture
The problem of picture metamorphopsic distortion of cause;In addition, being cut by adjusting picture to be cut, it is thus also avoided that due to manually adjusting
The problem of clipping region inaccuracy caused by clipping region to realize the accuracy for improving and locally cutting, and simplifies
Trimming operation.
As a kind of optional scheme, picture and crop box to be cut are being adjusted according to the original scale of picture to be cut
Relativeness, before building cutting object, to further include:
S1 obtains the original size of picture to be cut;
S2 positions the initial position of picture to be cut, and the location information of initial position includes the coordinate letter of picture to be cut
Breath.
Optionally, in the present embodiment, above-mentioned original size can include but is not limited to:The width and height of picture to be cut
It spends, the ratio of width to height of picture to be cut.Wherein, above-mentioned original size can be, but not limited to be obtained by javascript.
Optionally, in the present embodiment, the location information of above-mentioned initial position includes the coordinate information of picture to be cut, example
Such as, the transverse and longitudinal coordinate information in the upper left corner.The absolute fix for cutting picture is treated to realize.
It is specifically illustrated in conjunction with following example, it is assumed that the ID attributes of a div are obtained by javascript (i.e. js)
Value is imgtable;The ID attribute values of one picture are img;Then the picture that ID attribute values are img is loaded into ID attribute values
Further original size size is obtained, div layers of width and picture developed width can be obtained for the div layers of imgtable,
Then the adaptive adjustment to picture is realized, to obtain the original size of picture.
Further include after the initial position for positioning picture to be cut as a kind of optional scheme:
S1 shows the two identical pictures to be cut bound in initial position, wherein first in picture to be cut
The top for the second picture to be cut that overlaying graphics to be cut are placed in picture to be cut;
S2 compares the size of the indication range of picture to be cut and the coverage area of crop box;
Picture to be cut directly is dragged to by S3 if the indication range of picture to be cut is more than the coverage area of crop box
Crop box, so that crop box and overlaying graphics to be cut;
S4 hides the part in the first picture to be cut outside crop box, and adjusts the transparent of the second picture to be cut
Degree, so that the first picture to be cut in crop box constitutes a picture to be cut with the second picture to be cut outside crop box.
Optionally, in the present embodiment, in order to make the in crop box first picture to be cut be waited for second outside crop box
It cuts picture and constitutes a picture to be cut, need two pictures in div layers carrying out absolute fix in the present embodiment, from
And realize when treat cut picture dragged or scaled when, the first picture to be cut and the second picture to be cut can be kept
Absolute synchronization.Wherein it is possible to but be not limited by pattern layout and the above-mentioned absolute fix of pattern control realization.
It specifically combines and is illustrated shown in Fig. 3, in initialization procedure, two got are shown in above-mentioned initial position
Picture to be cut, compares the size of the indication range of picture to be cut and the coverage area of crop box, as shown in figure 3, waiting cutting
The indication range of picture is more than the coverage area of crop box, then the portion by the be located above first picture to be cut outside crop box
Divide and hide, changes the transparency of underlying second picture to be cut, so that the first picture to be cut and second waits for cutting figure
Piece constitutes a picture to be cut, and the results are shown in Figure 3.Wherein, the above-mentioned first picture to be cut and the second picture to be cut be
Bind (i.e. absolute fix), thus, to first in crop box when cutting picture be adjusted when, as Fig. 4 treats cutting figure
Piece zooms in and out adjustment, then the first picture to be cut and the second picture to be cut will realize absolute synchronization scaling (or mobile), Fig. 4
Middle bold box is crop box, is picture to be cut in single-line box, shade is the content in the Target Photo to be cut.
It should be noted that the above process is realized by 3 layers, and the translucent picture of the bottom, the portion of middle layer
Divide the crop box of opaque clear picture and top layer.
Further, it when the indication range for cutting picture is more than the coverage area of crop box, is calculated according to following formula
Zoom factor K, so that picture is adjusted according to zoom factor K.
K=(imgHeight-divHeight)/imgHeight,
Wherein, imgHeight is picture height to be cut, and divHeight is clipping region (i.e. crop box) height.Also
It is to say, reduces picture height to imgHeight=divHeight according to zoom factor K, reduce picture width (i.e. imgWidth)
To imgWidth* (1-K), and picture initial position is (0,0).
By embodiment provided by the present application, the identical picture to be cut bound by using two constitutes one and waits for
Picture is cut, realizes the synchronous adjustment to two pictures to be cut, further, avoids cutting the picture deformation caused by picture and asks
Topic.
As a kind of optional scheme, after the initial position for positioning picture to be cut, further include:
S1 adjusts picture to be cut and fills out if the indication range of picture to be cut is less than or equal to the coverage area of crop box
Clipping region in full crop box.
It should be noted that when cutting picture is cut, such as still using the prior art common to smaller
The mode of crop box is adjusted come if cutting, it is necessary to constantly reduce crop box, not utilize trimming operation in this way, further, no
The disconnected process reduced easilys lead to reduce the accuracy cut.
Further, it when the indication range for cutting picture is more than the coverage area of crop box, is calculated according to following formula
Zoom factor K, so that picture is adjusted according to zoom factor K.
K=(divHeight-imgHeight)/divHeight,
Wherein, imgHeight is picture height to be cut, and divHeight is clipping region (i.e. crop box) height.Also
It is to say, according to zoom factor K amplification pictures height to imgHeight=imgHeight+divHeight*K, amplification picture width
(i.e. imgWidth) is to imgWidth+divWidth*K, and picture initial position is (0,0).
By embodiment provided by the present application, by being less than or equal to crop box in the indication range for judging picture to be cut
Coverage area when, picture to be cut is filled up to the mode of the clipping region in crop box, to avoid waiting cutting to smaller
Picture carries out the relatively low problem of the cutting accuracy being susceptible to when part is cut.
As a kind of optional scheme, the phase of picture to be cut and crop box is adjusted according to the original scale of picture to be cut
To relationship, cutting object with structure includes:
S1 moves picture to be cut to target location, wherein picture to be cut is in target location according to the first control instruction
When, interior crop box includes Target Photo;And/or
S2 controls picture to be cut according to original scale, to build cutting object according to the second control instruction.
It should be noted that in the present embodiment, above-mentioned steps S1 can be exchanged with the execution of step S2 sequence, that is, first
It treats cutting picture to zoom in and out, then treats cutting picture and moved, to build cutting object, this is not done in the present embodiment
It limits.
Optionally, in the present embodiment, it can be, but not limited to the original size according to picture to be cut, picture to be cut connects
Minimum widith, the sliding progress bar of nearly crop box are opposite with respect to picture to be cut before the displacement percentage of sliding area, scaling to be cut out
The size for cutting picture to be cut before the absolute position of frame, scaling, is calculated the variable quantity of picture size to be cut, waits for cutting figure
The amount of movement in the piece upper left corner.
It is specific that the mobile adjustment treated and cut picture is illustrated in conjunction with following example:
S1 will obtain a mobile object (picture i.e. to be cut) first in initialization program;
S2, the coordinate of record mouse relative movement object, that is, the abscissa parameter of record cursor of mouse relative movement object
With ordinate parameter;
S3, is arranged two event object functions for adding removal event, i.e., by be arranged mouse down event function and
Mouse decontrols event functions.Wherein, the position of mobile object is absolute fix.
S4 is tied to beginning mobile process and is chosen in (i.e. mousedown) event to mobile object, that is,
It says, when detecting that mouse pins mobile object, beginning mobile process will be triggered, and record the seat of mouse relative movement object
Mark;
Mobile process and stopping mobile process being tied to mobile (i.e. mousemove) and release (i.e. by S5 respectively
Mouseup) event, it should be noted that being tied to window elements (i.e. document) just can ensure event in entire window
In document all effectively, it is easy to appear the discrepancies caused by movement is too fast if being only bound to mobile object.
S6 will trigger mobile process when mouse moves on window elements document.Pass through the current seat of mouse
The difference of the opposite coordinate value of mouse when scale value is with starting mobile, to obtain position and the size after mobile object movement, wherein
Above-mentioned mobile object is the daughter element of window elements document;
S7 just touches stopping mobile process, to terminate to move after finally decontroling mouse.
Specific illustrated in conjunction with following example treats the scaling adjustment for cutting picture:
S1, initialization scale objects (picture i.e. to be cut);
S2 obtains scale objects central symmetry axis intersecting point coordinate, i.e. centre coordinate;
S3, setting mouse roller scale, setting zoom factor (ratio for amplifying when scrolling up and down and reducing), in order to allow
The horizontal coordinate at scale objects center remains unchanged, and scaling ratio is arranged generally according to the original the ratio of width to height of picture;
S4, setting start to scale program for the parameter that scaling program _ fun and scaling need is arranged, mouse are finally arranged
Mobile (i.e. the mousemove of rolling pulley) event triggering scaling program zooms in and out, and discharges and is executed in (i.e. mouseup) event
The stopping for cancelling scaling scales program;
S5, the task of setting scaling program are to execute the pattern after scaling program _ fun is arranged with setting, pass through scaling pair
As Pictures location picture size before picture actual size after centre coordinate, scaling and scaling, to learn Pictures location after scaling
And size.
By embodiment provided by the present application, zoom operations and/or moving operation are executed by adjusting picture to be cut, with
Structure cuts object, to realize the accurate cutting to cutting object, to realize the effect for improving the accuracy locally cut, into
And overcome the problems, such as to cut the picture metamorphopsic distortion caused by picture manually adjusting the size of crop box in the prior art.
As a kind of optional scheme, moving picture to be cut to target location according to the first control instruction includes:
The center of Target Photo is moved to the center of crop box by S1.
Optionally, in the present embodiment, the coordinate of the center of above-mentioned Target Photo can be, but not limited to relative to a left side
The coordinate of upper angular vertex is arranged.Optionally, in the present embodiment, the center of crop box with but be not limited to the width of crop box
Degree and height respectively take half.
Specifically illustrated in conjunction with following example, by mouse coordinates before record mobile (dragging), move after mouse coordinates,
The offset that picture level direction and vertical direction can be calculated, further according to Pictures location before dragging, you can calculate picture
Position (coordinate value relative to the upper left corner) after dragging.
As a kind of optional scheme, picture to be cut is controlled according to original scale packet according to the second control instruction
It includes:
S1 scales picture to be cut to the left upper apex and crop box of Target Photo using the center of crop box as basic point
Left upper apex overlaps.
It is specifically illustrated in conjunction with following example, by recording mouse roller scaling, obtains the scaling treated and cut picture
Factor K further calculates the position (coordinate value relative to the upper left corner) of the picture to be cut after scaling according to zoom factor
And size.
Embodiment 2
According to embodiments of the present invention, a kind of embodiment of picture Scissoring device is provided, as shown in figure 5, the device includes:
1) unit 502 is established, for establishing crop box according to the cutting parameter of the clipping region to match with target area,
Wherein, target area is used to show that the Target Photo after cutting, the cutting parameter of clipping region to be used to indicate the size of crop box;
2) construction unit 504, the phase for adjusting picture to be cut and crop box according to the original scale of picture to be cut
To relationship, to build cutting object;
3) unit 506 is cut, Target Photo is cut to for object will to be cut.
Optionally, in the present embodiment, above-mentioned picture Scissoring device can be, but not limited to the picture to be cut on webpage
During being cut, according to the cutting parameter of the clipping region to match with target area, width, height such as clipping region
Degree establishes crop box corresponding with clipping region, in the case where remaining the ratio of width to height of crop box, according to picture to be cut
Original scale adjusts the relativeness of picture and crop box to be cut, and to build cutting object, further, will cut object and cuts
For with the Target Photo needed for target area, to avoid the problem that cut after Target Photo deform, and then guarantee sanction
The normal display of picture after cutting.For example, some webpage needs user's upload user head portrait, then the sanction of default size can be utilized
It cuts frame to cut the picture of upload, to obtain finally meeting the head portrait of actual needs.Above-mentioned is only a kind of example, this implementation
Any restriction is not done to this in example.
That is, by clipping region is set as the region consistent with the target area at actual use, protected always
In the case of the size for holding clipping region, by adjusting picture to be cut in clipping region according to the original scale of picture to be cut
Picture to be cut is cut to Target Photo needed for target area, to overcome the prior art by interior display content to realize
In manually adjust the size of crop box to cut the picture metamorphopsic distortion caused by picture the problem of;In addition, by adjusting
Picture to be cut is cut, it is thus also avoided that caused by the manually adjusting clipping region problem of clipping region inaccuracy,
To realize the accuracy for improving and locally cutting, and also simplify trimming operation.
Optionally, in the present embodiment, above-mentioned cutting parameter can be, but not limited to include following one:The width of clipping region
Degree and height, the ratio of width to height of clipping region.Wherein, above-mentioned cutting parameter matches with target area, consequently facilitating ensureing to cut out
Cut in the case of cutting ratio, to avoid wait cut picture cut after deform the problem of.
Optionally, in the present embodiment, the above-mentioned original scale according to picture to be cut adjusts the operation of picture to be cut
Including at least one of:Moving operation, zoom operations.Wherein, treat cut picture zoom operations include it is following at least it
One:Rolling pulley, adjustment sliding progress bar;Treat cut picture moving operation include:Drag mouse.For example, such as Fig. 2 institutes
Show, clipping region 202 corresponds to crop box 204, and sliding progress bar is arranged outside crop box 204, by sliding above-mentioned sliding progress
Item may be implemented to treat the zoom operations for cutting picture, specifically following example be combined to illustrate, the initial value for sliding progress bar is 0
When, that is, the size state that picture initialization load to be cut is come in, the overall width of sliding area is where sliding progress bar
100%, picture width to be cut be 100px, i.e., 1:1, then when 1px is moved in the position for sliding progress bar, will to wait for
Cut picture amplification 1%.
It should be noted that in the present embodiment, above-mentioned zoom operations include but not limited to following at least one:The first
It is the width that picture to be cut is set, highly by browser adaptive change;It is for second the original scale by picture to be cut
To reset the width and height of picture to be cut.
Optionally, in the present embodiment, after establishing unit 502 and establishing crop box, can also include but not limited to:
1), binding unit, for binding webpage and mouse action, e.g., mouse moving event, mouse down event, so that
It can still continue to treat after mouse leaves workspace and cut picture and dragged or scaled, and avoid only corresponding in crop box
The adjustment treated and cut picture is executed in clipping region, to expand opereating specification.
It should be noted that above-mentioned workspace is used to lock position of the clipping region on webpage, to avoid waiting cutting
Picture is excessive and takes whole webpages, while avoiding picture to be cut too small and influencing page layout.That is, in this reality
It applies in example, crop box is established according to the cutting parameter of clipping region by being realized in above-mentioned workspace, treat and cut picture progress
It cuts, to obtain the process of Target Photo.
Optionally, in the present embodiment, picture and crop box to be cut are being adjusted according to the original scale of picture to be cut
Relativeness, with structure cut object before, further include:
1) acquiring unit, in the initialization page, obtaining the original size of picture to be cut;
2) positioning unit, the initial position for positioning picture to be cut.
That is, obtaining the original image information of picture to be cut by initialization.
Optionally, in the present embodiment, above-mentioned when cutting picture in initial position load, it needs to judge picture to be cut
Indication range and crop box coverage area magnitude relationship;If judging, the indication range of picture to be cut is more than crop box
Coverage area, then can picture to be cut directly be dragged to crop box, so that picture to be cut is Chong Die with crop box;If judging
The indication range for going out picture to be cut is less than or equal to the coverage area of crop box, then needs picture to be cut filling up above-mentioned cutting
Frame.To avoid the problem that causing to be left white in crop box since picture to be cut is too small, and then cutting picture is treated in simplification
Cutting, cut the effect that is locally cut of picture to improve to treat.
Optionally, in the present embodiment, above-mentioned cutting object includes two identical pictures to be cut bound,
In, first overlaying graphics to be cut is placed on the top of second picture to be cut;It is being cut in first picture to be cut
The part of outer frame is hidden, the difference of the transparency of second picture to be cut and first picture to be cut, so that crop box
First interior picture to be cut constitutes a picture to be cut with second picture to be cut outside crop box.For example, such as Fig. 3
Shown, crop box words spoken by an actor from offstage bottom is divided into the content in first picture to be cut, the outer grey bottom of crop box be divided into second it is to be cut
Cut the content in picture.
It is established according to the cutting parameter of the clipping region to match with target area by embodiment provided by the present application
Crop box corresponding with clipping region, in the case where remaining the ratio of width to height of crop box, according to the original ratio of picture to be cut
Example adjusts the relativeness of picture and crop box to be cut, and to build cutting object, further, cutting object is cut to and mesh
The Target Photo needed for region is marked, to overcome in the prior art since the size for manually adjusting crop box is led to cut picture
The problem of picture metamorphopsic distortion of cause;In addition, being cut by adjusting picture to be cut, it is thus also avoided that due to manually adjusting
The problem of clipping region inaccuracy caused by clipping region to realize the accuracy for improving and locally cutting, and simplifies
Trimming operation.
As a kind of optional scheme, above-mentioned apparatus further includes:
1) acquiring unit, for adjusting the opposite of picture and crop box to be cut according to the original scale of picture to be cut
Relationship obtains the original size of picture to be cut before cutting object with structure;
2) positioning unit, the initial position for positioning picture to be cut, the location information of initial position include waiting cutting
The coordinate information of picture.
Optionally, in the present embodiment, above-mentioned original size can include but is not limited to:The width and height of picture to be cut
It spends, the ratio of width to height of picture to be cut.Wherein, above-mentioned original size can be, but not limited to be obtained by javascript.
Optionally, in the present embodiment, the location information of above-mentioned initial position includes the coordinate information of picture to be cut, example
Such as, the transverse and longitudinal coordinate information in the upper left corner.The absolute fix for cutting picture is treated to realize.
It is specifically illustrated in conjunction with following example, it is assumed that the ID attributes of a div are obtained by javascript (i.e. js)
Value is imgtable;The ID attribute values of one picture are img;Then the picture that ID attribute values are img is loaded into ID attribute values
Further original size size is obtained, div layers of width and picture developed width can be obtained for the div layers of imgtable,
Then the adaptive adjustment to picture is realized, to obtain the original size of picture.
As a kind of optional scheme, above-mentioned apparatus further includes:
1) display unit is shown in initial position and has been bound for after the initial position for positioning picture to be cut
Two identical pictures to be cut, wherein the first overlaying graphics to be cut in picture to be cut are placed in picture to be cut
The second picture to be cut top;
2) comparing unit, the size of the coverage area of indication range and crop box for comparing picture to be cut;
3) tug unit, for when the indication range for cutting picture is more than the coverage area of crop box, will wait cutting
Picture is directly dragged to crop box, so that crop box and overlaying graphics to be cut;
4) the first adjustment unit for hiding the part in the first picture to be cut outside crop box, and adjusts second
The transparency of picture to be cut, so that the first picture to be cut in crop box is constituted with the second picture to be cut outside crop box
One picture to be cut.
Optionally, in the present embodiment, in order to make the in crop box first picture to be cut be waited for second outside crop box
It cuts picture and constitutes a picture to be cut, need two pictures in div layers carrying out absolute fix in the present embodiment, from
And realize when treat cut picture dragged or scaled when, the first picture to be cut and the second picture to be cut can be kept
Absolute synchronization.Wherein it is possible to but be not limited by pattern layout and the above-mentioned absolute fix of pattern control realization.
It specifically combines and is illustrated shown in Fig. 3, in initialization procedure, two got are shown in above-mentioned initial position
Picture to be cut, compares the size of the indication range of picture to be cut and the coverage area of crop box, as shown in figure 3, waiting cutting
The indication range of picture is more than the coverage area of crop box, then the portion by the be located above first picture to be cut outside crop box
Divide and hide, changes the transparency of underlying second picture to be cut, so that the first picture to be cut and second waits for cutting figure
Piece constitutes a picture to be cut, and the results are shown in Figure 3.Wherein, the above-mentioned first picture to be cut and the second picture to be cut be
Bind (i.e. absolute fix), thus, to first in crop box when cutting picture be adjusted when, as Fig. 4 treats cutting figure
Piece zooms in and out adjustment, then the first picture to be cut and the second picture to be cut will realize absolute synchronization scaling (or mobile), Fig. 4
Middle bold box is crop box, is picture to be cut in single-line box, shade is the content in the Target Photo to be cut.
It should be noted that the above process is realized by 3 layers, and the translucent picture of the bottom, the portion of middle layer
Divide the crop box of opaque clear picture and top layer.
Further, it when the indication range for cutting picture is more than the coverage area of crop box, is calculated according to following formula
Zoom factor K, so that picture is adjusted according to zoom factor K.
K=(imgHeight-divHeight)/imgHeight,
Wherein, imgHeight is picture height to be cut, and divHeight is clipping region (i.e. crop box) height.Also
It is to say, reduces picture height to imgHeight=divHeight according to zoom factor K, reduce picture width (i.e. imgWidth)
To imgWidth* (1-K), and picture initial position is (0,0).
By embodiment provided by the present application, the identical picture to be cut bound by using two constitutes one and waits for
Picture is cut, realizes the synchronous adjustment to two pictures to be cut, further, avoids cutting the picture deformation caused by picture and asks
Topic.
As a kind of optional scheme, above-mentioned apparatus further includes:
1) second adjustment unit, the size for the coverage area in the indication range and crop box for comparing picture to be cut
Later, it when the indication range for cutting picture is less than or equal to the coverage area of crop box, adjusts picture to be cut and fills up cutting
Clipping region in frame.
It should be noted that when cutting picture is cut, such as still using the prior art common to smaller
The mode of crop box is adjusted come if cutting, it is necessary to constantly reduce crop box, not utilize trimming operation in this way, further, no
The disconnected process reduced easilys lead to reduce the accuracy cut.
Further, it when the indication range for cutting picture is more than the coverage area of crop box, is calculated according to following formula
Zoom factor K, so that picture is adjusted according to zoom factor K.
K=(divHeight-imgHeight)/divHeight,
Wherein, imgHeight is picture height to be cut, and divHeight is clipping region (i.e. crop box) height.Also
It is to say, according to zoom factor K amplification pictures height to imgHeight=imgHeight+divHeight*K, amplification picture width
(i.e. imgWidth) is to imgWidth+divWidth*K, and picture initial position is (0,0).
By embodiment provided by the present application, by being less than or equal to crop box in the indication range for judging picture to be cut
Coverage area when, picture to be cut is filled up to the mode of the clipping region in crop box, to avoid waiting cutting to smaller
Picture carries out the relatively low problem of the cutting accuracy being susceptible to when part is cut.
As a kind of optional scheme, construction unit 504 includes:
1) mobile module, for moving picture to be cut to target location according to the first control instruction, wherein wait for cutting figure
Piece includes Target Photo at target location, in crop box;And/or
2) Zoom module, for controlling picture to be cut according to original scale, with structure according to the second control instruction
Cut object.
It should be noted that in the present embodiment, above-mentioned steps S1 can be exchanged with the execution of step S2 sequence, that is, first
It treats cutting picture to zoom in and out, then treats cutting picture and moved, to build cutting object, this is not done in the present embodiment
It limits.
Optionally, in the present embodiment, it can be, but not limited to the original size according to picture to be cut, picture to be cut connects
Minimum widith, the sliding progress bar of nearly crop box are opposite with respect to picture to be cut before the displacement percentage of sliding area, scaling to be cut out
The size for cutting picture to be cut before the absolute position of frame, scaling, is calculated the variable quantity of picture size to be cut, waits for cutting figure
The amount of movement in the piece upper left corner.
It is specific that the mobile adjustment treated and cut picture is illustrated in conjunction with following example:
S1 will obtain a mobile object (picture i.e. to be cut) first in initialization program;
S2, the coordinate of record mouse relative movement object, that is, the abscissa parameter of record cursor of mouse relative movement object
With ordinate parameter;
S3, is arranged two event object functions for adding removal event, i.e., by be arranged mouse down event function and
Mouse decontrols event functions.Wherein, the position of mobile object is absolute fix.
S4 is tied to beginning mobile process and is chosen in (i.e. mousedown) event to mobile object, that is,
It says, when detecting that mouse pins mobile object, beginning mobile process will be triggered, and record the seat of mouse relative movement object
Mark;
Mobile process and stopping mobile process being tied to mobile (i.e. mousemove) and release (i.e. by S5 respectively
Mouseup) event, it should be noted that being tied to window elements (i.e. document) just can ensure event in entire window
In document all effectively, it is easy to appear the discrepancies caused by movement is too fast if being only bound to mobile object.
S6 will trigger mobile process when mouse moves on window elements document.Pass through the current seat of mouse
The difference of the opposite coordinate value of mouse when scale value is with starting mobile, to obtain position and the size after mobile object movement, wherein
Above-mentioned mobile object is the daughter element of window elements document;
S7 just touches stopping mobile process, to terminate to move after finally decontroling mouse.
Specific illustrated in conjunction with following example treats the scaling adjustment for cutting picture:
S1, initialization scale objects (picture i.e. to be cut);
S2 obtains scale objects central symmetry axis intersecting point coordinate, i.e. centre coordinate;
S3, setting mouse roller scale, setting zoom factor (ratio for amplifying when scrolling up and down and reducing), in order to allow
The horizontal coordinate at scale objects center remains unchanged, and scaling ratio is arranged generally according to the original the ratio of width to height of picture;
S4, setting start to scale program for the parameter that scaling program _ fun and scaling need is arranged, mouse are finally arranged
Mobile (i.e. the mousemove of rolling pulley) event triggering scaling program zooms in and out, and discharges and is executed in (i.e. mouseup) event
The stopping for cancelling scaling scales program;
S5, the task of setting scaling program are to execute the pattern after scaling program _ fun is arranged with setting, pass through scaling pair
As Pictures location picture size before picture actual size after centre coordinate, scaling and scaling, to learn Pictures location after scaling
And size.
By embodiment provided by the present application, zoom operations and/or moving operation are executed by adjusting picture to be cut, with
Structure cuts object, to realize the accurate cutting to cutting object, to realize the effect for improving the accuracy locally cut, into
And overcome the problems, such as to cut the picture metamorphopsic distortion caused by picture manually adjusting the size of crop box in the prior art.
As a kind of optional scheme, mobile module includes:
1) mobile submodule, the center for the center of Target Photo to be moved to crop box.
Optionally, in the present embodiment, the coordinate of the center of above-mentioned Target Photo can be, but not limited to relative to a left side
The coordinate of upper angular vertex is arranged.Optionally, in the present embodiment, the center of crop box with but be not limited to the width of crop box
Degree and height respectively take half.
Specifically illustrated in conjunction with following example, by mouse coordinates before record mobile (dragging), move after mouse coordinates,
The offset that picture level direction and vertical direction can be calculated, further according to Pictures location before dragging, you can calculate picture
Position (coordinate value relative to the upper left corner) after dragging.
As a kind of optional scheme, Zoom module includes:
1) submodule is scaled, for using the center of crop box as basic point, scaling picture to be cut to the upper left of Target Photo
Vertex is overlapped with the left upper apex of crop box.
It is specifically illustrated in conjunction with following example, by recording mouse roller scaling, obtains the scaling treated and cut picture
Factor K further calculates the position (coordinate value relative to the upper left corner) of the picture to be cut after scaling according to zoom factor
And size.
The embodiments of the present invention are for illustration only, can not represent the quality of embodiment.
In the above embodiment of the present invention, all emphasizes particularly on different fields to the description of each embodiment, do not have in some embodiment
The part of detailed description may refer to the associated description of other embodiment.
In several embodiments provided herein, it should be understood that disclosed technology contents can pass through others
Mode is realized.Wherein, the apparatus embodiments described above are merely exemplary, for example, the unit division, Ke Yiwei
A kind of division of logic function, formula that in actual implementation, there may be another division manner, such as multiple units or component can combine or
Person is desirably integrated into another system, or some features can be ignored or not executed.Another point, shown or discussed is mutual
Between coupling, direct-coupling or communication connection can be INDIRECT COUPLING or communication link by some interfaces, unit or module
It connects, can be electrical or other forms.
The unit illustrated as separating component may or may not be physically separated, aobvious as unit
The component shown may or may not be physical unit, you can be located at a place, or may be distributed over multiple
On unit.Some or all of unit therein can be selected according to the actual needs to achieve the purpose of the solution of this embodiment.
In addition, each functional unit in each embodiment of the present invention can be integrated in a processing unit, it can also
It is that each unit physically exists alone, it can also be during two or more units be integrated in one unit.Above-mentioned integrated list
The form that hardware had both may be used in member is realized, can also be realized in the form of SFU software functional unit.
If the integrated unit is realized in the form of SFU software functional unit and sells or use as independent product
When, it can be stored in a computer read/write memory medium.Based on this understanding, technical scheme of the present invention is substantially
The all or part of the part that contributes to existing technology or the technical solution can be in the form of software products in other words
It embodies, which is stored in a storage medium, including some instructions are used so that a computer
Equipment (can be personal computer, server or network equipment etc.) execute each embodiment the method for the present invention whole or
Part steps.And storage medium above-mentioned includes:USB flash disk, read-only memory (ROM, Read-Only Memory), arbitrary access are deposited
Reservoir (RAM, Random Access Memory), mobile hard disk, magnetic disc or CD etc. are various can to store program code
Medium.
The above is only a preferred embodiment of the present invention, it is noted that for the ordinary skill people of the art
For member, various improvements and modifications may be made without departing from the principle of the present invention, these improvements and modifications are also answered
It is considered as protection scope of the present invention.