이미지 에디터 만들기

네이버 이미지 에디터 참고

기본

  <script src="https://unpkg.com/cropperjs@1.5.13/dist/cropper.min.js"></script>

기본 html

  <div class="container">
    <div class="img-container">
      <img src="./images/di.png" />
    </div>
  </div>

js

function setCropper() {
   const image = document.querySelector('.img-container img')
   const cropper = new Cropper(image, {
      viewMode: 2,
      dragMode: 'move',
      autoCropArea: 1,
      background: false,
      zoomOnWheel: false,
      responsive: false,
  });
  return cropper;
}

window.addEventListener('DOMContentLoaded', () => {
	const cropper = setCropper();
}

크롭 리셋

document.querySelector('.reset').addEventListener('click', () => {
	cropper.reset();
    cropper.autoCrop = true;
})

크롭 적용

document.querySelector('.complete').addEventListener('click', () => {
    const canvas = cropper.getCroppedCanvas({
        fillColor: '#fff',
        rounded: true,
        maxWidth: 1500,
        maxHeight: 1500,
     });

     const dataURL = canvas.toDataURL('image/jpeg');
     const img = document.createElement('img');
     img.src = dataURL;
     document.querySelector('.preview').appendChild(img);
})

크롭 회전/반전

//회전 영역 
document.querySelector('.rotate90').addEventListener('click', () => {
   cropper.rotate(90);
})

document.querySelector('.rotate-90').addEventListener('click', () => {
   cropper.rotate(-90);
})

document.querySelector('.scale-x').addEventListener('click', () => {
  	cropper.scaleX(-1);
})

let isFlippedX = false;
let isFlippedY = false;

document.querySelector('.scale-y').addEventListener('click', () => {
    isFlippedY = !isFlippedY;
    cropper.scaleY(isFlippedY ? -1 : 1);
})

document.querySelector('.scale-x').addEventListener('click', () => {
   isFlippedX = !isFlippedX;
   cropper.scaleX(isFlippedX ? -1 : 1);
})

크롭 종횡비

<div class="group">
  <button class="aspect selected" data-ratio="NaN">
     <span class="ico"></span>
     <span class="text">자유</span>
  </button>
  <button class="aspect" data-ratio="16/9">
     <span class="ico"></span>
     <span class="text">16:9</span>
  </button>
  <button class="aspect" data-ratio="3/2">
     <span class="ico"></span>
     <span class="text">3:2</span>
  </button>
  <button class="aspect" data-ratio="1/1">
      <span class="ico"></span>
      <span class="text">1:1</span>
  </button>
</div>

const arr = document.querySelectorAll('.aspect');
  arr.forEach((ele) => {
     ele.addEventListener('click', () => {
   	   const ratioText = ele.dataset.ratio;
          let ratio;
          if (ratioText === 'NaN') {
            ratio = NaN;
          } else {
            const [w, h] = ratioText.split('/').map(Number);
            ratio = w / h;
        }
       cropper.setAspectRatio(ratio);
  	});
  });