용어

• base64: 이진 데이터(바이너리 데이터)를 텍스트로 변환하는 방식
• Blob: 브라우저에서 이진 데이터를 효율적으로 다루는 객체
• Unit8Array: 자바스크립트에서 바이너리 데이터를 표현할때 사용하는 타입배열

요약

base64 형식의 데이터 -> blob 객체 -> file 객체로 변환

수도코드

1. base64 형식의 데이터(텍스트)를 바이너리 데이터로 변환
2. 바이너리 데이터를 가지고 Blob 객체 생성
3. blob으로 File 객체 생성

상세 설명

1. 텍스트 형태의 base64 형식의 데이터에서 실제 데이터 추출

   base64.split(',')[1]
   // data:[<mediatype>];base64,[<base64 data>]
   // 마지막 , 다음에 나오는 값들이 실제 데이터

2. 디코딩
   -> 바이너리 문자열로 변환

   const binaryString = atob(base64.split(',')[1]);
   // atob() 디코딩 함수를 사용해서 변환

3. 바이너리 문자열 -> 바이너리 데이터로 변환

   • 바이너리 문자열: 문자열(실제 바이트 데이터를 문자로 표현)
   • 바이너리 데이터: 2진수 데이터(실제 바이트 데이터)

   // js에서 Uint8Array로 바이너리 데이터 표현할때 주로 사용한다고함
    // 숫자를 포함한 binaryString의 길이만큼의 배열 생성
    const byteArray = new Uint8Array(binaryString.length);
   
    for (let i = 0; i < binaryString.length; i++) {
      // UTF-16코드 활용하여 실제 바이트 표현
      byteArray[i] = binaryString.charCodeAt(i);
    }

**

4. 바이너리 데이터를 가지고 blob 객체 생성

   const blob = new Blob([byteArray], { type: 'image/jpeg' });

5. blob으로 file 객체 생성

   const file = new File([blob], filename, { type: 'image/jpeg' });

**

참고할만한 링크

이미지 파일을 다루어 보자! (Base64, Blob, File)