Moving the mouse (crop image)

[rielyn]

When the courseor moves beyond the image, the event is lost mousedown♪

How to create the right processor?
How to ban crop Outside the picture?
Add the possibility of changing size cropWhen 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 +=
"<div class='original_image'>" + image.outerHTML +
"<div class='crop' style='margin: 0px 0px'></div></div>" +
"<div class='crop_image'>" + image.outerHTML + "</div>";

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;

}

<div class='box'>

<label class='select'><a>выбрать изображение</a>

<input type='file' accept='image/*' style='display: none'>

</label>

</div>

[Bogopo]

We need to keep track of the rabbit in the imaging block and keep it out of the relative width of the image.

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 +=

"<div class='original_image'>" + image.outerHTML +

"<div class='crop' style='margin: 0px 0px'></div></div>" +

"<div class='crop_image'>" + image.outerHTML + "</div>";
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) &lt; min_top) ? min_top : (parseInt(this.style.marginTop) + e.movementY);

    if (top + crop.offsetHeight &gt; max_bottom) {
      top -= (top + crop.offsetHeight) - max_bottom;
    }

    this.style.marginTop = top + 'px';

    var left = ((parseInt(this.style.marginLeft) + e.movementX) &lt; min_left) ? min_left : (parseInt(this.style.marginLeft) + e.movementX);

    if (left + crop.offsetWidth &gt; 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;

}

<div class='box'>

<label class='select'><a>выбрать изображение</a>

<input type='file' accept='image/*' style='display: none'>

</label>

</div>