Typescript - 이미지를 Base64로 인코딩

Base64는 데이터를 안전하게 전송하고 저장하기 위한 인코딩 방식 중 하나입니다. 이 방식은 바이너리 데이터를 텍스트 형태로 변환하여 안정적으로 전송하거나 저장할 수 있게 해줍니다. 그래서 파일을 Base64로 인코딩하면, 이진 데이터를 텍스트 데이터로 변환하여 안전하게 전송하거나 저장할 수 있습니다.

이 글에서는 파일을 Base64로 인코딩하는 방법에 대해 알아보겠습니다. Base64 인코딩은 프로그래밍 언어에서도 많이 사용되므로, 이 글을 통해 기본적인 사용 방법을 익히면 다양한 프로그래밍 언어에서 파일을 안전하게 다룰 수 있습니다.

Image to Base64

이미지를 base64로 변환하게 된다면 따로 서버에 파일을 저장하지 않고도, 단순한 텍스트로 이미지 파일을 불러올 수 있습니다.
아래는 API response 를 arraybuffer로 받아온 데이터에 대한 base64 변환 예시 입니다.

먼저 이미지 파일을 arraybuffer로 가져와야 합니다.

export const getImageFile = () => {
  return axios.create({
    timeout: 10 * 1000,
    url: '/image',
    method: 'GET'
    responseType: 'arraybuffer',
  });
}

그리고 가져온 데이터에 대해서 아래 함수에 데이터를 보내 base64로 변환 처리를 합니다.

export function imageToBase64(file: ArrayBuffer): Promise<string> {
  return new Promise((res, rej) => {
    const blob = new Blob([file], { type: 'image/png' });
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = () => {
      const base64String = reader.result;
      res(base64String as string);
    };
  });
}

그리고 위에서 작성한 메서드를 토대로 가져온 데이터를 image src 에 적용 시켜주면 화면에서 base64로 인코딩 된 데이터를 불러올 수 있습니다.

const response = await getImageFile();
const imageData = await imageToBase64(response.data);

<img :src="imageData">

이런 식으로 활용하면 불러온 이미지 파일을 base64로 변환하여 사용할 수 있게 됩니다.

File to Base64

이미지 외의 파일의 경우에는 아래와 같이 활용할 수 있습니다.

export function fileToBase64(file: File) {
  return new Promise((res, rej) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onLoad = () => {
      const base64 = reader.result;
      res(base64);
    }
  });
}

다음 시간에는 위에서 사용한 FileReader 함수와 만약 서버에서 실패값에 대해서 response data로 넘어왔을 때 해당 데이터를 관리하는 방법에 대해서 알아보겠습니다.

감사합니다.