자바스크립트 - 멀티미디어 파일 데이터 자료형 정리 (Blob, File, FileReader, TypedArray)

일을 하다보니 영상 자료를 다루게 되었고 자료형을 정확히 정리할 필요가 있다고 여겼다.

 

Blob 객체

자바스크립트에서 텍스트, 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용하는 자료형

파일류의 불변하는 미가공 데이터를 나타내는 객체
텍스트와 이진 데이터의 형태로 읽을 수 있으며 ReadableStream으로 변환 후 메서드를 사용하여 데이터를 처리할 수 있다.
멀티미디어 파일의 데이터들을 최적화하기 위해 비동기 처리로 읽어올 땐 블롭으로 바로 변환시키는 것이 아닌, ArrayBuffer로 변환을 해주고 이 값을 Uint8Array 등의 DataView로 처리해줘야 한다.

Blob은 File 인터페이스를 사용자 시스템의 파일을 지원하기 위해 Blob 인터페이스를 확장한 것이므로 모든 블롭 기능을 상속한다.

 

비동기적으로 데이터를 읽기 위해 파일 리더 객체를 사용하게 되는데, 블롭 객체에서 파일 리더 객체로 변경을 해주면 파일을 읽고 가공할 수 있게 된다.

 

위에 적은 대로 블롭 객체는 바로 변환할 수 있는 게 아니고, ArrayBuffer 등의 ReadableStream으로 변환하는 과정이 필요하다. ArrayBuffer는 직접 컨텐츠를 조작할 순 없지만 특정 형식으로 버퍼를 나타내는 DataView를 만들고, 버퍼의 컨텐츠를 읽고 쓸 수 있게 된다.

let blob = new Blob(['Hello, world!'], {type: 'text/plain'});
let urlLink = URL.createObjectURL(blob);

DOM요소에서 참조하려면 변환시킨 블롭을 createObjectUrl을 통하여 url을 만들어준다. 변환된 url을 href 등에 사용해주면 된다. 다만 creactObjectUrl은 생성된 window의 document에서만 유효하고 다른 윈도우에선 재활용이 불가하다.

 

 

 

File 객체

file 객체는 blob 객체를 확장한 객체로 파일 시스템과 관련된 기능을 담당한다.

파일 시스템은 OS의 영역이지만 브라우저상에서도 파일을 주고 받는 등의 기능이 가능하므로 이를 지원하기 위한 규격이기도 하다.

 

브라우저에서 자바스크립트를 이용하여 파일을 다루기 위한 방법

• File 객체를 생성자로 사용

new File(fileParts, fileName, [options]);

fileParts : Blob, BufferSource, String 과 같은 배열
fileName : 파일명
options : 옵션 등

• HTML 태그에서 input 의 type file로 파일을 가져온다.

 

 

 

FileReader

비동기적으로 데이터를 읽기 위해 사용

읽을 파일을 가리키는 File 혹은 Blob 객체를 이용하여 파일 내용을 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해준다.

input file 타입으로 넘어오는 파일 정보를 매개변수로 넣어 reader 측에서 처리가 완료되었을 때 onload에 콜백함수를 실행해주도록 한다. onload의 첫번째 매개변수에 target.result로 접근하거나 reader.result로 접근하면 읽어온 내용이 담겨있게 된다.

 

Blob -> XXX 로 변환

• readAsText(Blob) : 텍스트 파일로 읽기, 이미지를 읽으려고 하면 인코딩이 되어 있지 않으므로 깨진 내용 반환 (기본 인코딩 방식 : utf-8)
• readAsDataURL(Blob) : base64로 인코딩, 이미지를 다룰 때 사용
• readAsArrayBuffer(Blob) : ArrayBuffer 객체를 반환, 이는 데이터를 잘게 조각낸 것으로 이를 서버에 보내서 stream으로 처리, 영상 오디오 등 스트림 데이터에 사용
• readAsBinaryString(Blob) : 바이너리로 읽어오며 처리 속도에 민감하게 반응할 때 사용, 0~255 범위의 문자열 정도에 적합
• abort() : 작업을 즉시 중단

FileReaderSync 는 Web Worker 에서 사용할 수 있으며 read* 메서드가 이벤트를 통해 결과에 접근하는 것이 아닌, 일반 함수처럼 결과를 바로 반환하는 동기 방식으로 사용할 수 있다.

 

 

ArrayBuffer

자바스크립트에서 원시 데이터(바이너리)를 다루는 수단으로, 메모리를 개발자가 수동으로 관리할 수 있는 대안

용량이 큰 데이터인 Blob 등에서 사용된다.

자바스크립트에서 모든 이진 데이터는 기본적으로 ArrayBuffer 객체에 포함되며, 연속된 공간의 메모리에 할당되는 고정 길이에 대한 참조 객체라고 할 수 있다.

let bf = new ArrayBuffer(16); // 16byte 크기의 buffer 생성

 

• 자바스크립트의 배열과 달리 고정 길이를 가지고 있으며 늘리거나 줄일 수 없음
• 명시된 크기만큼의 공간을 메모리에서 차지
• 일반 배열처럼 buffer[index]와 같이 인덱스로 접근할 수 없다. 대신 view라고 불리는 별도의 객체를 생성해서 접근해야 한다 → Uint8Array …
• DataView 객체는 스스로 어떠한 데이터도 저장하고 있지 않고, ArrayBuffer 의 내부를 들여다보기 위한 수단으로 사용된다.

 

DataView (TypedArray)

자바스크립트의 배열과 거의 유사하게 동작

인덱스와 이터러블 속성을 가지고 있다.

 

5가지의 인자를 받아 해당 유형의 TypedArray를 생성할 수 있다.

• Uint8Array : ArrayBuffer에 있는 각 바이트를 개별적으로 다루는 view 객체
  • 8bit = 1byte, 각 바이트별로 접근이 가능하다는 의미 = Uint8은 Unsigned 8bit int
  • 0~255 범위의 수
• Uint16Array : 2바이트 단위 정수형으로 접근 가능한 view 객체로 0~65535 범위의 수를 다룰 수 있음
• Uint32Array : 4byte 단위 정수형으로 접근이 가능한 view 객체
• Float64Array : 8바이트 단위 부동 소수점 방식으로 접근 가능한 view 객체