Blob / File / createObjectURL

자바스크립트에서 저장형태

  • Blob: 주로 "파일 형태가 아닌" 바이너리 데이터(마이크 소리, canvas그림 등)를 다룬다.
    Chrome에서 954MB까지 이진데이터 저장가능하다.
    만약 DB에 파일을 그대로 저장하고싶다면 이 Blob형태로 저장하면된다

  • File: Blob을 상속 받는 객체로, 주로 "파일 형태"의 바이너리 데이터(mp3, png 파일 등)를 다룬다. 

  • FileReader: File이나 Blob에 저장된 바이너리 데이터를 읽어들이는 객체다.

  • FileList: HTML Input엘리먼트를 통해 입력 받은 파일(File객체 형태)들을 저장하는 유사배열객체다.

정리하면 아래와 같은 형태인가..

Blob (FileReader) < File (FileReader) < FileList

Blob과 Base64의 차이

base64: 바이너리 데이터를 텍스트(문자열)형태로 저장한 포맷

blob: 바이너리 데이터를 객체(Object)로 저장

특징으로는 base64의 경우 문자열이 굉장히 길어져서 가독성이 안좋고, 용량이 커지며 로딩시간이 길어진다

그러나 blob은 객체이므로 다양하게 사용가능하며 base64와 buffer로 변경이 가능하기 때문에 장점이 많다

Blob과 File의 차이

Blob이 원시데이터에 가깝다면 (마이크의 목소리등..)

File은 그 원시데이터들을 하나로 합친 파일형태(mp3등..)를 사용한다

Blob을 생성하는 방법

  1. 생성자 방식  // new Blob(source배열, {type: "MIME Type", endings: "transparent"}); 

    생성자는 입력받은 값(배열등)을 Blob형태로 변환해준다.
    입력받은 값을 배열형태로 입력받는 이유는 바이너리 데이터가 chunk로 쪼개져서 들어오기 때문에 배열로 받게됨

  2. 기존 Blob객체의 일부 취득 // Blob.prototype.slice(start, end, contentType) 
    앞서 Blob데이터는 데이터가 큰 경우 slice메서드 등으로 blob을 분할한 chuck파일로 업로드다 다운로드를 처리한다

  3. 마이크, 카메라, 화면 등에서 취득

ObjectURL(객체URL)이란?

  • Object URL == Blob URL

  • 브라우저에 저장된 Blob을 URL형식으로 가리킨다.

  • 그래서 Blob객체를 임시로 참조할수있다

  • 해당 페이지에서만 유효하다

  • window.URL.createObjectURL(Blob)로 생성가능하다

  • 가비지콜렉터가 처리해주지 않으므로 메모리 누수방지를 위해 window.URL.revokeObjectURL(Blob) 를 사용

  • window.URL.revokeObjectURL후 해당 blob의 URL을 입력하고 "파일에 액세스할수없음"이라고 표기되면 정상적으로 해체완료

사용예제1(사운드)

1. 마이크를 통해 들어온 여러개의 소리 조각들(Blob)을 하나의 Blob으로 합친다.
const blob = new Blob([오디오Blob1, 오디오Blob2, ... ], {"type": "audio/ogg codecs=opus"});
 
2. 합쳐진 Blob을 "객체URL"(object URL)로 생성한다.
const audioURL = window.URL.createObjectURL(blob);
 
3. 생성된 "객체URL"을 <audio>태그의 src 로 적용한다.
$audioElement.src = audioURL;
 
4. 오디오를 재생한다.
$audioElement.play();

사용예제2(이미지)

  • 임시 이미지 저장시

  • 서버에 이미지를 저장하기전 유저에게 바로 보여줄수있기때문에 사용

// HTML
<div>
    <img id="tempImg" src="" style="max-height: 300px">
</div>
<div class="mt-3">
    <input id="file" type="file" name="file" onchange="createTempImage()">
</div>

///JS 
// 파일등록시 임시이미지 생성
function createTempImage() {
    let fileTag = event.target;

    if(fileTag.files[0]){
        const imageTag = document.querySelector('#tempImg');

        // 파일객체를 넣고 blob으로 생성되는 URL생성 (<img src="blob:http%..)
        imageTag.src = window.URL.createObjectURL(fileTag.files[0]);//img src에 blob주소 변환

        imageTag.onload = () => {
          window.URL.revokeObjectURL(imageTag.src)  //사용후 반드시 해제해주어야 메모리 누수가 안생김.
        }
      }
}

참조

https://avengersrhydon1121.tistory.com/280

https://medium.com/hcleedev/web-javascript-blob-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-9140146e87a8

https://curryyou.tistory.com/442 (여기를 메인으로 참조)

https://inpa.tistory.com

Feb 28, 2023 Views 693