Image-compression

1. browser-image-compression install

yarn add browser-image-compression

2. 모듈 import

import imageCompression from 'browser-image-compression';

3. 컴포넌트 작성

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

입력받은 파일을 담을 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);
  }
}