[JavaScript] 자바스크립트에서 fetch()로 바이너리 데이터 읽어오기

229_자바스크립트에서 fetch()로 바이너리 데이터 읽어오기

[적용]

• 바이너리 파일을 읽어오고 싶을 때
• 텍스트 파일이 아닌 형식을 다루고 싶을 때

---

[내용]

이미지와 3D 데이터의 대부분은 텍스트 파일이 아닌 포맷을 가지고 있으며, 이를 바이너리 형식이라고 한다.

바이너리 형식은 blob()을 사용해서 처리하며, 웹의 경우 3D 데이터와 이미지 해석 분야 등에 사용된다.

 

Promise를 사용하는 방법

JavaScript  

const btn = document.querySelector('button');
btn.addEventListener('click', () => {
  fetch('./sample.jpg')
    .then((res) => res.blob())
    .then((blob) => {
      const image = new Image();
      image.src = URL.createObjectURL(blob);
      document.body.appendChild(image);
    });
});

 

await와 async를 사용하는 방법

JavaScript (부분)                                                                                     

async function load() {
  // 데이터 가져오기
  const res = await fetch('./sample.jpg');
  // blob으로 해석
  const blob = await res.blob();
  
  // img 요소 생성
  const image = new Image();
  // blob을 src 속성에 대입
  image.src = URL.createObjectURL(blob);
  // 화면에 표시
  document.querySelector('#log').appendChild(image);
}

load();

 

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김