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

10 Nov 2023

axios

많은 웹 애플리케이션에서 이미지를 다루는 일은 흔한 일입니다. 이미지를 다루는 중 하나의 일은 이미지의 크기를 조정하는 것입니다. 사용자에게 최적화된 이미지를 제공하기 위해 클라이언트 측에서 이미지 크기를 조정하는 방법에 대해 알아보겠습니다.

Axios란?

Axios는 크로스 플랫폼 네트워크 라이브러리로, 브라우저와 Node.js에서 모두 사용할 수 있습니다. Axios를 사용하면 쉽게 HTTP 요청을 만들고 응답을 받을 수 있습니다. 이를 사용하여 이미지를 다운로드하고 크기를 조정할 수 있습니다.

이미지 크기 조정하기

Axios를 사용하여 클라이언트 측에서 이미지 크기를 조정하기 위해 이미지를 다운로드하고 HTML의 <canvas> 요소를 사용하여 조정할 수 있습니다.

일단 이미지를 다운로드하기 위해 axios 패키지를 설치해야 합니다. 다음 명령어를 사용하여 설치할 수 있습니다:

npm install axios

다음은 Axios를 사용하여 이미지를 다운로드하고 크기를 조정하는 예제 코드입니다:

import axios from 'axios';

const downloadAndResizeImage = async (imageUrl, maxWidth, maxHeight) => {
  // 이미지 다운로드
  const response = await axios.get(imageUrl, {
    responseType: 'arraybuffer',
  });

  // 이미지를 <canvas>에 그리기
  const imageBuffer = Buffer.from(response.data, 'binary');
  const image = new Image();
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  image.onload = () => {
    // 이미지 크기 조정
    let width = image.width;
    let height = image.height;

    if (width > maxWidth) {
      height *= maxWidth / width;
      width = maxWidth;
    }

    if (height > maxHeight) {
      width *= maxHeight / height;
      height = maxHeight;
    }

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

    // 조정된 크기로 이미지 그리기
    context.drawImage(image, 0, 0, width, height);

    // 조정된 이미지 데이터 얻기
    const resizedImageData = canvas.toDataURL(response.headers["content-type"]);

    // 조정된 이미지 사용하기
    // ...
  };

  image.src = `data:${response.headers["content-type"]};base64,${imageBuffer.toString('base64')}`;
};

위의 코드에서 downloadAndResizeImage 함수는 이미지의 URL, 최대 너비 및 최대 높이를 인자로 받습니다. 이미지를 다운로드한 후, <canvas> 요소를 사용하여 이미지 크기를 조정합니다. 조정된 이미지는 resizedImageData 변수에 저장됩니다.

이제 이 조정된 이미지를 필요에 따라 사용할 수 있습니다.

마무리

Axios를 사용하여 클라이언트 측에서 이미지 크기를 조정하는 방법에 대해 알아보았습니다. 이미지 크기 조정은 사용자에게 최적화된 이미지를 제공하는 데 중요한 역할을 합니다. Axios를 사용하면 손쉽게 이미지를 다운로드하고 크기를 조정할 수 있습니다.

#wedevelopers #axios