Front-end Developer
heic 이미지 파일을 jpeg로 변환하기 본문
아이폰 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)
})
}
}
잘 이해가 안되거나 궁금한게 있으시면 댓글을 달아주세요. 성심성의껏 답변해드리겠습니다.😀
'React' 카테고리의 다른 글
<Nextjs> RouteGuard 컴포넌트 (2023/04/09) (0) | 2023.10.12 |
---|---|
리액트 클릭한 버튼만 스타일링 주기 (0) | 2021.04.25 |
React (카카오 맵) 주소 입력했을 때 해당 주소에 마커 나타내기 (0) | 2021.04.25 |
React (카카오 맵) 줌 인 아웃 버튼 넣기 (0) | 2021.04.24 |
React (카카오 맵) 마커 종류별로 나누기 (0) | 2021.04.24 |
Comments