本文是利用一个css的属性clip,我肯定有很多人都不知道这个属性,因为这个属性用到的太少了,只是在特定的条件下才会用到这个属性。这里我就跟大家大致的说一下它的用法,想要了解更多这个属性的可以去查阅一下资料,在这里跟不跟大家说了。这里主要是讲如何利用这个属性实现选取图片的功能。
想要了解clip 这个属性,首先要知道这个属性的语法:clip:rect(top,right,bottom,left),clip属性的特点就是只显示这些值包裹的区域,其他的区域全都隐藏。
选取图片这个功能大只分为三个部分:
第一个部分:就是只用作展示的一张图片,这张图片上不做任何的功能处理。
第二个部分:也是一张图片,这张图片覆盖在第一章图片的上面,利用clip属性只显示选取的部分,其他的隐藏。
第三个部分:是利用canvas的图片接口把选择的图片区域绘制在预览区域
大致的效果如图所示:
接下来直接上代码,本人是初学者,能力有限,欢迎各位大神指点。
HTML部分:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片裁剪</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部分:
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部分:
window.onload = function(){ document.onselectstart = new Function('event.returnValue=false;');//禁止图片被选中 var box = document.getElementById('box'); var rightDiv = document.getElementById('right');//右边触点 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;//鼠标按下状态 var contact = "";//表示被按下的触点 setChoice(); //鼠标按下事件 rightDiv.onmousedown = function(e){ e.stopPropagation();//阻止事件冒泡 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"; } //鼠标松开事件 window.onmouseup = function(){ ifKeyDown = false; contact = ""; } //鼠标移动事件 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(); } //选取框按下拖拽事件 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; } //设置选取区域高亮可见 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(); } //获取图片的缩放比例 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}; } //预览函数 function setPreview(){ var l = mainDiv.offsetLeft;//选取框左上角的坐标 var t = mainDiv.offsetTop; var tt = right_down.offsetTop - right_up.offsetTop;//选取框的高度 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); } } //右边移动 function rightMove(e){ var x = e.clientX;//鼠标X坐标s if (x > getPosition(box).left + box.offsetWidth) { x = getPosition(box).left + box.offsetWidth; } var widthBefore = mainDiv.offsetWidth-2;//选取框变换前的宽度 var addWidth = "";//鼠标移动后选取框增加的宽度 addWidth = x - getPosition(mainDiv).left - widthBefore;//鼠标移动后增加的宽度 mainDiv.style.width = addWidth + widthBefore +"px";//选取框变换后的宽度 } //上边移动 function upMove(e){ var y = e.clientY;//鼠标纵坐标 if(y < getPosition(box).top){ y = getPosition(box).top; } var heightBefore = mainDiv.offsetHeight - 2;//原来的高度 var mainY = getPosition(mainDiv).top;//选取框相对于屏幕上边的距离 var addHeight = mainY - y;//增加的高度 mainDiv.style.height = heightBefore + addHeight +"px"; mainDiv.style.top = mainDiv.offsetTop - addHeight +"px"; } //下边移动 function downMove(e){ var y = e.clientY;//鼠标纵坐标 if(y > getPosition(box).top + box.offsetHeight){ y = getPosition(box).top + box.offsetHeight } var heightBefore = mainDiv.offsetHeight - 2;//选取框变换之前的高度 var mainY = getPosition(mainDiv).top;//选取框相对于父级的高度 var addHeight = y - heightBefore - mainY;//增加的高度 mainDiv.style.height = addHeight +heightBefore + "px"; } //左边移动 function leftMove(e){ var x = e.clientX;//鼠标的坐标 if(x < getPosition(box).left){ x = getPosition(box).left; } var widthBefore = mainDiv.offsetWidth - 2;//选框变化前的宽度 var mainX = getPosition(mainDiv).left; var addWidth = mainX - x ;//增加的宽度 mainDiv.style.width = widthBefore + addWidth +"px";//选款变换后的宽度 mainDiv.style.left = mainDiv.offsetLeft - addWidth +"px"; } } //获取元素相对于屏幕左边的距离 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}; }