[리액트] React image file Resize 하기 / react-image-file-resizer

이미지파일을 많이 다루는 업무를 보고 있다. 갑자기 추가된 어떤 이미지에 대해서 프론트쪽에서 사이즈를 바꿔서 전달해야할 일이 생겼다. 그래서 찾아서 쓰게 된 라이브러리가 

 

React Image File Resizer

넓디 넓은 리액트 생태계에서 없는게 없다. 

이미지의 width, height, format 등을 바꿀 수 있게 도와주는 패키지이다. 

 

설치하기 

npm i react-image-file-resizer

or

yarn add react-image-file-resizer

 

 

사용하기

//불러오기
import Resizer from "react-image-file-resizer";

//어떻게 변경할 건지에 대한 내용을 차례 차례 넣어주면 된다. 
Resizer.imageFileResizer(
  file, //바꿔 줄 파일
  maxWidth, // resize 할 최대 가로
  maxHeight, // resize 할 최대 세로
  compressFormat, // 포맷
  quality, // 퀄리티
  rotation, // 업로드될 파일의 방향도 변경할 수 있다 , 해당사항없으면 0
  responseUriFunc, // Is the callBack function of the resized new image URI.
  outputType, // Is the output type of the resized new image.
  minWidth, // 최소 가로
  minHeight // 최소 높이
);

👇적용해보기 

 const resizeFile = (file) =>
     new Promise((resolve) => {
          Resizer.imageFileResizer(
                file,
                400,
                865,
                "PNG",
                100,
                0,
                (uri) => {
                    resolve(uri);
                },
                "blob"
            );
});

promise를 사용해서 작성해보았습니다. 사용하실 때 file안에 변경을 요하는 파일을 넣어줍니다. 

 

 

 

Option 에 대한 설명입니다. 

file	Path of image file	object	Yes
maxWidth	New image max width (ratio is preserved)	number	Yes
maxHeight	New image max height (ratio is preserved)	number	Yes
compressFormat	Can be either JPEG, PNG or WEBP.	string	Yes
quality	A number between 0 and 100. Used for the JPEG compression.(if no compress is needed, just set it to 100)	number	Yes
rotation	Degree of clockwise rotation to apply to the image. Rotation is limited to multiples of 90 degrees.(if no rotation is needed, just set it to 0) (0, 90, 180, 270, 360)	number	Yes
responseUriFunc	Callback function of URI. Returns URI of resized image's base64 format. ex: uri => {console.log(uri)});	function	Yes
outputType	Can be either base64, blob or file.(Default type is base64)	string	No
minWidth	New image min width (ratio is preserved, defaults to null)	number	No
minHeight	New image min height (ratio is preserved, defaults to null)	number	No

 

react-image-file-resizer