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

10 Nov 2023

axios

이미지 회전은 웹 애플리케이션에서 흔히 사용되는 기능 중 하나입니다. 클라이언트 측에서 이미지를 회전시키는 방법을 알아보겠습니다. 이 예제에서는 Axios를 사용하여 서버에 이미지를 업로드하고, 회전된 이미지를 다운로드 받는 방법을 다룰 것입니다.

1. 이미지 업로드

먼저, 사용자가 업로드한 이미지를 서버로 전송해야 합니다. 이를 위해 HTML에서 input 태그를 사용하여 파일을 선택하고, JavaScript의 FormData 객체를 사용하여 이미지를 서버로 전송합니다.

HTML:

<input type="file" id="imageUpload">
<button onclick="uploadImage()">이미지 업로드</button>

JavaScript:

function uploadImage() {
  const fileInput = document.getElementById("imageUpload");
  const file = fileInput.files[0];

  const formData = new FormData();
  formData.append("image", file);

  axios.post("/upload", formData, {
    headers: {
      "Content-Type": "multipart/form-data"
    }
  })
  .then(response => {
    console.log("이미지가 업로드되었습니다.");
  })
  .catch(error => {
    console.error("이미지 업로드 중 오류가 발생했습니다.", error);
  });
}

위의 코드에서 /upload는 이미지를 업로드하는 서버의 URL로 수정하여야 합니다.

2. 이미지 회전

이제 서버로부터 회전된 이미지를 다운로드 받는 방법을 알아보겠습니다. 서버는 이미지를 회전시킨 후 새로운 URL을 제공해야 합니다. 클라이언트는 이 URL을 사용하여 이미지를 다운로드 받습니다.

JavaScript:

function rotateImage(angle) {
  axios.get(`/rotate?angle=${angle}`)
  .then(response => {
    const rotatedImageUrl = response.data.imageUrl;

    const imageElement = document.getElementById("rotatedImage");
    imageElement.src = rotatedImageUrl;

    console.log("이미지가 회전되었습니다.");
  })
  .catch(error => {
    console.error("이미지 회전 중 오류가 발생했습니다.", error);
  });
}

위의 코드에서 /rotate는 회전된 이미지의 URL을 제공하는 서버의 URL로 수정하여야 합니다. angle 변수는 회전할 각도를 나타내는 매개변수입니다.

마무리

위의 코드를 사용하면 클라이언트 측에서 Axios를 이용하여 이미지를 회전시킬 수 있습니다. 이미지 업로드와 회전 기능을 구현할 때 추가적인 서버 측 로직이 필요하므로 참고하세요.

#axios #이미지회전