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

10 Nov 2023

axios

이미지를 웹 애플리케이션에서 효과적으로 표시하기 위해 이미지 비율을 조정해야 할 때가 있습니다. 클라이언트 측에서 이미지를 비율 조정하는 방법 중 하나는 Axios를 사용하는 것입니다. Axios는 널리 사용되는 JavaScript 라이브러리로, 웹 애플리케이션에서 HTTP 요청을 보내고 응답을 처리하는 것을 도와줍니다.

이번 블로그 포스트에서는 Axios를 사용하여 클라이언트 측에서 이미지 비율을 조정하는 방법을 살펴보겠습니다.

Axios 설치

먼저, Axios를 사용하기 위해 프로젝트에 Axios를 설치해야 합니다. 프로젝트 디렉토리에서 다음 명령을 실행하여 Axios를 설치할 수 있습니다:

npm install axios

이미지 비율 조정하기

이미지 비율 조정을 위해, 우리는 이미지의 원래 크기와 표시하고자 하는 크기를 알아야 합니다. 이미지의 비율을 유지하기 위해, 우리는 이미지의 너비와 높이 비율을 계산하여 새로운 크기를 결정할 수 있습니다.

다음은 이미지 비율을 조정하는 함수의 예시 코드입니다. 이 함수는 Axios를 사용하여 이미지를 불러온 후, 비율을 계산하여 새로운 크기로 조정한 후 화면에 표시합니다.

import axios from 'axios';

const imageUrl = 'https://example.com/image.jpg';
const maxWidth = 500;
const maxHeight = 300;

axios.get(imageUrl, { responseType: 'arraybuffer' })
  .then(response => {
    const originalSize = response.data.byteLength;
    
    const image = new Image();
    image.onload = () => {
      const originalWidth = image.width;
      const originalHeight = image.height;
      
      let newWidth, newHeight;
      if (originalWidth > originalHeight) {
        newWidth = maxWidth;
        newHeight = originalHeight * (maxWidth / originalWidth);
      } else {
        newHeight = maxHeight;
        newWidth = originalWidth * (maxHeight / originalHeight);
      }
      
      const canvas = document.createElement('canvas');
      canvas.width = newWidth;
      canvas.height = newHeight;
      
      const context = canvas.getContext('2d');
      context.drawImage(image, 0, 0, newWidth, newHeight);
      
      const resizedImage = canvas.toDataURL('image/jpeg');
      
      // 화면에 이미지 표시
      const imgElement = document.createElement('img');
      imgElement.src = resizedImage;
      document.body.appendChild(imgElement);
    };
    
    const blob = new Blob([response.data], { type: 'image/jpeg' });
    image.src = URL.createObjectURL(blob);
  })
  .catch(error => {
    console.error('이미지 로드 실패:', error);
  });

이 코드는 Axios를 사용하여 이미지를 불러온 후, 이미지의 크기를 계산하고 비율을 유지하면서 새로운 크기로 조정합니다. 마지막으로, 조정된 이미지를 화면에 표시합니다.

위의 예시 코드는 이미지를 JPEG 형식으로 조정하고, 최대 너비와 높이를 500과 300으로 설정했습니다. 필요에 따라 이 값을 변경할 수 있습니다.

결론

Axios를 사용하여 클라이언트 측에서 이미지 비율을 조정하는 방법을 살펴보았습니다. 이미지 비율 조정은 웹 애플리케이션에서 이미지를 효과적으로 표시하기 위해 중요한 작업입니다. Axios를 활용하여 이미지 비율을 조정하면 사용자 경험을 향상시킬 수 있습니다. 이를 통해 이미지가 화면에 잘 맞게 표시되고 로딩 시간이 단축될 수 있습니다.

이번 포스트는 Axios를 사용하여 클라이언트 측에서 이미지 비율 조정하는 방법을 소개했습니다. 이를 활용하여 웹 애플리케이션에서 이미지를 효율적으로 표시할 수 있기를 바랍니다.

References: