디아블로4 경매 사이트 만들기 (3) - 이미지 자르기 crop

개요

이전 포스팅에 이어 업로드한 이미지에 대해 원하는 부위를 자르는 방법에 대해 알아보자

crop 기능이라고 하는데 이것도 마찬가지로 라이브러리를 통해 간단히 구현할 수 있다.

 

https://github.com/react-cropper/react-cropper

GitHub - react-cropper/react-cropper: Cropperjs as React component

 

react-cropper 라이브러리를 사용할 것이다.

 

설치

npm install react-cropper

 

코드

App.js

import './App.css'
import { useState, useRef } from "react";
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';

function App() {
  const [imagePath, setImagePath] = useState("");
  const cropperRef = useRef(null);
  const [croppedImage, setCroppedImage] = useState(null);

  const handleChange = (e) => {
    const tempImagePath = URL.createObjectURL(e.target.files[0]);
    setImagePath(tempImagePath);
    showImage();
  }

  const handleDrop = (e) => {
    e.preventDefault()
    const tempImagePath = URL.createObjectURL(e.dataTransfer.files[0]);
    setImagePath(tempImagePath);
    showImage();
  }

  const handleCrop = () => {
    setImagePath(croppedImage);
  }

  const showImage = () => {
    document.querySelector('.input-div').style.display = 'none';
    document.querySelector('.output-div').style.display = 'flex';
    document.querySelector('.crop-Btn').style.display = 'block';
  }

  const onCrop = () => {
    const imageElement = cropperRef?.current;
    const cropper = imageElement?.cropper;
    setCroppedImage(cropper.getCroppedCanvas().toDataURL());
  };

  return (
    <div className="App">
      <div className="input-div" onDrop={handleDrop}>
        <p>여기로 이미지를 드래그하거나 <strong>클릭</strong>하세요.</p>
        <input type="file" className="file" onChange={handleChange} accept="image/jpeg, image/png, image/jpg"/>
      </div>

      <div className="output-div">
        <div className="canvas" id="canvas">
          {/* 기존 업로드한 이미지 */}
          {/* <img src={imagePath} alt='uploadImg'/> */}
          {/* crop 기능이 들어간 업로드한 이미지 */}
          <Cropper id='cropper' src={imagePath} crop={onCrop} ref={cropperRef} />
          {/* crop 후 이미지 */}
          {/* <img src={croppedImage} alt='cropped'/> */}
        </div>
      </div>

      <button className='crop-Btn' onClick={handleCrop}>Crop!</button>
    </div>
  );
}

export default App;

 

App.css

.input-div {
  width: 100%;
  height: 200px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 2px dotted black;
  background-color: white;
  position: relative;
}

.file {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.output-div {
  width: 100%;
  min-height: 150px;
  /* display: flex; */
  display: none;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 15px;
  position: relative;
  border-radius: 5px;
}

.output-div .image {
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.output-div .image img {
  height: 100%;
  width: 100%;
}

img {
  display: block;
  max-width: 100%;
}

.crop-Btn{
  height: 50px;
  width: 100px;
  display: none;
}

기존 코드와 합쳐져 좀 길어졌다.

더 자세한 코드 내용은 아래 링크 참고

https://github.com/cchoseonghun/Practice/tree/main/javascript/image/crop/test

GitHub - cchoseonghun/Practice

 

이미지 드래그&드롭 없이 크롭 기능만 간단하게 구현하려면 아래 사이트를 참고하길

딱 필요한 부분만 정리되어 있어 따라하기 좋다.

 

이렇게 프론트엔드쪽에서 무지했던 기능들에 대해 모두 알아보았다.

남은건 실제로 사용할 데이터들을 이미지로부터 얻어내고, 사용자 편의성을 추가하고 

디자인을 다듬은 후 서버를 따로 구현하여 실제 사이트를 만드는 것

 

이미지 용량에 대해서는 이 서비스를 실제로 얼마나 사용할지 모르니 추후 생각하기로

 

참고 사이트

https://velog.io/@bjy100/리액트-상개발자특-내-마음대로-이미지-잘라서-씀

[리액트] 상개발자특 내 마음대로 이미지 잘라서 씀