React | 이미지 크기 줄여 업로드하기 (image resize / browser-image-compression)

npm browser-image-compression패키지를 사용하여 이미지 사이즈를 줄이는 방법

 

1. browser-image-compression install

npm i browser-image-compression

 

2. 모듈 import

import imageCompression from 'browser-image-compression';

 

3. 컴포넌트 작성

 

file을 입력받을 input태그와 이미지를 미리보기 할 img태그 생성

*이미지 미리보기는 이전글 참고 - React | 이미지 업로드 후 미리보기 (on Change / image preview)

 

입력받은 파일을 담을 file state와 미리보기를 위한 fileUrl state도 생성

 

import React, {useState, useEffect} from 'react';
import imageCompression from 'browser-image-compression';  

function ProfileModify () {
  const [file, setFile] = useState(null);
  const [fileUrl, setFileUrl] = useState("");

  return (
    <>
      <input type='file' accept='image/jpg,image/png,image/jpeg,image/gif' 
      id='profile_img_upload' onChange={handleFileOnChange}
      />

      <label for='profile_img_upload'>
      <img src={camera} alt="camera" />
      </label>

      <img className="top_bar_profile_img" src={fileUrl} alt="profile_img" />
    </>
  )

}

 

4. resize를 위한 함수 작성

const handleFileOnChange = async (e) => {
  let file = e.target.files[0];	// 입력받은 file객체
  
  // 이미지 resize 옵션 설정 (최대 width을 100px로 지정)
  const options = { 
  	maxSizeMB: 2, 
  	maxWidthOrHeight: 100
  }
  
  try {
    const compressedFile = await imageCompression(file, options);
    setFile(compressedFile);
    
    // resize된 이미지의 url을 받아 fileUrl에 저장
    const promise = imageCompression.getDataUrlFromFile(compressedFile);
    promise.then(result => {
    	setFileUrl(result);
    })
  } catch (error) {
  	console.log(error);
  }
}

 

리사이즈가 잘 되었네요..

 

+ 참고

browser-image-compression