[Javascript] API 활용 - Blob

[모던자바스크립트] 19.2 blob

: Blob을 활용하면 자바스크립트로 이미지, 음성,영상 등의 이진 데이터를 다룰 수 있습니다.

또한 Blob을 상속받는 file 객체로 로컬 파일을 다룰 수 있게 됩니다.

: Blob은 일련의 데이터를 처리하거나 간접 참조하는 객체다.

"즉, 데이터 자체라기보다는 데이터를 간접적으로 접근하기 위한 객체인 것이다."

 

19.2.1 Blob

: 데이터베이스 관리 시스템의 BLOB(Binary Large Object)에서 유래 됬습니다.

: 이진 데이터를 저장하기 위한 데이터 타입으로 이미지나 음성 등의 멀티미디어 데이터를 저장한느 용도로 사용합니다.

: 자바스크립트 Blob 객체는 데이터 덩어리를 참조하는 용도로 사용합니다. 큰 데이터는 물론 작은 데이터도 다룰 수 있습니다.

즉, 이진 데이터는 물론이거니와 텍스트 데이터도 다룰 수 있습니다. Blob 객체는 메모리상의 데이터(바이트 배열)도 참조할 수 있으며 파일의 데이터도 참조할 수 있습니다.

 

:웹브라우저는 메모리 또는 디스크에 Blob을 저장할 수 있으며, Blob은 비디오 파일과 같이 매우 커서,

메모리에 적재하려면 slice()를 활용하여 작은 조각으로 먼저 분리해야 할 수도 있다.

데이터의 크기가 매우 크기 때문에 디스크를 사용해야 하므로 Blob API 는 비동기 방식으로 동작한다.

 

 

19.2.2 Blob생성자

Blob 객체는 Blob 생성자로 생성합니다.

var blob = new Blob(source, {type: contentType});

source :  버퍼 배열

contentType :  생성하는 데이터의 MIME 타입

 

source에 버퍼 여러 개를 요소로 지정하면 그것을 내부에서 순차적으로 연결한 배열이 Blob 객체가 가리키는 버퍼 하나가 됩니다.

다음과 같은 데이터 타입을 버퍼의 요소로 지정할 수 있습니다.

ArratBuffer, TypedArray, DataView, Blob, String, 기타 모든 데이터 타입

단, String 타입은 UTF-8 바이너리로 변환됩니다. 그 외의 모든 데이터 타입의 값은 toString메서드로 문자열로 변환한 UTF-8바이너리로 변환됩니다.

 

[Blob 객체의 프로퍼티와 메서드]

프로퍼티 이름/ 메서드이름	걸명
size	Blob 객체가 참조하는 데이터 크기(바이트 단위)
type	Blob 객체가 참조하는 데이터의 MIME 타입을 뜻하는 문자열
slice(start, end, contentType)	버퍼의 start 부터 end 까지의 복사본을 MIME 타입이 contentType인 Blob 객체로 반환한다.

 

Blob객체를 생성하는 예

//Blob객체를 생성하는 예

//빈 Blob 객체 생성
var blob - new Blob();
console.log(blob.size, blob.type); // -> 0 ""

//문자열을 가리키는 Blob 객체를 생성
var blob = new Blob(["Javascript"], {type: "text/plain"});
console.log(blob.size, blob.type); // 10 "text/plain"

//형식화 배열을 가리키는 Blob 객체를 생성
var a = new Uint8Array([0, 1, 2, 3]);
var blob = new Blob(a, {type: "application/octet-stream"});
console.log(blob.size, blob.type); // 4 "application/octet-stream"


//여기에서 Blob 객체를 일반 이진 데이터로 다루고자할 때는 contentType을 
// {type: "application.octet-stream" }으로 설정합니다. 

 

 

19.2.3 Blob 객체 가져오기

 

1) Bolb 생성자로 생성하는 방법

Blob 생성자의 첫 번째 인수로 ArrayBuffer나 형식화 배열 등이 요소로 담긴 배열을 넘기면 Blob 객체를 가져올 수 있습니다.

 

2) XMLHttpRequest로 웹의 데이터를 HTTP통신으로 가져오는 방법

