Today I learned the image cutting effect of the web front-end again. There is an area to frame a certain part of the picture and preview the boxed part.
The renderings are as follows:
Doesn't it look very cool
Let's briefly introduce the implementation method
1. The layout is two divs on the left and right. The one on the right is easy to say, mainly on the left. The one on the left is divided into three layers in an absolute layout. The bottom layer is a translucent picture, and the middle layer is the original picture, but it is cut into only one piece, and only this piece is displayed. You can use the clip:rect method to implement it. Then the top layer is a border written by yourself. 8 points are added to the border, and the positions are defined for these 8 points respectively.
2. Then the JS code is implemented using the mouse click event.
Post your own code below:
index.html (We need to refer to two js files, namely jquery and jquery-ui. Among them, jquery can refer to online. I quoted jquery-ui locally by myself. You can download it yourself on the official website. If you don’t quote it, you cannot implement dragging and cutting boxes)
<!DOCTYPE HTML><html><head lang="en"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Picture Cutting</title><script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js" type="text/javascript"></script><script src="js/jquery-ui-1.12.0/jquery-ui.min.js"></script><link href="img.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="img.js"></script></head><body> <div id="box"> <img src="images/1.jpg" id="img1"> <img src="images/1.jpg" id="img2"> <div id="main"> <div id="left-up"></div> <div id="up"></div> <div id="right-up"></div> <div id="right-down"></div> <div id="right-down"></div> <div id="left-down"></div> <div id="left"></div> </div> </div> <div id="preview"> <img src="images/1.jpg" id="img3"> </div></body></html> img.css body { background-color: #333;}#box { position: absolute; top: 200px; left: 100px; width: 600px; height: 319px;}#img1 { /*Opacity*/ opacity: 0.3; position:absolute; top: 0; left: 0;}#img2 { position: absolute; top: 0; left: 0; /*Function clip: rect(top,right,bottom,left); top represents the distance from the top of the clip area to the top of the picture right represents the distance from the right of the clip area to the left of the picture, that is, the length + left bottom represents the distance from the bottom of the clip area to the top of the picture, that is, the width + top left represents the distance from the left of the clip area to the left of the picture*/ clip: rect(0, 200px, 200px, 0);}#main { position: absolute; border: 1px solid #fff; width: 200px; height: 200px;}#preview { position: absolute; width: 600px; height: 319px; top: 200px; left: 720px;}#preview img{ /*To make the clip function in the function setPreview work, you need to add absolute positioning or relative positioning to img, but since the parent element is absolute positioning, this is absolute positioning*/ position: absolute;}.minDiv { position: absolute; width: 8px; height: 8px; background-color: #fff;}.left-up { top:-4px; left: -4px; /*Mouse change n-n-north w-w-west s-south e-east*/ cursor: nw-resize;}.up { /*The distance to the left of the parent element whose closest position is absolute or relative is 50% of the distance to the left of the parent element whose closest position is absolute or relative is 50%*/ left: 50%; /*The distance to the left -4px means moving to the left 4px*/ margin-left: -4px; top: -4px; cursor: n-resize;}.right-up { right: -4px; top: -4px; cursor: ne-resize;}.right-up { right: -4px; top: -4px; cursor: ne-resize;}.right-down { bottom: -4px; right: -4px; cursor: se-resize;}.down { left: 50%; margin-left: -4px; bottom: -4px; cursor: s-resize;}.left-down { left: -4px; bottom: -4px; cursor: sw-resize;}.left { bottom: 50%; margin-bottom: -4px; left: -4px; cursor: w-resize;} img.js // Execute after the element is loaded to ensure that the element can successfully obtain window.onload = function(){ document.onselectstart = new Function('event.returnValue=false;'); $("#main").draggable({containment:'parent', drag:setChoice}); var img = document.getElementById("img2"); var rightDiv = document.getElementById("right"); var upDiv = document.getElementById("up"); var leftDiv = document.getElementById("left"); var downDiv = document.getElementById("down"); var leftupDiv = document.getElementById("left-up"); var rightupDiv = document.getElementById("right-up"); var rightdownDiv = document.getElementById("right-down"); var leftdownDiv = document.getElementById("left-down"); var mainDiv = document.getElementById("main"); var ifKeyDown = false; var contact = "";// Indicates the pressed contact point // Mouse down state rightDiv.onmousedown = function(e) { /* The jquery and jquery-ui introduced by the drag effect will also trigger the mouse click event. Therefore, in order to prevent the click event you define and the click event you introduced, pass in e and add the following statement to prevent bubbles. Bubble means that some events of the parent element will also be triggered when the mouse clicks on the element*/ e.stopPropagation(); ifKeyDown = true; contact = "right"; } upDiv.onmousedown = function(e) { e.stopPropagation(); ifKeyDown = true; contact = "up"; } leftDiv.onmousedown = function(e) { e.stopPropagation(); ifKeyDown = true; contact = "left"; } downDiv.onmousedown = function(e) { e.stopPropagation(); ifKeyDown = true; contact = "down"; } leftupDiv.onmousedown = function(e) { e.stopPropagation(); ifKeyDown = true; contact = "left-up"; } rightupDiv.onmousedown = function(e) { e.stopPropagation(); ifKeyDown = true; contact = "right-up"; } rightdownDiv.onmousedown = function(e) { e.stopPropagation(); ifKeyDown = true; contact = "right-down"; } leftdownDiv.onmousedown = function(e) { e.stopPropagation(); ifKeyDown = true; contact = "left-down"; } //Mouse release status window.onmouseup = function() { ifKeyDown = false; } //Mouse movement event window.onmousemove = function(e) { if(ifKeyDown == true){ switch(contact){ case "right": 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 "right-up": rightMove(e); upMove(e); break; case "right-down": rightMove(e); downMove(e); break; case "left-down": leftMove(e); downMove(e); break; } } setChoice(); setPreview(); } //Move the right side rightMove(e) { var x = e.clientX; //Mouse x coordinate var addWidth = ""; //The width increased by the selection of the marquee after the mouse moves var widthBefore = mainDiv.offsetWidth - 2; //The width before the marquee changes, subtracting 2 is to subtract the width of the border border, and the left and right sides are 1px, so it is 2 addWidth = x - getPosition(mainDiv).left //The width increased by the mouse moves if(widthBefore <= img.width){ mainDiv.style.width = addWidth + "px"; //The width after the marquee changes} else { mainDiv.style.width = img.width + "px"; } } //Move function upMove(e) { var topBefore = mainDiv.offsetTop; var y = e.clientY;//Mouse vertical coordinate var addHeight = 0; var mainY = getPosition(mainDiv).top;//The distance of the selection marquee to the top of the screen addHeight = y - mainY; //Increased height, var heightBefore = mainDiv.offsetHeight - 2; var bottom = topBefore + heightBefore; var heightAfter = heightBefore - addHeight; var topAfter = mainDiv.offsetTop + addHeight; if(topAfter < bottom && topAfter > -2){ mainDiv.style.height = heightAfter + "px"; mainDiv.style.top = topAfter + "px"; } } //Move the left function leftMove(e) { // The distance from the left side of the parent element before the left side of the left side of the left side of the parent element var leftBefore = mainDiv.offsetLeft; // The distance from the mouse to the left side of the browser var x = e.clientX; // Define the increased width var addWidth = 0; // The width of the clip box before the change var widthBefore = mainDiv.offsetWidth - 2; // The distance of the left border from the browser before the change var mainDivLeft = getPosition(mainDiv).left; // The distance of the right border from the left of the parent element var right = leftBefore + widthBefore; // The width of the clip box after the change var widthAfter = widthBefore - addWidth; // The distance of the clip box from the left after the change var leftAfter = mainDiv.offsetLeft + addWidth; // Prevent the left border from moving to the area outside the right border if(leftAfter < right && leftAfter > -2) { // Define the changed width mainDiv.style.width = widthAfter + "px"; // Define the distance from the left parent element after the change mainDiv.style.left = leftAfter + "px"; } } // Move the lower function downMove(e) { var y = e.clientY; var addHeight = 0; var heightBefore = mainDiv.offsetHeight - 2; addHeight = y - getPosition(mainDiv).top; if(heightBefore <= img.height) { mainDiv.style.height = addHeight + "px"; } else { mainDiv.style.height = img.height + "px"; } } // Get the distance of the element relative to the left of the screen, use offsetLeft // node as the passed element function getPosition(node) { /*Get the left margin of the element relative to the parent element*/ var left = node.offsetLeft; /*Get the upper margin of the element relative to the parent element*/ var top = node.offsetTop; /*Get the parent element of the element*/ var parent = node.offsetParent; /*Judge whether the parent element exists. If there is, the left margin is added and the distance between the element and the left border of the browser is calculated*/ while(parent != null) { /*Loop accumulates the left margin of the child element relative to the parent element*/ left += parent.offsetLeft; /*Loop accumulates the upper margin of the child element relative to the parent element*/ top += parent.offsetTop; /*Loop obtains the parent element of the parent element until there is no parent element*/ parent = parent.offsetParent; } return {"left":left,"top":top}; } //Set the selected area to highlight and visible function setChoice() { var top = mainDiv.offsetTop; var right = mainDiv.offsetLeft + mainDiv.offsetWidth; var bottom = mainDiv.offsetTop + mainDiv.offsetHeight; var left = mainDiv.offsetLeft; img.style.clip = "rect("+ top+"px,"+ right+"px,"+ bottom +"px,"+ left+"px"+")" } //Preview function function setPreview() { var top = mainDiv.offsetTop; var right = mainDiv.offsetLeft + mainDiv.offsetWidth; var bottom = mainDiv.offsetTop + mainDiv.offsetHeight; var left = mainDiv.offsetLeft; var img3 = document.getElementById("img3"); img3.style.clip = "rect("+ top+"px,"+ right+"px,"+ bottom +"px,"+ left+"px"+")" img3.style.top = -(top) + "px"; img3.style.left = -(left) + "px"; }}The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.