如图所示，使用jquery简单实现，也是一个思路：
index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选择框</title> <link rel="stylesheet" href="css.css"></head><body ><script src="jquery-3.2.1.min.js"></script><div class="clip"> <img class="photo" src="./assets/img/04.jpg" /> <img class="showClip" src="./assets/img/04.jpg" /> <div class="clipBorder"> <span class="minBlock nw"></span> <span class="minBlock n"></span> <span class="minBlock ne"></span> <span class="minBlock w"></span> <span class="minBlock sw"></span> <span class="minBlock e"></span> <span class="minBlock se"></span> <span class="minBlock s"></span> </div> <div class="pr"> <img src="./assets/img/04.jpg" class="prPhoto"> </div></div><script src="js.js"></script></body></html>
js.js
window.onload=function () { var clip = document.getElementsByClassName("clip")[0]; var clipBorder = document.getElementsByClassName("clipBorder")[0]; var width = clipBorder.offsetWidth; var height = clipBorder.offsetHeight; var left = 0; var top = 0; var e = document.getElementsByClassName('e')[0]; var w = document.getElementsByClassName('w')[0]; var s = document.getElementsByClassName('s')[0]; var n = document.getElementsByClassName('n')[0]; var ne = document.getElementsByClassName('ne')[0]; var sw = document.getElementsByClassName('sw')[0]; var se = document.getElementsByClassName('se')[0]; var nw = document.getElementsByClassName('nw')[0]; var isDown = false; var fix = {}; var p = ""; e.onmousedown =function (ev) { getInit(ev); p = "e"; }; w.onmousedown =function (ev) { getInit(ev); p = "w"; } n.onmousedown =function (ev) { getInit(ev); p = "n"; } ne.onmousedown =function (ev) { getInit(ev); p = "ne"; } sw.onmousedown =function (ev) { getInit(ev); p = "sw"; } se.onmousedown =function (ev) { getInit(ev); p = "se"; } nw.onmousedown =function (ev) { getInit(ev); p = "nw"; } s.onmousedown =function (ev) { getInit(ev); p = "s"; } function getInit(ev) { isDown = true; fix = getPoint(ev); console.log(fix); width= clipBorder.offsetWidth-2; height = clipBorder.offsetHeight-2; left = parseInt(getStyle(clipBorder,"left")); top = parseInt(getStyle(clipBorder,"top")); } clip.onmousemove = function (ev) { if(isDown){ switch(p) { case "n": nlong(ev); getClip(); break; case "w": wlong(ev); getClip(); break; case "s": slong(ev); getClip(); break; case "e": elong(ev); getClip(); break; case "sw": slong(ev); wlong(ev); getClip(); break; case "se": slong(ev); elong(ev); getClip(); break; case "ne": nlong(ev); elong(ev); getClip(); break; case "nw": nlong(ev); wlong(ev); getClip(); break; } } } clip.onmouseup =function (ev) { isDown = false; } function elong(ev) { var pointX = getPoint(ev); var addWidth=pointX.x-fix.x; clipBorder.style.width = width+addWidth+"px"; } function wlong(ev) { var pointX = getPoint(ev); var addWidth=pointX.x-fix.x; clipBorder.style.width = width-addWidth+"px"; if(left>0){ clipBorder.style.left = left+addWidth+"px"; }else{ clipBorder.style.left = addWidth+"px"; } } function nlong(ev) { var pointY = getPoint(ev); var addHeight=pointY.y-fix.y; clipBorder.style.height = height-addHeight+"px"; if(top>0){ clipBorder.style.top = top+addHeight+"px"; }else { clipBorder.style.top = addHeight+"px"; } } function slong(ev) { var pointY = getPoint(ev); var addHeight=pointY.y-fix.y; clipBorder.style.height = height+addHeight+"px"; } function getClip() { var photo = document.getElementsByClassName("photo")[0]; var showClip = document.getElementsByClassName("showClip")[0]; var top = parseInt(getStyle(clipBorder,"top")); var left = parseInt(getStyle(clipBorder,"left")); var right = clipBorder.offsetWidth+left; var bottom = clipBorder.offsetHeight+top; console.log(top,left,right,bottom); showClip.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)"; prClip(); } function prClip() { var prPhoto = document.getElementsByClassName("prPhoto")[0]; var top = parseInt(getStyle(clipBorder,"top")); var left = parseInt(getStyle(clipBorder,"left")); var right = clipBorder.offsetWidth+left; var bottom = clipBorder.offsetHeight+top; console.log(top,left,right,bottom); prPhoto.style.left=-left+"px"; prPhoto.style.top = -top+"px"; prPhoto.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)"; prPhoto.style.display="block"; } function getWithinFix(ev,e) { var ev = ev || window.event; var borderLeft = parseInt(getStyle(e,"borderLeftWidth")) || ((e.style.borderLeftStyle && e.style.borderLeftStyle !== "none")? 3:0); var borderTop = parseInt(getStyle(e,"borderTopWidth")) || ((e.style.borderTopStyle && e.style.borderTopStyle !== "none")? 3:0); //一般浏览器获得鼠标偏移值 var x = ev.offsetX || (ev.layerX - e.offsetLeft - borderLeft); //兼容Mozilla类型浏览器，减去边框宽度 var y = ev.offsetY || (ev.layerY - e.offsetTop - borderTop); //获取浏览器的用户数据 var userAgent = navigator.userAgent; if( (userAgent.indexOf("KHTML")>-1) || (userAgent.indexOf("Konqueror")>-1) || (userAgent.indexOf("AppleWebKit")>-1) ){ //如果是Safari浏览器，则减去边框的影响 x -=borderLeft; y -=borderTop; } //返回兼容不同浏览器的鼠标位置坐标，以元素边框内壁左上角为定位原点 return { x:x, y:y }; } function parentNode(e,node,cal) { var x = y = 0; while (e.offsetParent !== node){ x += e.offsetLeft; y += e.offsetTop; e = e.offsetParent; } cal( { x:x+4, y:y+4 } ); } function getParent(e) { //判断offsetParent属性是否指向父元素 if(e.parentNode === e.offsetParent){ var x = e.offsetLeft; var y = e.offsetTop; }else{ //调用getWidth()扩展函数获取当前元素和父元素的x坐标，并返回差值 var nodeFix= getNodeFix(e); var parentFix = getNodeFix(e.parentNode); var x = nodeFix.x - parentFix.x; var y = nodeFix.y - parentFix.y; } return { x:x, y:y }; } function getNodeFix(e) { var x = y = 0 ; while (e.offsetParent){ x += e.offsetLeft; y += e.offsetTop; e = e.offsetParent; } //遍历到body元素后停止循环 return { x:x, y:y }; } function getStyle(e,name) { if(e.style[name]){ return e.style[name]; }else if(e.currentStyle){ return e.currentStyle[name]; }else if(document.defaultView && document.defaultView.getComputedStyle){ name = name.replace(/([A-Z])/g,"-$1"); name = name.toLowerCase(); var style = document.defaultView.getComputedStyle(e,null); if(style){ return style.getPropertyValue(name); } }else { return null; } } //获取元素的页面坐标 function getPoint(event) { var posx = 0,posY = 0; var event = event || window.event; if(event.pageX || event.pageY){ posx = event.pageX; posY = event.pageY; }else if(event.clientX || event.clientY){ posx = event.clientX+document.documentElement.scrollLeft+document.body.scrollLeft; posY = event.clientY+document.documentElement.scrollTop+document.body.scrollTop; } return { x:posx, y:posY }; }document.onselectstart=new Function("return false");
css.css
body{ background: #263238;}.photo{ opacity: 0.5; height: auto; width: 500px;}.clip{ margin: 200px; position: relative;}.clip:after{ clear: both; content: ""; visibility: hidden;}.showClip{ height: auto; width: 500px; position: absolute; top: 0; left: 0; clip: rect(0,200px,200px,0);}.clipBorder{ width: 200px; height: 200px; position: absolute; top:0; left: 0; margin-left: -1px; margin-top: -1px;}.minBlock{ height: 8px; width: 8px; background:#fff; position: absolute;}.nw{ left: -4px; top: -4px; cursor:nw-resize ;}.n{ left: 50%; margin-left: -4px; top: -4px; cursor: n-resize;}.ne{ left: 100%; margin-left: -4px; top: -4px; cursor: ne-resize;}.w{ top: 50%; margin-top: -4px; left: -4px; cursor: w-resize;}.sw{ top: 100%; margin-top: -4px; left: -4px; cursor: sw-resize;}.e{ left: 100%; margin-left: -4px; top: 50%; margin-top: -4px; cursor: e-resize; }.se{ left: 100%; margin-left: -4px; top: 100%; margin-top: -4px; cursor: se-resize;}.s{ left: 50%; margin-top: -4px; margin-left: -4px; top: 100%; cursor: s-resize; }.pr{ float: right; position: relative; width: 300px; height: 200px;}.prPhoto{ display: none; position: absolute; left: 0; top:0; width: 500px; height: auto;}
