При перемещении курсора за пределы изображения, теряется событие mousedown
Как создать правильный обработчик?
Как запретить crop выход за пределы изображения?
Как добавить возможность изменения размера crop, при crop_image 256х160?
input = document.querySelector('.box input');
input.onchange = function() {
image = new Image();
image.src = window.URL.createObjectURL(this.files[0]);
this.parentNode.style = 'display: none';
document.querySelector('.box').innerHTML +=
"
" +
"
" + image.outerHTML + "
";
crop = document.querySelector('.crop');
crop_image = document.querySelector('.crop_image img');
crop.onmousedown = function() {
this.onmousemove = function(e) {
this.style.marginTop =
parseInt(this.style.marginTop) + e.movementY + 'px';
this.style.marginLeft =
parseInt(this.style.marginLeft) + e.movementX + 'px';
crop_image.style.marginTop = '-' + this.style.marginTop;
crop_image.style.marginLeft = '-' + this.style.marginLeft;
return false;
}
this.onmouseup = function() {
this.onmousemove = null;
}
}
}
.box {
position: relative;
width: 768px;
height: 256px;
background: #FFF;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .3);
padding: 2px;
}
.select {
position: absolute;
width: 100%;
cursor: pointer;
line-height: 256px;
text-align: center;
font-family: Segoe UI;
font-size: 20px;
font-weight: 300;
color: #C7254E;
}
.original_image img {
max-height: 256px;
}
.original_image {
position: relative;
float: left;
overflow: hidden;
max-height: 256px;
margin-right: 2px;
}
.crop {
position: absolute;
top: 0;
width: 256px;
height: 160px;
box-shadow: 0 0 0 512px rgba(0, 0, 0, .4);
cursor: move;
}
.crop_image img {
max-height: 256px;
}
.crop_image {
width: 256px;
height: 160px;
overflow: hidden;
}
Ответ
Нужно следить за сдвигом кропа внутри блока с изображением и не выпускать его за рамки относительно ширины изображения.
input = document.querySelector('.box input');
input.onchange = function() {
image = new Image();
image.src = window.URL.createObjectURL(this.files[0]);
this.parentNode.style = 'display: none';
document.querySelector('.box').innerHTML +=
"
" +
"
" + image.outerHTML + "
";
function getOffset(el) {
var _x = 0;
var _y = 0;
while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
_x += el.offsetLeft - el.scrollLeft;
_y += el.offsetTop - el.scrollTop;
el = el.offsetParent;
}
return {
top: _y,
left: _x
};
}
image.addEventListener("load", function() {
var original = document.querySelector('.original_image');
var min_left = 0;
var min_top = 0;
var max_right = original.offsetWidth;
var max_bottom = original.offsetHeight;
crop = document.querySelector('.crop');
crop_image = document.querySelector('.crop_image img');
crop.onmousedown = function() {
this.onmousemove = function(e) {
var top = ((parseInt(this.style.marginTop) + e.movementY) < min_top) ? min_top : (parseInt(this.style.marginTop) + e.movementY);
if (top + crop.offsetHeight > max_bottom) {
top -= (top + crop.offsetHeight) - max_bottom;
}
this.style.marginTop = top + 'px';
var left = ((parseInt(this.style.marginLeft) + e.movementX) < min_left) ? min_left : (parseInt(this.style.marginLeft) + e.movementX);
if (left + crop.offsetWidth > max_right) {
left -= (left + crop.offsetWidth) - max_right;
}
this.style.marginLeft = left + 'px';
crop_image.style.marginTop = '-' + this.style.marginTop;
crop_image.style.marginLeft = '-' + this.style.marginLeft;
return false;
}
this.onmouseup = function() {
this.onmousemove = null;
this.onmouseleave = null;
this.onmouseup = null;
}
this.onmouseleave = function() {
this.onmousemove = null;
this.onmouseleave = null;
this.onmouseup = null;
}
}
});
}
.box {
position: relative;
width: 768px;
height: 256px;
background: #FFF;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .3);
padding: 2px;
}
.select {
position: absolute;
width: 100%;
cursor: pointer;
line-height: 256px;
text-align: center;
font-family: Segoe UI;
font-size: 20px;
font-weight: 300;
color: #C7254E;
}
.original_image img {
max-height: 256px;
}
.original_image {
position: relative;
float: left;
overflow: hidden;
max-height: 256px;
margin-right: 2px;
}
.crop {
position: absolute;
top: 0;
width: 256px;
height: 160px;
box-shadow: 0 0 0 512px rgba(0, 0, 0, .4);
cursor: move;
}
.crop_image img {
max-height: 256px;
}
.crop_image {
width: 256px;
height: 160px;
overflow: hidden;
}
Комментариев нет:
Отправить комментарий