[javascript] 이미지 처리에서 EXIF 정보가 사라지는 이유와 방지 방법

이미지 데이터를 다루는 과정에서 EXIF 정보가 사라지는 문제가 발생할 수 있습니다. 특히 이미지를 data:image/... 형식으로 변환할 때 이런 일이 자주 발생하는데요. 그 이유와 해결책을 알아보겠습니다.

EXIF 정보란 무엇인가?

EXIF 정보는 이미지에 포함된 메타데이터입니다. 촬영 날짜, 카메라 모델, GPS 위치 정보 등 다양한 데이터를 포함하고 있죠. 사진 편집, 위치 기반 서비스 등에서 유용하게 활용되므로, EXIF 정보를 보존하는 것이 중요합니다.

EXIF 정보가 사라지는 이유

1. Base64 인코딩 과정에서의 손실

이미지를 Base64 문자열로 변환하는 과정에서 EXIF 정보가 포함되지 않을 수 있습니다. 이는 브라우저나 이미지 처리 라이브러리가 픽셀 데이터만 변환하고 메타데이터를 제거하기 때문입니다.

2. 이미지 리사이징 및 재저장

이미지를 리사이징하거나 다른 형식으로 저장할 때, EXIF 정보가 삭제되는 경우가 있습니다. 특히 웹 환경에서는 파일 크기를 줄이기 위해 메타데이터를 제거하는 경우가 많습니다.

3. 브라우저의 보안 및 최적화 정책

브라우저는 보안 강화를 위해 이미지에서 EXIF 정보를 자동으로 제거하거나 무시할 수 있습니다. 이렇게 하면 개인정보 노출 위험은 줄어들지만, EXIF 정보를 유지하려는 경우 문제가 됩니다.

EXIF 정보 손실 방지 방법

1. Base64로 인코딩 전에 EXIF 정보 확인 및 포함하기

이미지를 Base64로 변환하기 전에 EXIF 데이터를 미리 추출하여 저장할 수 있습니다. 이를 위해 exif-js 같은 라이브러리를 사용할 수 있습니다.

예제 코드 (JavaScript):

import EXIF from 'exif-js';

function getBase64WithEXIF(file, callback) {
    const reader = new FileReader();
    reader.onload = function (e) {
        const binaryData = e.target.result;
        const exifData = EXIF.readFromBinaryFile(new DataView(binaryData));
        console.log('EXIF Data:', exifData);

        // Base64로 변환
        const base64Data = reader.result;
        callback({ base64: base64Data, exif: exifData });
    };
    reader.readAsArrayBuffer(file);
}

// 사용 예시
const imageFile = document.getElementById('inputFile').files[0];
getBase64WithEXIF(imageFile, (data) => {
    console.log(data.base64); // Base64 데이터
    console.log(data.exif);  // EXIF 데이터
});

이 코드를 활용하면 이미지의 EXIF 데이터를 읽고 Base64 문자열과 함께 처리할 수 있습니다.

2. EXIF 정보를 별도로 저장

Base64 문자열에 EXIF 데이터를 포함하지 않아도 된다면, EXIF 정보를 별도의 JSON 파일로 저장할 수 있습니다. 이 방식은 데이터 분리를 통해 처리 과정을 간소화합니다.

3. 서버에서 EXIF 정보 유지

이미지 데이터를 서버로 전송하여 원본 이미지를 저장하고 EXIF 정보를 서버에서 유지하는 방법도 있습니다. 이 방식은 클라이언트 측의 부담을 줄이고 안정적인 데이터를 보존할 수 있다는 장점이 있습니다.

4. EXIF 데이터를 다시 삽입

Base64 변환 과정에서 제거된 EXIF 데이터를 다시 삽입할 수도 있습니다. 이를 위해 piexif.js 라이브러리를 사용할 수 있습니다.

예제 코드 (JavaScript):

import piexif from 'piexifjs';

function addExifToBase64(base64Image, exifData) {
    const newBase64 = piexif.insert(piexif.dump(exifData), base64Image);
    return newBase64;
}

이 코드를 사용하면 변환 후에도 EXIF 정보를 포함한 이미지를 만들 수 있습니다.

상황에 맞는 처리 방법 선택하기

EXIF 정보를 유지해야 하는 경우에는 변환 전 EXIF 데이터를 추출하여 포함하거나, Base64와 EXIF 데이터를 별도로 저장하는 방법이 효과적입니다. 서버에서 원본 이미지를 관리하며 필요한 경우 EXIF 데이터를 제공하는 방식도 유용합니다.

EXIF 정보를 유지하지 않아도 된다면 클라이언트 성능 최적화와 파일 크기 축소를 위해 EXIF 데이터를 제거할 수 있습니다.

결론

이미지를 data:image/... 형식으로 변환할 때 EXIF 정보가 사라지는 주된 원인은 브라우저나 라이브러리의 처리 방식 때문입니다. 이를 방지하려면 변환 전 EXIF 데이터를 추출하거나 필요에 따라 다시 삽입하는 방식으로 해결할 수 있습니다. 적절한 라이브러리와 서버-클라이언트 전략을 조합하여 이미지 데이터를 효과적으로 관리해 보세요.

 

piexif.js 파일 확인하기

 

piexif.js 라이브러리 사용법 알아보기