[javascript] 바이너리 데이터로부터 이미지 출력하기
이미지를 처리하기 위해 바이너리 데이터를 다룰 때, 데이터를 읽고 이를 이미지로 표시하는 작업이 필요합니다. 이 문서에서는 JavaScript를 사용하여 바이너리 데이터를 읽어와 이미지로 표시하는 방법에 대해 설명하겠습니다.
바이너리 데이터 읽기
가장 먼저, 바이너리 데이터를 읽는 방법을 살펴보겠습니다. JavaScript에서는 FileReader 객체를 사용하여 바이너리 데이터를 읽을 수 있습니다.
function readBinaryFile(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsArrayBuffer(file);
});
}
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', async (e) => {
const file = e.target.files[0];
const binaryData = await readBinaryFile(file);
// 이미지로 표시하는 코드 호출
});
위의 코드는 readBinaryFile 함수를 사용하여 파일을 바이너리로 읽는 예시입니다.
바이너리 데이터를 이미지로 표시하기
이제 바이너리 데이터를 읽은 후, 이를 이미지로 표시하는 방법에 대해 알아보겠습니다.
function displayImage(binaryData) {
const blob = new Blob([binaryData], { type: 'image/jpeg' }); // 바이너리 데이터를 Blob 객체로 변환
const imageUrl = URL.createObjectURL(blob); // Blob 객체를 URL로 변환
const imgElement = document.createElement('img');
imgElement.src = imageUrl; // 이미지 소스 설정
document.body.appendChild(imgElement); // 이미지를 화면에 추가
}
위의 코드는 displayImage 함수를 사용하여 바이너리 데이터를 이미지로 표시하는 예시입니다.
이제 우리는 JavaScript를 사용하여 바이너리 데이터로부터 이미지를 출력하는 방법에 대해 배웠습니다. 위의 코드를 참고하여 자신만의 이미지 출력 시스템을 만들어 보세요!