이미지
-
[Javascript] 이미지 리사이징으로 용량 줄이기 (Canvas API)Java Script 2024. 3. 27. 13:43
최근에 대한민국 철봉 지도라는 프로젝트를 진행하면서사용자가 지도에 철봉 위치를 등록하면서 주변 사진을 이미지로 업로드하고,업로드한 이미지를 다른 사용자들이 확인할 수 있는 기능을 구현하였습니다. 이때 저희 서비스 특성상 고화질 이미지를 제공할 필요성이 크지 않고,거리뷰를 통해 확인할 수 있는 기능을 제공함으로써 서버의 부담을 줄이고, 로딩 속도를 올리기 위해이미지를 리사이징 하여 용량을 줄이기로 결정하였습니다.| Canvas API를 통한 이미지 리사이징먼저 축소하고자 할 비율과 파일을 받아 Promse를 리턴하는 resizeFile함수를 만들어 줍니다.const resizeFile = async (file: File, scale: number): Promise => { return new Promis..