This article uses a css attribute clip. I am sure that many people do not know this attribute, because this attribute is used too little, and this attribute is only used under certain conditions. Here I will tell you about its usage in general. If you want to know more about this property, you can check the information. I will not tell you about it here. Here is mainly how to use this property to achieve the function of selecting pictures.
To understand the property of clip, you must first know the syntax of this property: clip: rect (top, right, bottom, left), the feature of the clip property is that only the area wrapped by these values is displayed, and all other areas are hidden.
The function of selecting pictures is mainly divided into three parts:
The first part: It is only a picture for display, and no functional processing is performed on this picture.
The second part: It is also a picture. This picture is overlaid on the picture in the first chapter. Only the selected part is displayed using the clip property, and the others are hidden.
The third part: draws the selected image area in the preview area by using the image interface of canvas
The general effect is shown in the figure:
Next, I will go directly to the code. I am a beginner with limited ability. I welcome the guidance of the great gods.
HTML part:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Image crop</title> <script src="js/test.js" ></script> <script src="js/jquery-1.8.1.min.js" ></script> <script src="js/jquery-ui-1.10.4.custom.min.js" ></script> <script src="js/rem.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="box"> <img src="images/1.jpg" id="img1"/> <img src="images/1.jpg" id="img2"/> <div id="main"> <div class="div minDiv" id="up"></div> <div class="div minDiv2" id="left_up"></div> <div class="div minDiv3" id="right_up"></div> <div class="div minDiv4" id="left"></div> <div class="div minDiv5" id="right"></div> <div class="div minDiv6" id="left_down"></div> <div class="div minDiv7" id="down"></div> <div class="div minDiv8" id="right_down"></div> </div> </div> <div id="preview"> <canvas id="canvas"></canvas> </div> </body> </html>
css part:
body{ background: #333; } #box{ position:absolute; top: 1rem; left: 2rem; height: 3.5rem; width: 5rem; } #img1{ position: absolute; opacity: 0.6; top: 0; left: 0; width: 100%; height: 100%; } #img2{ position: absolute; top: 0; left: 0; clip: rect(0,0.2rem,0.2rem,0); width: 100%; height: 100%; } #main{ position: absolute; border: 1px dashed #fff; height: 2rem; width: 2rem; cursor: move; } .div{ position: absolute; width: 0.08rem; height: 0.08rem; background: #fff; } .minDiv { left: 50%; margin-left: -0.04rem; top: -0.04rem; cursor: n-resize; } .minDiv2 { top: -0.04rem; left: -0.04rem; cursor: nw-resize; } .minDiv3{ top: -0.04rem; right: -0.04rem; cursor: ne-resize; } .minDiv4{ top: 50%; left: -0.04rem; margin-top: -0.04rem; cursor: w-resize; } .minDiv5{ top: 50%; margin-top: -0.04rem; right: -0.04rem; cursor: e-resize; } .minDiv6 { bottom: -0.04rem; left: -0.04rem; cursor: ne-resize; } {.minDiv7} bottom: 0; left: 50%; margin-bottom: -0.04rem; margin-left: -0.04rem; cursor: s-resize; } .minDiv8{ bottom: 0; margin-bottom: -0.04rem; right: -0.04rem; cursor: se-resize; } #preview{ position: absolute; width: 2rem; height: 2rem; top: 1rem; left: 10rem; overflow: hidden; } #img3{ position: absolute; } #canvas{ height: 100%; width: 100%; background: #fff; border: 1px solid #aaa; }
js part:
window.onload = function(){ document.onselectstart = new Function('event.returnValue=false;');//Forbid the picture to be selected var box = document.getElementById('box'); var rightDiv = document.getElementById('right');//Right contact var mainDiv = document.getElementById('main'); var up = document.getElementById('up'); var left = document.getElementById('left'); var down = document.getElementById('down'); var left_up = document.getElementById('left_up'); var right_up = document.getElementById('right_up'); var left_down = document.getElementById('left_down'); var right_down = document.getElementById('right_down'); var ifKeyDown = false;//Mouse down state var contact = "";//Indicates the pressed contact setChoice (); //mouse press event rightDiv.onmousedown = function(e){ e.stopPropagation();//Stop event bubbling ifKeyDown = true; contact = "rightDiv"; } up.onmousedown = function(e){ e.stopPropagation(); ifKeyDown = true; contact = "up"; } left.onmousedown = function(e){ e.stopPropagation(); ifKeyDown = true; contact = "left" } down.onmousedown = function(e){ e.stopPropagation(); ifKeyDown = true; contact = "down"; } left_up.onmousedown = function(e){ e.stopPropagation(); ifKeyDown = true; contact = "left_up"; } left_down.onmousedown = function(e){ e.stopPropagation(); ifKeyDown = true; contact = "left_down"; } right_up.onmousedown = function(e){ e.stopPropagation(); ifKeyDown = true; contact = "right_up"; } right_down.onmousedown = function(e){ e.stopPropagation(); ifKeyDown = true; contact = "right_down"; } mainDiv.onmousedown = function(e){ e.stopPropagation(); ifKeyDown = true; contact = "box"; } //mouse release event window.onmouseup = function(){ ifKeyDown = false; contact = ""; } //mouse move event window.onmousemove = function(e){ if(ifKeyDown){ switch (contact){ case "rightDiv":rightMove(e);break; case "up":upMove(e);break; case "left":leftMove(e);break; case "down":downMove(e);break; case "left_up":leftMove(e);upMove(e);break; case "left_down":leftMove(e);downMove(e);break; case "right_up":rightMove(e);upMove(e);break; case "right_down":rightMove(e);downMove(e);break; // case "box":tuo(e);break; } } setChoice (); } //marquee press and drag event var disX; var disY; mainDiv.onmousedown = function(e){ ifKeyDown = true; var oEvent = e || event; disX = oEvent.clientX - mainDiv.offsetLeft; disY = oEvent.clientY - mainDiv.offsetTop; document.onmousemove = function(e){ var oEvent = e || event; var l = oEvent. clientX - disX; var t = oEvent.clientY - disY; if (l < 0) { l = 0; } else if(l > box.offsetWidth - mainDiv.offsetWidth){ l = box.offsetWidth - mainDiv.offsetWidth; } if (t < 0) { t = 0; } else if(t > box.offsetHeight - mainDiv.offsetHeight){ t = box.offsetHeight - mainDiv.offsetHeight; } mainDiv.style.top = t +"px"; mainDiv.style.left = l +"px"; setPreview(); } document.onmouseup = function(){ document.onmousemove = null; document.onmouseup =null; } return false; } //Set the selected area to be highlighted and visible function setChoice(){ var top = mainDiv.offsetTop; var right = mainDiv.offsetLeft + mainDiv.offsetWidth; var bottom = mainDiv.offsetTop + mainDiv.offsetHeight; var left = mainDiv.offsetLeft; var img2 = document.getElementById('img2'); img2.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)"; setPreview(); } //Get the zoom ratio of the image function bili(img,box){ var w = Math.round(img.width / box.offsetWidth * 100) / 100; var h = Math.round(img.height / box.offsetHeight * 100) /100; return {"w":w,"h":h}; } //preview function function setPreview(){ var l = mainDiv.offsetLeft;//The coordinates of the upper left corner of the marquee var t = mainDiv.offsetTop; var tt = right_down.offsetTop - right_up.offsetTop;//The height of the marquee var ll = right_down.offsetLeft - left_down.offsetLeft;//宽度 console.log(l+" "+ t) var canvas = document.getElementById('canvas'); var context = canvas.getContext("2d"); var box = document.getElementById('box'); var img = new Image(); img.src = "images/1.jpg"; img.onload = function(){ context.drawImage(img,l*bili(img,box).w,t*bili(img,box).h,ll*bili(img,box).w,tt*bili(img,box).h,0,0,canvas.width,canvas.height); } } //move right function rightMove(e){ var x = e.clientX;//Mouse X coordinate s if (x > getPosition(box).left + box.offsetWidth) { x = getPosition(box).left + box.offsetWidth; } var widthBefore = mainDiv.offsetWidth-2;//The width of the marquee before transformation var addWidth = "";//The width of the marquee increases after the mouse is moved addWidth = x - getPosition(mainDiv).left - widthBefore;//The width that increases after the mouse moves mainDiv.style.width = addWidth + widthBefore + "px";//The width of the marquee after transformation } // move up function upMove(e){ var y = e.clientY;//Mouse ordinate if(y < getPosition(box).top){ y = getPosition(box).top; } var heightBefore = mainDiv.offsetHeight - 2;//Original height var mainY = getPosition(mainDiv).top;//The distance of the marquee relative to the top of the screen var addHeight = mainY - y;//Increased height mainDiv.style.height = heightBefore + addHeight +"px"; mainDiv.style.top = mainDiv.offsetTop - addHeight +"px"; } // move down function downMove(e){ var y = e.clientY;//Mouse ordinate if(y > getPosition(box).top + box.offsetHeight){ y = getPosition(box).top + box.offsetHeight } var heightBefore = mainDiv.offsetHeight - 2;//Height before marquee transformation var mainY = getPosition(mainDiv).top;//The height of the marquee relative to the parent var addHeight = y - heightBefore - mainY;//Increased height mainDiv.style.height = addHeight +heightBefore + "px"; } //move left function leftMove(e){ var x = e.clientX;//The coordinates of the mouse if(x < getPosition(box).left){ x = getPosition(box).left; } var widthBefore = mainDiv.offsetWidth - 2;//The width before the marquee changes var mainX = getPosition(mainDiv).left; var addWidth = mainX - x ;//Increased width mainDiv.style.width = widthBefore + addWidth + "px";//Width after selection mainDiv.style.left = mainDiv.offsetLeft - addWidth +"px"; } } //Get the distance of the element relative to the left side of the screen function getPosition(obj){ var left = obj.offsetLeft; var top = obj.offsetTop; var parent = obj.offsetParent; while(parent != null){ left += parent.offsetLeft; top += parent.offsetTop; parent = parent.offsetParent; } return {"left":left,"top":top}; }