[NextJS] base64 Image ReSize

📱테스트 환경

"react": "18.2.0"
"react-dom": "18.2.0"
"typescript": "^5.1.6"

---

😢 내가 겪은 문제

전에 쓴 블로그 내용과 이어지는 내용인데

[NextJS] blob to base64 바꾸기

바로 코드로 넘어가도록 하겠다. 기록의 목적이고 다른사람들도 그냥 코드만 원할것 같다. 내가 그랬어서 .. ㅎ

convertBlobToBase64.tsx

export const convertBlobToBase64 = (blob: Blob): Promise<string> => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = function (event) {
      if (event.target && event.target.result) {
        const base64String = event.target.result.toString();
        resolve(base64String);
      } else {
        reject(new Error("Blob to base64 conversion failed."));
      }
    };
    reader.onerror = function (error) {
      reject(error);
    };
    reader.readAsDataURL(blob);
  });
};

이제 비동기 처리를 하면서 성공, 실패 여부를 확인하고 base64 형식의 string 으로 반환하는데

생소한건 FileReader 정도 일 것 같다.

FileReader는 파일 또는 Blob과 같은 데이터를 비동기적으로 읽을 수 있게 해주는 객체라고 생각하면 편하다.

reader.readAsDataURL(blob) 는 메서드를 호출하여 Blob 데이터를 읽기 시작한다.

이 메서드를 호출하면 Blob 데이터가 Base64로 인코딩되고 reader.onload 이벤트 핸들러가 호출되고 끝이난다.