js图片裁切

扫码查看

js的图片裁切只支持移动和右下拉

html部分

<div id="box" class="box">
<img class="img1" src="1.jpg"/>
<div class="main" id="main">
<div id="left-up" class="minDiv left-up"></div>
<div id="left" class="minDiv left"></div>
<div id="left-down" class="minDiv left-down"></div>
<div id="up" class="minDiv top"></div>
<div id="right-up" class="minDiv right-up"></div>
<div id="right" class="minDiv right"></div>
<div id="right-down" class="minDiv right-down"></div>
<div id="down" class="minDiv bottom"></div>
</div>
</div>
<div id="preview">
<img id="img3" class="img3" src="1.jpg" style="top: 0px; left: 0px; clip: rect(0px 202px 202px 0px);" />
</div>

css部分

body{background: #333;margin:;padding:;}
.box{position: absolute;top:100px;left:200px;width:460px;height:360px;}
.main{position: absolute;width: 200px;height: 200px;border:1px solid #fff;z-index:;cursor: move;opacity: .3;background: #fff;}
.minDiv{width:8px;height:8px;background: #fff;font-size:;position: absolute;}
.minDiv.left-up{top:-4px;left: -4px;cursor:nw-resize;}
.minDiv.left{top:50%;margin-top:-4px;left: -4px;cursor:e-resize;}
.minDiv.left-down{bottom:-4px;left: -4px;cursor:sw-resize;}
.minDiv.top{top:-4px;left: 50%;margin-left:-4px;cursor:n-resize;}
.minDiv.right-up{top:-4px;right: -4px;cursor:ne-resize;}
.minDiv.right{top:50%;margin-top:-4px;right: -4px;cursor:e-resize;}
.minDiv.right-down{bottom:-4px;right: -4px;cursor:se-resize;}
.minDiv.bottom{bottom:-4px;left: 50%;margin-left:-4px;cursor:s-resize;}
img{position: absolute;z-index:}
.img2{clip:rect(0px,20px,100px,100px);}
#preview{position: absolute;top:100px;left:680px;width:460px;height:360px;}
#preview #img3{position: absolute;top:;left:;}

js部分

var main=document.getElementById('main');
var box=document.getElementById('box');
var rightdown=document.getElementById('right-down');
var leftup=document.getElementById('left-up');
var img3=document.getElementById('img3');
var cx='';
var cy='';
daer(main,main,'yd');//移动
daer(rightdown,main,'yx');//右下拉
function daer(obj,main,ws){
obj.onmousedown=function(e){
var e=window.event || e;//鼠标按下的坐标
cx=e.clientX-box.offsetLeft;
cy=e.clientY-box.offsetTop;
console.log(cx,cy);
document.onmousemove=function(e){
var e=window.event || e;//移动的坐标
if(ws=='yx'){
zcx=e.clientX-box.offsetLeft-main.offsetLeft;
zcy=e.clientY-box.offsetTop-main.offsetTop;
cx=main.offsetLeft;
cy=main.offsetTop;
main.style.width=zcx+'px';
main.style.height=zcy+'px';
img3.style.clip="rect("+cy+"px,"+parseInt(zcx+cx)+"px,"+parseInt(zcy+cy)+"px,"+cx+"px)";//clip裁切属性
}else if(ws=='yd'){
zcx=e.clientX-box.offsetLeft-main.offsetWidth/2;
zcy=e.clientY-box.offsetTop-main.offsetHeight/2;
cxw=main.offsetWidth;
cyh=main.offsetHeight;
main.style.top=zcy+'px';
main.style.left=zcx+'px';
img3.style.top=-zcy+'px';
img3.style.left=-zcx+'px';
img3.style.clip="rect("+zcy+"px,"+parseInt(cxw+zcx)+"px,"+parseInt(cyh+zcy)+"px,"+zcx+"px)";
}
}
document.onmouseup=function(e){
var e=window.event || e;//鼠标抬起的坐标
if(ws=='yx'){
cx=main.offsetLeft;
cy=main.offsetTop;
}else if(ws=='yd'){
cx=e.clientX-box.offsetLeft-main.offsetWidth/2;
cy=e.clientY-box.offsetTop-main.offsetHeight/2;
}
cxw=main.offsetWidth;
cyh=main.offsetHeight;
console.log(cx,cy,cxw,cyh);//cx是x坐标,cy是y坐标,cxw是宽,cyh是高
document.onmousemove=null;
}
stopEvt(e);
} }
//阻止冒泡
function stopEvt(e) {
e = e || window.event;
if(e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
}

效果图

js图片裁切-LMLPHP

05-22 15:20
查看更多