Blob 객체를 XMLHttpRequest로 내려받을 수 있습니다. 

url이 가리키는 Blob데이터를 내려받아 함수 callback 넘기는 함수입니다

//Blob 데이터를 내려받는 함수
function getBlob(url, callback){
	var req - new XMLHttpRequest();
	req.onload = function(){
    	callback(req.response);
    }
    req.open("GET", url);
    req.responseType = "blob";
    req.send(null);
}    

 

3) postMessage로 다른 윈도우나 스레드에서 가져오는 방법

: 다른 윈도우나 스레드에서 Blob을 가져올 수 있습니다.

 

 

4) 파일에서 가져오는 방법

: 드래그 앤 드롭 API 또는 <input type="file">요소를 사용하면 파일을 읽어 들여서 그것을 File 객체로 가져올 수 있습니다.

File 객체는 파일 이름과 수정일 정보가 추가된 Blob 객체 입니다. 

 

 

 

19.2.4 File 객체

: 메모리에 있는 데이터를 참조합니다.

: 로컬 파일을 참조하는 Blob객체 입니다.

: 로컬 파일을 읽거나 쓸 수 있습니다.

 

File 객체는 Blob 객체를 상속받은 객체입니다. Blob 객체의 프로퍼티와 메서드 외에도 전용 프로퍼티를 가지고 있습니다.

프로퍼티	설명
lastModified	File 객체가 마지막으로 수정된 날짜 (단위는 밀리초)
lastModifiedDate	File 객체가 마지막으로 수정된 날짜(Data 객체)
name	File 객체가 가리키는 파일의 이름

 

 

로컬 파일을 File 객체로 불러들이는 방법

 

1) type = "file" 속성을 지정한 input 요소를 불러오는 방법

 

<input type="file">

input 요소로 선택한 File 객체는 input요소 객체의 files 프로퍼티에 저장됩니다.

files 프로퍼티는 File 객체의 배열입니다.

 

Input 요소에 multiple 속성을 지정하면 사용자가 Shift를 눌렀을때 파일 여러개를 선택할 수 있습니다.

<input type="file" multiple>

 

input요소에 accept속성에는 선택할 수 있는 파일 유형을 MIME 타입으로 설정할 수 있습니니다.

<input type="file" accept="image/*"> //이미지의 모든 파일 선택을 허용

 

 

2) 드래그 앤 드롭으로 불러들이기

파일을 드래그해서 다른 요소에 드롭하면 파일 정보를 드롭타깃 요소에 전달 할 수있습니다.

드래그 앤 드롭으로 드래그한 파일을 File 객체는 이벤트 객체의 DataTransfer 프로퍼티 안에 있는 files 프로퍼티에 저장됩니다.

files 프로퍼티는 선택된 파일의 File 객체가 담긴 배열입니다.

element.ondrop = function(e){

  var files = e.dataTrnasfer.files;

  ....

};

 

 

 

19.2.5 FileReader

Blob 객체에는 데이터 내용을 읽는 메서드가 없습니다. 

FileReader 객체를 사용하면 데이터의 내용(바이트 배열 또는 문자열)을 읽을 수 있습니다. 

 

var reader = new FileREader();

 

FileReader 인스턴스를 생성하면 읽고자 하는 Blob 객체를 적절한 이벤트 처리기 안에서 아래 메서드중 하나에 넘깁니다.

 

[Blob객체를 읽는 FileReader 객체의 메서드]

 

메서드	설명
readAsText(blob, [,encoding)	텍스트 형식으로 읽기
readAsArrayBuffer(blob)	ArrayBuffer 형식으로 읽기
readAsDataURL(blob)	data URL이 가리키는 데이터 읽기
readAsBinaryString(blob)	이진 데이터 형식으로 읽기

이러한 메서드는 데이터를 읽는 작업을 비동기로 처리합니다.

 

 

 

19.2.6 Blob URL

 

 

 

See the Pen [Javascript] Blob Url by jeongahlee (@jeongahlee) on CodePen.

 

 

 

 

 

https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F99508F3B5BAA636B30

 

 

 

 

참고출처 : https://uxicode.tistory.com/entry/Blob-객체 [세줄코딩]