웹 개발을 하다 보면 이미지 파일을 Blob(Binary Large Object) 형태로 변환해야 하는 경우가 많습니다. 이미지 업로드, 캔버스 처리, 서버 전송 등 다양한 작업에서 Blob 데이터가 활용되는데요. 이 글에서는 JavaScript의 fetch API와 Response.blob() 메서드를 사용해 이미지를 Blob 객체로 변환하는 방법을 예제와 함께 자세히 살펴보겠습니다.
Blob이란 무엇인가?
Blob은 'Binary Large Object'의 약자로, 이미지·오디오·비디오처럼 이진 데이터를 그대로 담는 불변(immutable) 객체입니다. 모든 Blob은 데이터의 크기를 바이트 단위로 나타내는 size 속성과 데이터의 MIME 타입을 나타내는 type 속성을 가지고 있으며, 이 두 속성만으로도 변환이 제대로 이루어졌는지 간단히 확인할 수 있습니다.
전체 예제 코드
아래 예제는 'Convert' 버튼을 클릭하면 이미지를 fetch로 가져와 Blob으로 변환한 뒤, 그 크기와 타입을 화면에 출력하는 완전한 HTML 문서입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>JavaScript로 이미지를 Blob으로 변환하기</h1>
<div class="sample">
<img src="https://picsum.photos/id/222/300/300.jpg" />
</div>
<button class="Btn">Convert</button>
<div class="result"></div>
<h3>위 버튼을 클릭하면 이미지가 Blob으로 변환됩니다</h3>
<script>
let BtnEle = document.querySelector(".Btn");
let resEle = document.querySelector(".result");
BtnEle.addEventListener("click", () => {
fetch("https://picsum.photos/id/222/300/300.jpg")
.then(function (response) {
return response.blob();
})
.then(function (blob) {
resEle.innerHTML = "blob.size = " + blob.size + "<br>";
resEle.innerHTML += "blob.type = " + blob.type + "<br>";
});
});
</script>
</body>
</html>
코드 동작 원리
- 이미지 요청:
fetch()함수가 지정된 URL의 이미지를 비동기적으로 요청합니다. - Blob 변환: 응답 객체의
blob()메서드가 응답 본문을 Blob 객체로 변환하는 Promise를 반환합니다. - 정보 출력: 변환된 Blob의
size(바이트 단위 크기)와type(MIME 타입)을 결과 영역에 표시합니다.
실행 결과
위 코드를 브라우저에서 열면 다음과 같은 초기 화면이 나타납니다.
'Convert' 버튼을 클릭하면 아래와 같이 Blob의 크기(size)와 타입(type) 정보가 출력됩니다.
