개인 프로젝트를 진행하며 crop 기능이 필요하여 라이브러리를 사용했었는데 불편한 점이 있어 불편한 점을 해결한 새로운 라이브러리를 만들어 소개합니다.
개인 프로젝트에서 사용했던 라이브러리는 react-easy-crop입니다. 해당 라이브러리를 개선하였습니다. 크롭 시 자르는 영역을 조정하는 것은 react-easy-crop에서 이미 잘 구현해 놓아서, 영역의 크기는 그대로 유지하고, 자르려는 이미지를 조정하는 것을 중점으로 구현하였습니다!
💻 기능
- 이미지 확대(pinch zoom, scroll)
- 이미지 이동(drag, swipe)
- 크롭 이미지 크기 자동 설정(object-fit: cover)
- 이미지 이동 애니메이션
1. 환경 설정
번들러는 rollup을 사용했습니다. 다른 사람의 boilerplate를 사용하다 npm link가 적용이 안 돼서, 공부하여 boilerplate를 새로 만들어서 적용했습니다.
환경 설정은 아래 글 참고해주세요.
2. 추가 기능 설명
크롭 이미지 크기 자동 설정
이미지의 실제 크기의 비율과 자르기 영역의 비율을 바탕으로 계산하여 자르기 영역에 맞게 자동으로 크기를 키워줍니다. 마치 css의 object-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로 남겨 주세요!
✨ 또한 추가적으로 들어갔으면 하는 기능들도 알려주세요! 최대한 반영해볼게요.
