[React] 아이폰 HEIC 이미지 JPEG로 변환

 

아이폰의 heic 파일을 업로드할 경우 이미지가 엑박이 뜨는 현상이 발생했다.

업로드 시 heic파일을 제한하면 되겠지만 사용자의 편의를 위해 변환해주는 방법을 알아보았다.

 

 

heic2any 라이브러리 사용

간단하게 라이브러리를 설치하여 해결할 수 있었다.

 

import heic2any from 'heic2any';

const UploadImage = ({ onChange, defaultImage, ...props }) => {
  const [imageSrc, setImageSrc] = useState(defaultImage);
  const fileInputRef = useRef(null);

  const handleFileChange = async (e) => {
    let fileBlob = e.target.files[0];
    const MAX_MB = 10;

    if (!fileBlob) {
      return;
    }
    
    if (/\.(heic)$/i.test(fileBlob.name)) {
      fileBlob = await heic2any({ blob: fileBlob, toType: 'image/jpeg' });
    }

    const reader = new FileReader();
    reader.readAsDataURL(fileBlob);
    reader.onload = () => {
      setImageSrc(reader.result);
      onChange(reader.result);
    };
  };
  
  
  //.. 생략

 

 

 

 

++ 22.11.14

 

Next.js - Blob is not defined

Next.js에서 사용 시 heic2any 함수를 사용하는 것만으로도 Blob is not defined 에러가 나타난다.

 

✅ 해결

if (/\.(heic)$/i.test(fileBlob.name)) {
    const heic2any = require('heic2any');
    fileBlob = await heic2any({ blob: fileBlob, toType: 'image/jpeg' });

    if (!imageFile) {
      return;
    }
}

함수 내부에서 require을 사용하여 불러오면 된다.

 

참고: ReferenceError: Blob is not defined" error when using with NextJS