[javascript] 자바스크립트에서 이미지 파일을 바이너리 데이터로 변환하는 방법

12 Dec 2023

javascript

const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];

  const reader = new FileReader();
  reader.onload = (e) => {
    const binaryData = e.target.result;
    // 변환된 바이너리 데이터를 사용하는 작업 수행
  };
  reader.readAsBinaryString(file);
});

위 코드에서 FileReader의 readAsBinaryString 메서드를 사용하여 이미지 파일을 바이너리 데이터로 읽을 수 있습니다.

2. 변환된 데이터 사용하기

이미지 파일을 바이너리 데이터로 성공적으로 읽으면, 해당 데이터를 원하는 방식으로 사용할 수 있습니다. 예를 들어, 웹 페이지에서 해당 이미지를 표시하거나 서버로 업로드할 수 있습니다.

// 변환된 바이너리 데이터를 사용하여 이미지 표시하기
const img = document.createElement('img');
img.src = `data:image/png;base64,${btoa(binaryData)}`;
document.body.appendChild(img);

위 코드에서는 btoa 함수를 사용하여 바이너리 데이터를 Base64로 인코딩하여 이미지를 표시하는 예제입니다.

이제 자바스크립트를 사용하여 이미지 파일을 바이너리 데이터로 변환하는 방법에 대해 알아보았습니다. 필요에 따라 이를 활용하여 다양한 작업을 수행할 수 있습니다.

참고 문헌:

MDN Web Docs. “FileReader”. https://developer.mozilla.org/en-US/docs/Web/API/FileReader

목차

1. 이미지 파일을 바이너리 데이터로 변환하기

2. 변환된 데이터 사용하기