[javascript] 바이너리 데이터를 다른 포맷으로 변환하는 방법 (예: PNG를 JPEG로 변환)

12 Dec 2023

javascript

바이너리 데이터를 다른 포맷으로 변환하는 것은 웹 프로그래밍 및 데이터 처리에 매우 유용한 기술입니다. 예를 들어, PNG 이미지를 JPEG로 변환하는 것은 웹 페이지 성능을 향상시키기 위해 사용되는 일반적인 기법 중 하나입니다. 이 게시물에서는 JavaScript를 사용하여 바이너리 데이터를 다른 포맷으로 변환하는 방법에 대해 살펴보겠습니다.

1. 바이너리 데이터 읽기

우선, 바이너리 데이터를 읽어야 합니다. 이를 위해 웹 브라우저에서 사용자가 업로드한 파일이나 서버로부터 가져온 데이터를 처리할 수 있는 FileReader API를 활용할 수 있습니다.

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

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

  reader.onload = (event) => {
    const binaryData = event.target.result;
    // 이제 binaryData로 작업을 수행할 수 있습니다.
  };

  reader.readAsBinaryString(file);
});

2. 데이터 변환

바이너리 데이터를 다른 포맷으로 변환하는 경우, 보통 데이터 처리 라이브러리를 사용하여 작업합니다. 예를 들어, PNG 이미지를 JPEG로 변환하기 위해서는 pngjs와 jpeg-js와 같은 라이브러리를 사용할 수 있습니다.

const PNG = require('pngjs').PNG;
const JPEG = require('jpeg-js');

// PNG 이미지를 읽어와서 JPEG로 변환
const pngData = new PNG();
pngData.parse(binaryData, (error, data) => {
  if (error) {
    console.error('Error parsing PNG data');
    return;
  }
  const jpegData = JPEG.encode({ data: data, width: pngData.width, height: pngData.height }, 100);
  // 이제 jpegData로 작업을 수행할 수 있습니다.
});

3. 결과 저장

마지막으로, 변환된 데이터를 저장해야 합니다. 이를 위해서는 웹 브라우저에서 파일을 생성하고 다운로드할 수 있는 Blob 및 URL API를 활용할 수 있습니다.

// JPEG 데이터를 Blob으로 변환
const blob = new Blob([jpegData.data], { type: 'image/jpeg' });

// Blob을 다운로드할 수 있는 URL 생성
const downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'converted.jpg';
downloadLink.click();

위의 단계를 따르면 JavaScript를 사용하여 PNG 이미지를 JPEG로 변환하는 단계를 수행할 수 있습니다. 바이너리 데이터의 다른 포맷으로의 변환은 실제 데이터 처리에 대한 이해와 더불어 웹 애플리케이션의 성능 및 사용자 경험을 향상시키기 위해 중요한 과제입니다.

1. 바이너리 데이터 읽기

2. 데이터 변환

3. 결과 저장

참고 자료