Sample Code for cropping Images Based on JavaScript (figure)

This article mainly introduces how to use JavaScript to cut images. This article is very detailed and has reference value, for more information about how to use JavaScript to cut images, see the next article.

You can learn how to get the coordinates of the mouse and listen to the mouse's pressing, dragging, releasing, and other action events, so as to drag the mouse to change the image size.

You can also learn the clip attribute in css.

I. CSS implements image opacity and cropping.

Layer-3 cut image structure

1. The first layer of opacity sets transparency for the Layer

2. Layer 2 clip and clip attributes: crop the image to display part of the image and hide other parts.

3. Select the absolute (overlapped with the second layer) on the third layer, including the effect of eight contacts.

Html code:

Css code:

Body {background: #333 ;}# box {width: 500px; height: pixel PX; position: absolute; top: 100px; left: 200px ;}# img1, # img2 {position: absolute; top: 0; left: 0 ;}# img1 {opacity: 0.3 ;}# img2 {clip: rect (0, 200px, 200px, 0 );} # main {position: absolute;/* The third layer needs to be absolutely positioned on top */width: 200px; height: 200px; border: 1px solid # fff ;}. pmin {position: absolute; width: 8px; height: 8px; background: # fff ;}. up-left {margin-top:-4px; margin-left:-4px; cursor: nw-resize ;}. up {left: 50%;/* half of the main width of the parent element box. Be sure to have an absolute position */margin-left:-4px; top:-4px; cursor: n-resize ;}. up-right {top:-4px; right:-4px; cursor: ne-resize ;}. right {top: 50%; margin-top:-4px; right:-4px; cursor: e-resize ;}. right-down {right:-4px; bottom:-4px; cursor: se-resize ;}. down {bottom:-4px; left: 50%; margin-left:-4px; cursor: s-resize ;}. left-down {left:-4px; bottom:-4px; cursor: sw-resize ;}. left {left:-4px; top: 50%; margin-top:-4px; cursor: w-resize ;}

Ii. javascript to get the selection box offset

Detailed description of the Selection box and the drag position:

OffsetLeft: the distance between an element and its left boundary;

ClientX: the abscissa of the mouse position;

ClientWidth: the width of the element;

OffsetXY: coordinates in the box model where the event occurs, regardless of the scroll bar.

ClientXY: coordinates of the available part of the browser. It has nothing to do with the scroll bar. That is, you need to drag the scroll bar to see the area.

PageXY: coordinates of the entire webpage, which are related to the scroll bar.

Construct a getPosition () function to obtain the distance between an element and the left and top of the screen.

The js Code is as follows:

// Obtain the distance between the element and the left and top of the screen. Use offsetLeft function getPosition (el) {var left = el. offsetLeft; var top = el. offsetTop; var parent = el. offsetParent; while (parent! = Null) {left + = parent. offsetLeft; top + = parent. offsetTop; parent = parent. offsetParent;} return {"left": left, "top": top };}

Iii. javascript control contacts

Monitor the size of the selected box by pressing, dragging, and releasing the mouse.

Note:

The Element. clientWidth attribute indicates the internal width of an Element, in pixels. This attribute includes the padding, but does not include the vertical scroll bar (if any), border, and margin.

That is, clientWidth does not include borders. offsetWidth includes borders.

1) Click contacts on the right

Js Code:

Var mainp = $ ('main'); var rightp = $ ('right'); var isDraging = false; var contact = ""; // indicates the pressed contact. // rightp when the mouse is pressed. onmousedown = function () {isDraging = true; contact = "right" ;}// window when the mouse is released. onmouseup = function () {isDraging = false;} // window when the mouse moves. onmousemove = function (e) {if (isDraging = true) {if (contact = "right") {var e = e | window. event; var x = e. clientX; // the abscissa var widthBefore = mainp. offsetWidth-2; // select the width before the box change // var widthBefore = mainp. clientWidth; var addWidth = x-getPosition (mainp ). left-widthBefore; // move the mouse and select the mainp. style. width = widthBefore + addWidth + 'px '; // The width of the variable in the selection box }}// function for getting the id $ (id) {return document. getElementById (id );}

2) Click the above Contact

When you click the contact in the center above to move, the height of the selected box and the position in the upper left corner need to change.

Increased Height = distance from the selection box to the screen-y coordinate of the mouse position

The top value in the upper left corner of the Selection box minus the increased height, because the height increases when the cursor moves up, the top value decreases, the height decreases when the cursor moves down, and the top value increases.

Changes:

Js Code:

Else if (contact = "up") {var y = e. clientY; // The ordinate var heightBefore = mainp. offsetHeight-2; // select the height var addHeight = getPosition (mainp) before the box changes ). top-y; // increase the height of mainp. style. height = heightBefore + addHeight + 'px '; // select the width of mainp after the box is changed. style. top = mainp. offsetTop-addHeight + 'px '; // It is equivalent to the vertical coordinate in the upper left corner after the change. move the cursor up to reduce the vertical coordinate, move down to increase}

3) Click contacts on the left

The principle is the same as clicking the above contact. The width and the left position change.

Changes:

Js Code:

