[NextJS] blob to base64 바꾸기

📱테스트 환경

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

---

😢 내가 겪은 문제

canvas 에서 이미지를 다시 새롭게 그리려고 하고있는데, cavas.drawImage 에 나는 blob 형식을 넣었는데

구글에 검색해서 이곳저곳 살펴보니 대부분 base64 를 넣더라 .. 이유는 잘 모르겠지만, 다 그렇게 하니까 나도 그렇게 해야겠다는

생각을 하게 돼었다.

그래서 일단 blob 를 base64 로 타입을 변환시켜야 하는데 그냥 이해하진 못해도 그대로 복사해서 붙여쓸 수 있도록 함수화 하였다.
생각보다 쓸일이 많지 않을까 싶어서 ... ㅎ

converBlobToBase64.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) {
        // Blob을 Base64 문자열로 변환
        const base64String = event.target.result.toString();
        resolve(base64String); // 변환 성공 시 결과를 반환
      } else {
        reject(new Error("Blob to base64 conversion failed.")); // 변환 실패 시 에러를 반환
      }
    };

    // 파일 읽기 중 오류가 발생한 경우 실행할 함수
    reader.onerror = function (error) {
      reject(error); // 오류 발생 시 에러를 반환
    };

    // Blob을 읽기 시작
    reader.readAsDataURL(blob);
  });
};

이거는 딱히 내가 뭐 바꿔서 사용하고 이럴 것도 없어서

따로 설명없이 주석에 열심히 메모해 보았다.