Передвижение элемента мышкой (crop image)

#javascript #css

При перемещении курсора за пределы изображения, теряется событие 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 +
    "
" +
    "
" + 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;
}

    выбрать изображение
        
    






    

Ответы

Ответ 1

Нужно следить за сдвигом кропа внутри блока с изображением и не выпускать его за
рамки относительно ширины изображения.



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 +
    "
" +
    "
" + 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;
}

  выбрать изображение
    
  



Ответ 2

Сохрани в какой-нибудь переменной координаты краев для crop_image (можно получить
через offcet-параметры: Xmin - offsetLeft, Xmax - offsetLeft+offsetWidth и т.д.), чтонибудь
вроде craya = {Xmin: 22, Xmax:222, Ymin:123, Ymax:433}

Далее, в onmousemove сравнивай положение курсора с craya.Xmin,craya.Xmax и т.д. -
причем, ставь проверку перед присваиванием значения: т.е. если  (mouseX >= Xmin &&
mouseY >= Ymin && mouseX <= Xmax && mouseY <= Ymax) то присваения значений происходит,
иначе - ничего не происходит (не забудь, может потребоваться поправка на скроллинг)