GS - Blob

시작하기

ArrayBuffer 랑 views는 ECMA 표준의 일부분이다.

바이너리 데이터는 비표준으로 구현했다고 했던거 같은데..

이를 표준으로 바꾼게 ArrayBuffer와 views인 것 같다.

Blob은 type과 blobParts로 구성되어있고,

type은 문자열로 되어있다. MIME 타입으로 주로 되어있다.

blobParts는 Blobs 객체, 문자열, BufferSource 등으로 연속적으로 이루어져있다.

new Blob(blobParts, options);
  • blobParts : Blob, BufferSource, String 값으로 구성
  • options

    • type : Blob 타입이 무엇인지, 예로 image/png 같은 것들
    • endings : 줄 바꿈에 해당하도록 줄 끝을 변환 여부 옵션(transparent(기본값) : 아무것도 안함, native : 변환함)
let blob = new Blob(["<div>...</div>"], { type: 'text/html' });

let hello = new Uint8Array([72, 101, 108, 108, 111]);

let blob2 = new Blob([hello, ' ', 'world'], { type: 'text/plain' });

blob 메서드

blob.slice([byteStart], [byteEnd], [contentType]);

Blob은 불변객체이다. 그래서 값을 직접적으로 바꾸진 못한다. 그래도 slice메서드를 통해서 새로운 Blob 객체를 만들 수 있다.

Blob as URL

Blob은 콘텐츠를 표시하기 위해서 앵커 태그나 이미지 태그 등의 URL로 쉽게 사용할 수 있다.

// 코어 자바스크립트
<a download="hello.txt" href='#' id="link">Download</a>

<script>
let blob = new Blob(["Hello, world!"], {type: 'text/plain'});

link.href = URL.createObjectURL(blob);
</script>

createObjectURL을 사용하게 되면, 유닉크한 URL이 만들어진다.

주의할점이 있다. Blob 자체는 메모리에 있기 떄문에 브라우저가 메모리에서 Blob 데이터를 제거하지 못한다.

그래서 직접적으로 제거할 수 있게 URL.revokeObjectURL(url)을 통해서 제거 해줘야한다.

Blob to base64

URL로 만들지 않고 문자열로도 만들 수 있다.

data:[<mediatype>][;base64],<data> 의 형태를 가지게 된다.

Blob을 base64인코딩 문자열로 바꿔보자

let blob = new blob(["Hi"], {type: 'text/plain'});

let reader = new FileReader();
reader.readAsDataURL(blob);

reader.onload = () => {
    console.log(reader);
}

13cr11n133ot 2020 10 12 15 41 13

이렇게 크게 2가지 방법이 있는 걸 볼 수 있었다.

URL(createObjectURL)을 만들거나 data url을 만들거나

전자가 간단하고 빠르다고 한다.

하지만, revoke를 해줘야한다는 점!

후자 같은 경우에는 메모리상으로는 이슈가 없지만, 인코딩할 대 큰 blob 데이터 같은 경우에는 성능이나 메모리에 이슈가 있을 수 있다.

Image to blob

canvas를 이용해서 toBlob() 메서드를 이용하여 변환이 가능하다.

// 코어 자바스크립트 소스
// take any image
let img = document.querySelector('img');

// make <canvas> of the same size
let canvas = document.createElement('canvas');
canvas.width = img.clientWidth;
canvas.height = img.clientHeight;

let context = canvas.getContext('2d');

// copy image to it (this method allows to cut image)
context.drawImage(img, 0, 0);
// we can context.rotate(), and do many other things on canvas

// toBlob is async opereation, callback is called when done
canvas.toBlob(function(blob) {
  // blob ready, download it
  let link = document.createElement('a');
  link.download = 'example.png';

  link.href = URL.createObjectURL(blob);
  link.click();

  // delete the internal blob reference, to let the browser clear memory from it
  URL.revokeObjectURL(link.href);
}, 'image/png');

@kwonmory
성장을 위해 노력하고 있는 모리입니다.

깃허브