[ Next.JS ] Input 태그에서 HEIC 확장자를 jpeg로 변환하기

 프로젝트를 진행하던 도중 테스트를 하고 있는데 아이폰에서 찍은 사진을 맥북으로 받아와 업로드하려고 하는데서 문제가 생겼다.

 

 기존에 아래처럼 accept props에 이미지의 모든 확장자를 다 받게 설정을 해뒀는데 HEIC 이미지는 여기에 해당이 되지 않아서 이미지들이 선택이 되지 않았다.

<input
    type="file"
    multiple
    accept="image/*"
    ref={fileInputRef}
    onChange={handleImageUpload}
    id="images"
    hidden
/>

 아래처럼 image/heic를 추가해 주면 HEIC 이미지들도 input에서 선택이 가능하다.

<input
    type="file"
    multiple
    accept="image/*,image/heic"
    ref={fileInputRef}
    onChange={handleImageUpload}
    id="images"
    hidden
/>

 그리고 이제 HEIC 파일들을 jpeg로 변환해 주기 위해 heic2any 라이브러리를 다운로드해야 한다. 해당 라이브러리는 HEIC 파일을 JPEG 또는 PNG로 변환할 수 있다.

$ npm install heic2any

https://www.npmjs.com/package/heic2any

heic2any

이미지들을 돌면서 heic 확장자를 찾고 변환을 시켜준다.

promise.all을 사용해서 모든 heic 확장자의 변환이 완료될 때까지 기다려준다.

import heic2any from 'heic2any';

aync function handleImageUpload(e) {
    const files = e.target.files;
    const filesArray = Array.from(files);

    const newArray = await Promise.all(
    filesArray.map(async file => {
          if (file.type === 'image/heic' || file.name.endsWith('.HEIC')) {
            file = await heic2any({
              blob: file,
              toType: 'image/jpeg',
            });
          }
          return URL.createObjectURL(file);
        }),
    );
}

r