logo image
메인
기술
HOME
기술

BLOB URL (Object URL) 사용하기

3
목록
#blob #url #object

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이 더 빠르다.





목록
댓글
  • / /
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
일
월
화
수
목
금
토
3.31
4.1
4.2
4.3
4.4
4.5
4.6
4.7
4.8
4.9
game_tictactoe
4.10
4.11
4.12
4.13
4.14
4.15
4.16
4.17
:scope selector , querySelector 에서 this, self node 지정
4.18
4.19
4.20
4.21
4.22
4.23
ui_treemap
4.24
4.25
4.26
4.27
4.28
4.29
4.30
5.1
5.2
5.3
5.4
tag