注意:img设置clip样式属性时要先设置position:absolute。
裁剪的效果其实由两张图叠加形成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片裁剪</title>
<style>
body {
background-color: grey;
}
.container {
position: relative;
width: 400px;
height: 200px;
}
#img1 {
opacity: 0.4;
position: absolute;
left: 0;
top: 0;
}
/* 两张图片的位置要一样 */
#img2 {
position: absolute;
left: 0;
top: 0;
/* 裁剪 */
clip: rect(0px, 102px, 102px, 0px);
}
#drag {
width: 100px;
height: 100px;
border: 1px solid white;
position: absolute;
left: 0;
top: 0;
cursor: move;
}
.stretch {
width: 6px;
height: 6px;
position: absolute;
background-color: white;
}
.tl-stretch {
cursor: nwse-resize;
left: 0;
top: 0;
transform: translate(-50%, -50%);
}
.t-stretch {
cursor: ns-resize;
left: 50%;
top: 0;
transform: translate(-50%, -50%);
}
.tr-stretch {
cursor: nesw-resize;
right: 0;
top: 0;
transform: translate(50%, -50%);
}
.r-stretch {
cursor: ew-resize;
right: 0;
top: 50%;
transform: translate(50%, -50%);
}
.br-stretch {
cursor: nwse-resize;
right: 0;
bottom: 0;
transform: translate(50%, 50%);
}
.b-stretch {
cursor: ns-resize;
left: 50%;
bottom: 0;
transform: translate(-50%, 50%);
}
.bl-stretch {
cursor: nesw-resize;
left: 0;
bottom: 0;
transform: translate(-50%, 50%);
}
.l-stretch {
cursor: ew-resize;
left: 0;
top: 50%;
transform: translate(-50%, -50%);
}
.show {
position: absolute;
left: 450px;
width: 400px;
height: 200px;
}
#img3 {
position: relative;
clip: rect(0px, 102px, 102px, 0px);
}
</style>
</head>
<body>
<div class="container">
<img id="img1" src="sensor.jpg" alt="猫咪老师" width="400" height="200">
<img id="img2" src="sensor.jpg" alt="猫咪老师" width="400" height="200">
<div id="drag">
<div id="tl-stretch" class="stretch tl-stretch"></div>
<div id="t-stretch" class="stretch t-stretch"></div>
<div id="tr-stretch" class="stretch tr-stretch"></div>
<div id="r-stretch" class="stretch r-stretch"></div>
<div id="br-stretch" class="stretch br-stretch"></div>
<div id="b-stretch" class="stretch b-stretch"></div>
<div id="bl-stretch" class="stretch bl-stretch"></div>
<div id="l-stretch" class="stretch l-stretch"></div>
</div>
<!-- 预览区 -->
<div class="show">
<img id="img3" src="sensor.jpg" alt="猫咪老师" width="400" height="200">
</div>
</div>
<script>
window.onload = function() {
// 禁止图片选中
// document.onselectstart = new Function('event.returnValue=false;');
document.onselectstart = function(e) {
var e = e || window.event;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
};
var drag = getDom("drag");
var img1 = getDom("img1");
var img2 = getDom("img2");
var img3 = getDom("img3");
// 拖拽drag裁剪窗口
drag.onmousedown = function(e) {
// 记下鼠标距离裁剪框左边和上边的距离
var disX = e.clientX - drag.offsetLeft;
var disY = e.clientY - drag.offsetTop;
document.onmousemove = function(e) {
var dragLeft = Math.min(img2.clientWidth - drag.offsetWidth, Math.max(0, e.clientX - disX));
var dragTop = Math.min(img2.clientHeight - drag.offsetHeight, Math.max(0, e.clientY - disY));
drag.style.left = dragLeft + 'px';
drag.style.top = dragTop + 'px';
setClip();
};
document.onmouseup = on_up;
};
// 点击向右延伸按钮
var rStretch = getDom("r-stretch");
rStretch.onmousedown = function(e) {
e.stopPropagation();
document.onmousemove = function(e) {
move_r(e);
setClip();
};
document.onmouseup = on_up;
};
// 向左延伸按钮
var lStretch = getDom("l-stretch");
lStretch.onmousedown = function(e) {
e.stopPropagation();
var maxLeft = drag.offsetLeft + drag.offsetWidth;
document.onmousemove = function(e) {
move_l(e, maxLeft);
setClip();
};
document.onmouseup = on_up;
};
// 向下延伸按钮
var bStretch = getDom("b-stretch");
bStretch.onmousedown = function(e) {
e.stopPropagation();
document.onmousemove = function(e) {
move_b(e);
setClip();
};
document.onmouseup = on_up;
};
// 向上延伸按钮
var tStretch = getDom("t-stretch");
tStretch.onmousedown = function(e) {
e.stopPropagation();
var maxTop = drag.offsetTop + drag.offsetHeight;
document.onmousemove = function(e) {
move_t(e, maxTop);
setClip();
};
document.onmouseup = on_up;
};
// 右下延伸按钮
var brStretch = getDom("br-stretch");
brStretch.onmousedown = function(e) {
e.stopPropagation();
document.onmousemove = function(e) {
// 裁剪窗口右边不能超出图片
move_r(e);
move_b(e);
setClip();
};
document.onmouseup = on_up;
};
// 左下按钮
var blStretch = getDom("bl-stretch");
blStretch.onmousedown = function(e) {
e.stopPropagation();
var maxLeft = drag.offsetLeft + drag.offsetWidth;
document.onmousemove = function(e) {
// 裁剪窗口右边不能超出图片
move_l(e, maxLeft);
move_b(e);
setClip();
};
document.onmouseup = on_up;
};
// 左上和右上省略
};
function getDom(id) {
return document.getElementById(id);
}
// 右移
function move_r(e) {
// 裁剪窗口右边不能超出图片
var maxW = img2.clientWidth - drag.offsetLeft - 2;
var dragW = e.clientX - drag.getBoundingClientRect().left;
drag.style.width = Math.min(Math.max(0, dragW), maxW) + 'px';
}
// 下移
function move_b(e) {
// 裁剪窗口下边不能超出图片
var maxH = img2.clientHeight - drag.offsetTop - 2;
var dragH = e.clientY - drag.getBoundingClientRect().top;
drag.style.height = Math.min(Math.max(0, dragH), maxH) + 'px';
}
// 左移
function move_l(e, maxLeft) {
// 裁剪窗口左边不能超出图片
var maxW = drag.offsetLeft + drag.offsetWidth - 2;
var disW = drag.getBoundingClientRect().left - e.clientX;
drag.style.width = Math.min(Math.max(0, drag.clientWidth + disW), maxW) + 'px';
drag.style.left = Math.max(Math.min(maxLeft, drag.offsetLeft - disW), 0) + 'px';
}
// 上移
function move_t(e, maxTop) {
// 裁剪窗口上边不能超出图片
var maxH = drag.offsetTop + drag.offsetHeight - 2;
var disH = drag.getBoundingClientRect().top - e.clientY;
drag.style.height = Math.min(Math.max(0, drag.clientHeight + disH), maxH) + 'px';
drag.style.top = Math.max(Math.min(maxTop, drag.offsetTop - disH), 0) + 'px';
}
// 设置图片的clip区域
function setClip() {
var top = drag.offsetTop,
right = drag.offsetLeft + drag.offsetWidth,
bottom = drag.offsetTop + drag.offsetHeight,
left = drag.offsetLeft;
img2.style.clip = 'rect(' + top + 'px, ' + right + 'px, ' + bottom + 'px, ' + left + 'px)';
img3.style.top = -top + 'px';
img3.style.left = -left + 'px';
img3.style.clip = 'rect(' + top + 'px, ' + right + 'px, ' + bottom + 'px, ' + left + 'px)';
}
// 解绑
function on_up() {
document.onmousemove = null;
document.onmouseup = null;
}
</script>
</body>
</html>