위챗 미니프로그램 환경에서는 브라우저의 전역 객체인 window나 document가 존재하지 않기 때문에, 일반적인 EXIF 라이브러리를 그대로 사용하면 런타임 에러가 발생합니다. 가장 널리 쓰이는 exif-js 라이브러리를 미니프로그램에 맞게 수정하여 이미지의 촬영 정보를 읽어오는 방법을 살펴봅니다.

1. 라이브러리 설치

먼저 프로젝트 경로에서 npm을 통해 라이브러리를 설치합니다.

npm install exif-js --save

2. 이미지 선택 및 바이너리 데이터 읽기

미니프로그램에서 이미지의 EXIF 정보를 추출하려면 먼저 wx.chooseImage로 이미지를 선택하고, FileSystemManager를 통해 해당 파일을 ArrayBuffer 형태로 읽어와야 합니다.

// 이미지 선택 및 데이터 추출 함수
async function handlePhotoExif() {
  try {
    const photoInfo = await pickImage();
    if (!photoInfo) return;

    const fs = wx.getFileSystemManager();
    fs.readFile({
      filePath: photoInfo.path,
      success: (res) => {
        // res.data는 ArrayBuffer 타입입니다.
        EXIF.getData(res.data, function() {
          const allMetaData = EXIF.getAllTags(this);
          const formattedString = EXIF.pretty(this);
          console.log('메타데이터 결과:', allMetaData);
          console.log('포맷팅된 정보:', formattedString);
        });
      },
      fail: (err) => console.error('파일 읽기 실패:', err)
    });
  } catch (error) {
    console.error('이미지 선택 중 오류:', error);
  }
}

// 이미지 선택 헬퍼 함수
function pickImage() {
  return new Promise((resolve, reject) => {
    wx.chooseImage({
      count: 1,
      sizeType: ['original'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        const file = res.tempFiles[0];
        const LIMIT_SIZE = 20 * 1024 * 1024; // 20MB 제한

        if (file.size > LIMIT_SIZE) {
          return reject(new Error('이미지 용량이 너무 큽니다.'));
        }
        resolve(file);
      },
      fail: (e) => reject(e)
    });
  });
}

3. exif-js 내부 코드 수정 (미니프로그램 호환성)

설치된 exif-js 소스 코드를 그대로 사용하면 미니프로그램 환경에서 self 또는 Image 객체를 찾을 수 없다는 오류가 발생합니다. 이를 해결하기 위해 라이브러리 내부를 다음과 같이 수정해야 합니다.

A. 전역 객체 참조 수정

라이브러리 상단에서 self가 정의되지 않아 발생하는 TypeError: Cannot read property 'Image' of undefined를 방지하기 위해 전역 객체 바인딩을 수정합니다.

// exif-js 내부 수정
var root = this;
var self = this || {}; // window 대신 현재 컨텍스트 사용

B. ArrayBuffer 지원 추가

미니프로그램의 readFile은 ArrayBuffer를 반환합니다. getImageData 함수가 이 데이터 타입을 인식하도록 조건을 추가해야 합니다.

function getImageData(img, callback) {
    if (img instanceof ArrayBuffer) {
        handleBinaryFile(img, callback);
    } else if (/* 기존 조건문 */) {
        // ...
    }
}

C. Blob 미지원 대응

미니프로그램에는 Blob 객체가 없으므로, 라이브러리 내부에서 Blob을 참조할 때 에러가 발생하지 않도록 빈 함수나 가짜 객체를 선언해줍니다.

// 라이브러리 최상단에 추가
var Blob = typeof Blob !== 'undefined' ? Blob : function() {};

요약

위의 수정 과정을 거치면 exif-js를 위챗 미니프로그램에서도 정상적으로 사용할 수 있습니다. 핵심은 파일 시스템 매니저를 통해 이미지를 ArrayBuffer로 읽어오는 것과, 브라우저 전용 API(Blob, Window)에 의존하는 라이브러리 내부 로직을 미니프로그램 환경에 맞게 폴리필(Polyfill)하거나 수정하는 것입니다.