Blob 설명
var aBlob = new Blob( array[, options]);
- array는 ArrayBuffer, ArrayBufferView, Blob, DOMString 객체 또는 Blob 안에 들어갈 이러한 객체가 혼합되어 있다. DOMString은 UTF-8로 인코딩 된다.
- options는 다음 두 속성을 선택적으로 사용할 수 있는 BlobPropertyBag dictionary이다.
- type, (기본값 "") blob에 넣을 배열 내용의 MIME 형식을 나타낸다.
- endings, (기본값 "transparent") 줄 끝 문자 \ n을 포함하는 문자열을 어떻게 써야 하는지를 지정. 다음 두 값을 사용 : "native"는 호스트 OS 파일 시스템 규칙과 일치하도록 줄 끝 문자가 변경된다는 것을 의미합니다. 즉, "transparent"는 끝이 변경없이 blob에 저장됨을 의미합니다.
사용 예제
var oMyBlob = new Blob(["abc","def"] , {type : 'text/html'}); // the blob
참고
<input type="file"> 은 .files 라는 것을 가지며, files는 File 객체의 콜렉션이다.
그리고 File은 Blob을 확장해서 만들어진 것이다.
즉 Blob을 쓸 수 있는 곳이라면 File을 쓸 수도 있다.
Blob URL (Object URL) 사용하기
- objectURL = URL.createObjectURL(object);
- object : A File, Blob or MediaSource object to create an object URL for.
- blob:http://www.mins01.com/8508638b-b941-4b5e-a53c-9bc8fe415c85 이런 모양의 URL이 생성된다.
실제 서버에 존재 하지는 않고, 해당 브라우저에서만 사용가능한 URL.
즉, 브라우저 내에서 해당 파일(객체)를 임시로 사용하기 위한 URL이다. - image.src = objectURL 처럼 사용하면 된다.
- image.onload = function() {
window.URL.revokeObjectURL(this.src);
}
처럼 읽어드린 후 바로 Blob URL을 해제해도 image 는 이미지 출력 및 사용에 문제 없다.
- window.URL.revokeObjectURL(objectURL);
- objectURL : A DOMString representing a object URL that was previously created by calling createObjectURL().
- URL.createObjectURL() 로 만들어진 BLOB-URL을 해제한다.
해제될 경우 이후 BLOB-URL은 더이상 사용 못하고 "net::ERR_FILE_NOT_FOUND" 등의 브라우저 에러가 발생된다.
Blob-URL vs DataURL
- img.src = ~~~ 할 경우
- Blob-URL
- 메모리에 올라간 하나의 객체(Blob)를 바라본다.
- 이미 메모리에 해당 타입으로 올라가 있으므로, 바로 가져다 쓴다.
- 즉, 한번 만들고 그 객체를 Blob-URL로 지칭하여 같이 사용함.
- DataURL
- DataURL은 문자열이며, 그 문자열을 풀어서 내용을 만들어서 사용한다.
- 즉, .src 에 적용 할 때마다 매번 문자열을 파싱해서 이미지로 만드는 작업을 한다.
- 즉, 만들어진 객체 공유하지 않음. 새로 다시 만듬
- 속도
- 다시 이미지 객체로 만드는 작업이 없기 때문에 Blob-URL이 더 빠르다.