Else if (contact = "left") {var widthBefore = mainp. offsetWidth-2; var addWidth = getPosition (mainp ). left-e. clientX; // The added width is equal to the distance from the left side of the screen minus the x-axis mainp of the mouse position. style. width = widthBefore + addWidth + 'px '; mainp. style. left = mainp. offsetLeft-addWidth + 'px '; // The distance on the left (equivalent to the horizontal coordinate on the left) equals to the distance from the selection box to the parent element minus the increased width}

4) Click the contacts below

Increase width = Y coordinate of the mouse position-distance from the top of the screen-original width

The position in the upper left corner does not need to be changed.

Js Code:

else if(contact = "down"){     var heightBefore = mainp.offsetHeight - 2;     var addHeight = e.clientY - getPosition(mainp).top - mainp.offsetHeight;     mainp.style.height = heightBefore + addHeight + 'px';    }

5) the changes in the four corners of a vertex are the superposition of changes in height and width. Therefore, it is best to encapsulate the above four changes into functions to facilitate maintenance and code reuse.

If else needs to be judged eight times, the switch statement is used to simplify the code.

The modified js Code is as follows:

Window. onmousemove = function (e) {var e = e | window. event; if (isDraging = true) {switch (contact) {case "up": upMove (e); break; case "right": rightMove (e); break; case "down": downMove (e); break; case "left": leftMove (e); break; case "up-right": upMove (e ); rightMove (e); break; case "down-right": downMove (e); rightMove (e); break; case "down-left": downMove (e ); leftMove (e); break; case "up-left": upMo Ve (e); leftMove (e); break ;}}// function for obtaining the id $ (id) {return document. getElementById (id);} // obtain the distance between the element and the left and top of the screen. Use offsetLeft function getPosition (el) {var left = el. offsetLeft; var top = el. offsetTop; var parent = el. offsetParent; while (parent! = Null) {left + = parent. offsetLeft; top + = parent. offsetTop; parent = parent. offsetParent;} return {"left": left, "top": top };}// up mobile function upMove (e) {var y = e. clientY; // The ordinate var heightBefore = mainp. offsetHeight-2; // select the height var addHeight = getPosition (mainp) before the box changes ). top-y; // increase the height of mainp. style. height = heightBefore + addHeight + 'px '; // select the width of mainp after the box is changed. style. top = mainp. offsetTop-addHeight + 'px '; // It is equivalent to the vertical coordinate in the upper left corner after the change. move the cursor up to reduce the vertical coordinate and move it down to increase} // right move the function rightMove (e) {var x = e. clientX; // the abscissa var widthBefore = mainp. offsetWidth-2; // select the width before the box change // var widthBefore = mainp. clientWidth; var addWidth = x-getPosition (mainp ). left-widthBefore; // move the mouse and select the mainp. style. width = widthBefore + addWidth + 'px '; // select the width after the box changes} // down the moving function downMove (e) {var heightBefore = mainp. offsetHeight-2; var addHeight = e. clientY-getPosition (mainp ). top-mainp. offsetHeight; mainp. style. height = heightBefore + addHeight + 'px ';} // left mobile function leftMove (e) {var widthBefore = mainp. offsetWidth-2; var addWidth = getPosition (mainp ). left-e. clientX; // The added width is equal to the distance from the left side of the screen minus the x-axis mainp of the mouse position. style. width = widthBefore + addWidth + 'px '; mainp. style. left = mainp. offsetLeft-addWidth + 'px '; // The distance on the left (equivalent to the horizontal coordinate on the left) equals to the distance from the selection box to the parent element minus the increased width}

4. Bright display in the selection box

1) the clip attribute of the Layer 2 Image in the selection box needs to be reset.

Four aspects:

Js Code:

// Set the function setChoice () {var top = mainp. offsetTop; var right = mainp. offsetLeft + mainp. offsetWidth; var bottom = mainp. offsetTop + mainp. offsetHeight; var left = mainp. offsetLeft; img2.style. clip = "rect (" + top + "px," + right + "px," + bottom + "px," + left + "px )";}

2) When you move the mouse, the image will be selected. You can add a line of code in the js Code to disable the image from being selected.

// Disable the image from being selected. document. onselectstart = new Function ('event. returnValue = false ;');

You can also add * {user-select: none} to the css style}

This indicates that the text is not selected and has the same effect on the image and p.

5. Drag the position of the Selection box

First, stop event bubbles.

The js Code is as follows:

// Rightp. onmousedown = function (e) {e. stopPropagation (); isDraging = true; contact = "right ";}

6. preview the image Cutting Area

Add p in the preview area.

Html code:

Css code:

#preview{  position: absolute;  width: 500px;  height: 380px;  top: 100px;  left:710px ; } #preview #img3{position: absolute;}

Note: To make clip: rect (top, right, bottom, left) take effect, you must set the element to relative/absolute positioning.

The js part also uses the clip attribute, and the setChoice () function is called at the same time.

In addition, to fix the upper left corner of the preview area on the right, you must set the top and left values.

// Function setPreview () {var top = mainp. offsetTop; var right = mainp. offsetLeft + mainp. offsetWidth; var bottom = mainp. offsetTop + mainp. offsetHeight; var left = mainp. offsetLeft; var img3 =$ ('img3'); img3.style. top =-top + 'px '; img3.style. left =-left + 'px '; img3.style. clip = "rect (" + top + "px," + right + "px," + bottom + "px," + left + "px )";}

The above is the details of the sample code (diagram) that achieves image cutting effect based on JavaScript. For more information, see other related articles in the first PHP community!