Axios를 사용하여 클라이언트 측에서 이미지 크롭하기

10 Nov 2023

axios

이미지 크롭은 웹 애플리케이션에서 자르기 기능을 제공하는 중요한 요소입니다. 클라이언트 측에서 이미지를 크롭하는 방법 중 하나는 Axios 라이브러리를 사용하는 것입니다. Axios는 웹 브라우저와 서버 간의 HTTP 통신을 간편하게 처리할 수 있는 JavaScript 라이브러리입니다.

1. 이미지 업로드

먼저, 클라이언트 측에서 이미지를 서버로 업로드해야 합니다. 이를 위해 <input type="file"> 태그를 사용하고, 사용자가 이미지를 선택했을 때 이를 서버로 전송하는 코드를 작성합니다.

const uploadImage = async (image) => {
  const formData = new FormData();
  formData.append('image', image);

  try {
    const response = await axios.post('/upload', formData);
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
};

const fileInput = document.getElementById('image-input');
fileInput.addEventListener('change', (event) => {
  const image = event.target.files[0];
  uploadImage(image);
});

2. 이미지 크롭

이제 클라이언트 측에서 이미지를 크롭해야 합니다. 이를 위해 클라이언트 측에서 선택한 이미지를 서버로 전송하고, 서버에서 이미지를 크롭하여 새로운 이미지를 생성한 후 클라이언트로 다시 전송하는 코드를 작성합니다.

const cropImage = async (imageData, cropData) => {
  try {
    const response = await axios.post('/crop', {
      image: imageData,
      crop: cropData,
    })
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
};

// 서버로부터 전송받은 이미지 데이터
const imageData = "...";

// 이미지를 자를 영역 좌표
const cropData = {
  x: 100,
  y: 100,
  width: 200,
  height: 200,
};

cropImage(imageData, cropData);

위의 코드는 이미지 데이터와 자를 영역의 좌표를 서버로 전송하고, 서버에서는 전송받은 이미지를 해당 좌표로 크롭한 후 새로운 이미지 데이터를 클라이언트로 다시 전송하는 예시입니다.

이제 클라이언트 측에서 이미지를 업로드하고 크롭하는 방법을 알게 되었습니다. Axios를 사용하면 간편하게 이미지 처리 기능을 구현할 수 있으며, 웹 애플리케이션에서 다양한 기능을 제공할 수 있습니다.

#참고자료

Axios: https://github.com/axios/axios
FormData: https://developer.mozilla.org/ko/docs/Web/API/FormData