브라우저안에서 파일과 이미지 데이터를 좀더 쉽게 다루는 방법이 없을까 하다가 Blob를 알게되어서 정리를 해볼려고합니다.
우선 Blob의 약자로 Binary Large Object라는 의미로 Binary 형태로 큰 객체를 저장할 것이라는 것을 추측을 할수있습니다.
Blob은 데이터베이스에 저장되는 이진데이터의 모임으로 사용되는 부분으로 알고있는데, 데이터베이스 시스템이 정의되지 않았을때 데이터 기술을 위해서 도입이 되었다고 이야기를 합니다.
그리고 HTML5에 들어서면서 자바스크립트를 이용해서 파일을 다루어야 할 필요성이 생겨 File API 명세에 정의되었습니다.
밑에 사진을 보시면 Blob객체는 이러한 구조로 이루어져있는데 javascript 와 함께 설명을 해보겠습니다.
위에서 말하는 blob에 해당되는 type을 담고있는 데이터는 MMIE타입을 설정하는 부분입니다.
(MMIE타입관려된부분: developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)
그 다음으로는 blobParts부분이 있습니다 이부분은 문자열로이루어진 배열이 담겨있는부분입니다.
위사진처럼 Blob은 type과 blobParts부분을 두개를 참조를하여 만들어진 객체입니다.
사진만 봐서는 이해가 되지 않기때문에 예제소스를 보여드리겠습니다.
<!--html-->
<input type="file" />
<a download="hello.txt" href="#" id="link">Download</a>
<a download="image.jpg" href="#" id="link2">Download</a>
<img src="" id="imgTest" />
<script>
let textarea = document.querySelector("textarea");
let link = document.getElementById("link");
let link2 = document.getElementById("link2");
let imgTest = document.getElementById("imgTest");
let hello = new Uint8Array([72, 101, 108, 108, 112]);
// Blob()함수 이용해서 데이터 집어넣고 Blob 객체만들기
let blob = new Blob([hello, " ", "world123"], { type: "text/plain" });
// [hello," ","world123"] 부분은 blobParts 부분입니다.
// 옆에 있는 {type:"text/plain"} 부분은 type 부분으로 해당이 됩니다. 이 부분은 type말고도 다른 오셥을 이용할수있는데 endings이라는 옵션을 이용할수있습니다.
// Blob객체를 이용해서 createObjectURL에 집어넣기
link.href = URL.createObjectURL(blob);
fetch("https://picsum.photos/id/222/300/300.jpg")
.then(function (response) {
return response.blob();
})
.then(e => {
// 외부 image url에서 image데이터를 이용해서 Blob타입으로 변경후 createObjectURL로 변경
link2.href = URL.createObjectURL(e);
imgTest.src = URL.createObjectURL(e);
});
</script>
나머지는 주석내용을 참고하시면 되겠습니다.
내용이 이상하거나 궁금한점이 있으시면, 댓글로 남겨주시면 되겠습니다.