Moving the mouse (crop image)



  • 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>

    shitListener



  • 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>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2