React cropper를 간단하게 만드는 방법

catca·2022년 5월 12일
2
post-thumbnail

react-cropper-custom npmjs

개인 프로젝트를 진행하며 crop 기능이 필요하여 라이브러리를 사용했었는데 불편한 점이 있어 불편한 점을 해결한 새로운 라이브러리를 만들어 소개합니다.

데모 페이지

개인 프로젝트에서 사용했던 라이브러리는 react-easy-crop입니다. 해당 라이브러리를 개선하였습니다. 크롭 시 자르는 영역을 조정하는 것은 react-easy-crop에서 이미 잘 구현해 놓아서, 영역의 크기는 그대로 유지하고, 자르려는 이미지를 조정하는 것을 중점으로 구현하였습니다!

💻 기능

  1. 이미지 확대(pinch zoom, scroll)
  2. 이미지 이동(drag, swipe)
  3. 크롭 이미지 크기 자동 설정(object-fit: cover)
  4. 이미지 이동 애니메이션

1. 환경 설정

번들러는 rollup을 사용했습니다. 다른 사람의 boilerplate를 사용하다 npm link가 적용이 안 돼서, 공부하여 boilerplate를 새로 만들어서 적용했습니다.
환경 설정은 아래 글 참고해주세요.

npm 배포를 위한 보일러플레이트

2. 추가 기능 설명

크롭 이미지 크기 자동 설정

이미지의 실제 크기의 비율과 자르기 영역의 비율을 바탕으로 계산하여 자르기 영역에 맞게 자동으로 크기를 키워줍니다. 마치 cssobject-fit: cover를 사용하는 것처럼 동작합니다.
자르기 영역을 px 값으로 지정하여 사용할 수 있고, 지정을 하지 않을 경우 자동으로 반응형에 맞게 가득찹니다.

반응형 예시

이미지 이동 애니메이션

자연스러운 이미지 드래그를 위해 추가했습니다. 자르기 영역 너머로 드래그가 가능하지만 Math.pow(position, 0.7)만큼 transform이 제한됩니다. 또한 그 위치에서 마우스나 터치를 놓으면 자르기 영역에 따른 제한 영역으로 transition: 0.2s되어 돌아갑니다.

function flexiblePositionCoord(
  position: number,
  imageSize: number,
  mediaSize: number,
  zoom: number,
): number {
  const maxPosition = (mediaSize * zoom) / 2 - imageSize / 2;
  if (position > maxPosition) return maxPosition + (position - maxPosition) ** 0.7;
  if (position < -maxPosition) return -maxPosition - (-(position + maxPosition)) ** 0.7;
  return position;
}

3. 끝맺음

라이브러리를 만드는 동안 너무 재밌었습니다. 더 빠르게 알리고 싶었는데 설명서 작성하고, 문서 만들고, 데모 사이트 만드는데 너무 오래 걸렸네요.. 그래도 끝맺음 목차까지 작성하게 되어 엄청 만족합니다.

라이브러리 많이 사용해주세요.😄

📌 현재 1.2.4 버전까지 업데이트하며 제 눈에 보이는 오류는 모두 수정하였습니다. 하지만 미처 발견하지 못한 오류를 발견할 경우 댓글이나 git issue로 남겨 주세요!
✨ 또한 추가적으로 들어갔으면 하는 기능들도 알려주세요! 최대한 반영해볼게요.

profile
초보 개발자

0개의 댓글