camanjs не обрезает должным образом с отзывчивым изображением - PullRequest
Новая
       11

camanjs не обрезает должным образом с отзывчивым изображением

0 голосов
/ 31 января 2019

Я использую camanjs для обрезки изображения, см. Мой код ниже.

Все работает хорошо, кроме случаев обрезки изображения с max-width и max-height внутри контейнера элементов с фиксированной высотойи ширина, это не захватывает область, которую я даю на x,y аргументах.Похоже, что он выполняет обрезку от оригинальной ширины и высоты изображения.

Есть идеи? 

document.querySelector('input').onchange = function(){
	
  let reader = new FileReader();
  
  reader.onload = function(e){
  
  	let img = document.createElement('img');
    img.setAttribute('id','img');
    img.src = e.target.result;
  	
   	document.querySelector('#image-container').appendChild(img);
    dragCropBox();
  }
  
  reader.readAsDataURL(this.files[0]);

}
document.querySelector('#cropbtn').onclick = function(){

	Caman('#img',function(){
  	let cropbox = document.querySelector('#cropbox');
  	this.crop( cropbox.offsetWidth, cropbox.offsetHeight,cropbox.offsetLeft, cropbox.offsetTop )
  });  
}
function dragCropBox(){

  let dragItem = document.querySelector("#cropbox");
  let container = document.querySelector('#image-container');

  let active = false;
  let currentX;
  let currentY;
  let initialX;
  let initialY;
  let xOffset = 0;
  let yOffset = 0;

  container.addEventListener("touchstart", dragStart, false);
  container.addEventListener("touchend", dragEnd, false);
  container.addEventListener("touchmove", drag, false);

  container.addEventListener("mousedown", dragStart, false);
  container.addEventListener("mouseup", dragEnd, false);
  container.addEventListener("mousemove", drag, false);


  function dragStart(e) {
    if (e.type === "touchstart") {
      initialX = e.touches[0].clientX - xOffset;
      initialY = e.touches[0].clientY - yOffset;
    } else {
      initialX = e.clientX - xOffset;
      initialY = e.clientY - yOffset;
    }

    if (e.target === dragItem) {
      active = true;
    }

  }

  function dragEnd(e) {
    initialX = currentX;
    initialY = currentY;

    active = false;
  }

  function drag(e) {
    if (active) {

      e.preventDefault();

      if (e.type === "touchmove") {
        currentX = e.touches[0].clientX - initialX;
        currentY = e.touches[0].clientY - initialY;
      } else {
        currentX = e.clientX - initialX;
        currentY = e.clientY - initialY;
      }

      xOffset = currentX;
      yOffset = currentY;

      setTranslate(currentX, currentY, dragItem);
    }
  }

  function setTranslate(xPos, yPos, el) {
    el.style.top = yPos+'px';
    el.style.left = xPos+'px';
  }
}
body{
  background: #ccc;
}
#image-container{
  width:500px;
  position:relative;
  overflow:hidden;
}
img{
  display:block;
  max-width:100%;
  max-height:100%;
}
#cropbox{
  position:absolute;
  width: 150px;
  height:150px;
  background: rgba(255,255,255,.3);
  top: 0px;
  border:2px solid #FFF;
  left: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js"></script>
<input type="file">
<button id="cropbtn">Crop now</button>
<div id="image-container">
  <div id="cropbox"></div>
</div>

JsFiddle: https://jsfiddle.net/mejuliver/Ltojk7rc/14/.

...