React

heic 이미지 파일을 jpeg로 변환하기

Brad Daeho Lee 2021. 5. 19. 20:43

 

 

아이폰 11부터는 이미지 파일이 heic타입이기 때문에 사진을 업로드 할 때 jpeg 또는 png로 변환시켜야합니다.

파일 형식을 변환시키기 위해서 heic2any라는 라이브러리를 사용했습니다. 자세한 사용방법을 알기 원하신다면 https://alexcorvi.github.io/heic2any/ 로 들어가서 참고해주세요!

 

제가 어떻게 이 외부라이브러리를 사용해서 이미지 타입을 변환시켰는지 보여드리겠습니다.

 

import heic2any from "heic2any"
//heic2any라는 외부 라이브러리를 사용해서 문제를 해결했습니다.

const selectFile = (e) => {
    const reader = new FileReader();
    let file = fileInput.current.files[0]
    console.log(file)
    if(file.name.split('.')[1] === 'heic'){
      let blob = fileInput.current.files[0];
      // blob에다가 변환 시키고 싶은 file값을 value로 놓는다.
      // toType에다가는 heic를 변환시키고싶은 이미지 타입을 넣는다.
      heic2any({blob : blob, toType : "image/jpeg"})
      .then(function (resultBlob) {
      //file에 새로운 파일 데이터를 씌웁니다.
        file = new File([resultBlob], file.name.split('.')[0]+".jpg",{type:"image/jpeg", lastModified:new Date().getTime()});
        console.log(file)
        props.setImage(file)
        reader.readAsDataURL(file);
        reader.onloadend = () => {
        dispatch(setPreview(reader.result))
    }
      })
      .catch(function (x){
        console.log(x)
      })
    } 
  }

 

잘 이해가 안되거나 궁금한게 있으시면 댓글을 달아주세요. 성심성의껏 답변해드리겠습니다.😀