[JavaScript] Base64 To Blob

얼마전 toast-ui editor에서 이미지를 blob으로 변환해 s3에 업로드 했었다.

왜 변환해서 저장하는지 더 알아보고 추가적인 기록을 하고자 한다.

2023.05.22 - [JavaScript/Vue] - toast-ui/vue-editor 사용 시, 파일을 S3에 업로드하기

 

---

🤔 Base64 -> Blob으로 변환하는 이유

Base64 를 Blob으로 변환하여 저장하는 방법은 데이터 전송, 데이터 저장, 웹에서의 이미지 표시 등에 유용하다.

• 데이터 전송: Base64는 이진 데이터를 텍스트로 변환하여 전송할 수 있으므로, 텍스트 기반 시스템에서 이진 데이터를 처리할 수 있게 한다.
• 데이터 저장: 일부 시스템은 텍스트 형식으로 데이터를 저장하는 것을 선호하며, Base64를 사용하여 이진 데이터를 텍스트로 변환한 후 Blob으로 저장할 수 있다.
• 웹에서 이미지 표시: 웹 페이지에서 이미지를 효율적으로 표시하기 위해 이미지 파일을 Base64로 변환하여 Blob으로 저장할 수 있다.

 

아래는 자바스크립트로 Base64를 Blob으로 바꾸는 코드!

 

Base64 -> Blob

function base64ToBlob(base64Data) {
      const binaryString = window.atob(base64Data);
      const bytes = new Uint8Array(binaryString.length);

      for (let i = 0; i < binaryString.length; i++) {
        bytes[i] = binaryString.charCodeAt(i);
      }
      return new Blob([bytes], { type: 'image/png' });
},

 

Base64 -> ArrayBuffer -> Blob

• 이 과정을 하는 이유는 최종 결과는 동일하지만, 호환성과 성능 측면에서 유리하며, 추가적인 데이터 처리 기능을 제공하기 때문.
• Base64는 텍스트 형식으로 인코딩된 데이터이기 때문에 일부 메모리 오버헤드가 발생하는데, ArrayBuffer는 이진 데이터를 직접 표현하기 때문에 메모리 오버헤드가 적어서 큰 데이터를 처리할 때 메모리 효율성과 성능 면에서 arrayBuffer를 사용하는 것이 유리할 수 있다고 한다.

function base64ToBlob(base64Data, contentType = '') {
      const binaryString = window.atob(base64Data);
      const arraybuffer = new ArrayBuffer(binaryString.length);
      const view = new Uint8Array(arraybuffer);

      for (let i = 0; i < binaryString.length; i++) {
          view[i] = binaryString.charCodeAt(i) & 0xff;
      }

      return new Blob([arraybuffer], { type: contentType });
}