자바스크립트와 React.js를 활용한 웹 기반 사진 편집기 구현하기

09 Nov 2023

reactjs

지금은 사진을 편집하는 데에는 다양한 도구와 앱이 있지만, 자신만의 사진 편집기를 만들어 보는 것은 매우 흥미로운 프로젝트일 수 있습니다. 이 글에서는 자바스크립트와 React.js를 사용하여 웹 기반의 사진 편집기를 구현하는 방법에 대해 알아보겠습니다.

사진 편집기의 기능

우리가 만들 사진 편집기에는 다음과 같은 기능들이 필요합니다:

사진 불러오기
크롭 기능
회전 기능
필터 적용
사진 저장하기

물론 이 외에도 다양한 기능을 추가할 수 있습니다. 이제 각 기능을 차례대로 구현하고자 합니다.

자바스크립트와 React.js를 사용한 구현

1. 사진 불러오기

먼저, 사용자가 웹 사이트에 접속한 후 사진을 선택할 수 있는 파일 선택 창을 띄워야 합니다. 이를 위해 HTML의 input 태그와 자바스크립트의 FileReader API를 사용할 수 있습니다. 사용자가 사진 파일을 선택하고 업로드한 후, 해당 파일을 읽어오는 함수를 작성합니다.

const handleFileUpload = (event) => {
  const file = event.target.files[0];

  if (file && file.type.startsWith('image/')) {
    const reader = new FileReader();
    reader.onload = (e) => {
      const image = document.getElementById('preview-image');
      image.src = e.target.result;
    };
    reader.readAsDataURL(file);
  }
};

<input type="file" accept="image/*" onChange={handleFileUpload} />
<img id="preview-image" src="" alt="Preview" />

2. 크롭 기능

다음으로, 사용자가 선택한 사진을 특정 영역으로 크롭할 수 있는 기능을 추가하겠습니다. 이를 위해 React.js의 useState 훅과 canvas 요소를 활용합니다.

const [cropData, setCropData] = useState({
  x: 0,
  y: 0,
  width: 0,
  height: 0,
});

const handleCrop = () => {
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');
  const image = document.getElementById('preview-image');

  canvas.width = cropData.width;
  canvas.height = cropData.height;

  context.drawImage(
    image,
    cropData.x,
    cropData.y,
    cropData.width,
    cropData.height,
    0,
    0,
    cropData.width,
    cropData.height
  );
};

<canvas id="canvas"></canvas>
<button onClick={handleCrop}>Crop</button>

3. 회전 기능

사용자가 선택한 사진을 원하는 각도로 회전할 수 있는 기능을 추가합니다. 이를 위해 canvas 요소와 사용자로부터 입력받은 각도를 활용합니다.

const [rotateDegree, setRotateDegree] = useState(0);

const handleRotate = () => {
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');
  const image = document.getElementById('preview-image');

  canvas.width = image.width;
  canvas.height = image.height;

  context.clearRect(0, 0, canvas.width, canvas.height);
  context.save();
  context.translate(canvas.width / 2, canvas.height / 2);
  context.rotate((rotateDegree * Math.PI) / 180);
  context.drawImage(image, -canvas.width / 2, -canvas.height / 2);
  context.restore();
};

<input
  type="number"
  value={rotateDegree}
  onChange={(e) => setRotateDegree(Number(e.target.value))}
/>
<button onClick={handleRotate}>Rotate</button>

4. 필터 적용

사용자가 선택한 사진에 다양한 필터를 적용할 수 있는 기능을 추가합니다. CSS의 filter 속성을 사용하여 간단하게 구현할 수 있습니다.

const [filter, setFilter] = useState('none');

const handleFilter = () => {
  const image = document.getElementById('preview-image');
  image.style.filter = filter;
};

<select value={filter} onChange={(e) => setFilter(e.target.value)}>
  <option value="none">None</option>
  <option value="blur(3px)">Blur</option>
  <option value="brightness(150%)">Brightness</option>
  <option value="grayscale(100%)">Grayscale</option>
  <option value="sepia(100%)">Sepia</option>
</select>
<button onClick={handleFilter}>Apply Filter</button>

5. 사진 저장하기

마지막으로 사용자가 수정한 사진을 다운로드할 수 있는 기능을 추가합니다. canvas 요소의 toDataURL 메소드를 사용하여 사진을 저장할 수 있습니다.

const handleSave = () => {
  const canvas = document.getElementById('canvas');
  const link = document.createElement('a');
  link.href = canvas.toDataURL('image/png');
  link.download = 'edited_image.png';
  link.click();
};

<button onClick={handleSave}>Save Image</button>

마무리

이제 우리는 자바스크립트와 React.js를 사용하여 간단한 웹 기반 사진 편집기를 구현하는 방법을 알아보았습니다. 이를 기반으로 여러분은 본인만의 사진 편집기를 추가 기능을 구현하여 만들어 볼 수 있습니다. 다양한 자바스크립트 라이브러리와 기술을 활용하여 더욱 화려하고 다양한 기능을 가진 사진 편집기를 만들어 보는 것도 재미있을 것입니다. Happy coding!