업로드한 이미지 압축하기(React/browser-image-compression)

Javascript에서 이미지를 업로드 했을 때, 이미지 사이즈를 줄여주는 패키지입니다.

설치

yarn add browser-image-compression
or
npm install browser-image-compression --save

사용법

주요 사용법입니다.

import imageCompression from 'browser-image-compression';

function BrowserImageCompression(){
  const compressImage = async (image: File) => {
    try{
      const options = {
        maxSizeMb: 1,
        maxWidthOrHeight: 300,
      }
      return await imageCompression(image, options);
    } catch(e){
      console.log(e);
    }

    const handleImageUpload = async (e: ChangeEvent<HTMLInputElement>) => {
      const files = e.target.files;
      if(files && files[0]){
        const originalImage = files[0];
        const compressedImage = await compressImage(originalImage);
      }
    }

    return <input type="file" accept="image/*" onChange={handleImageUpload} />;
};

결과 화면

참고

https://www.npmjs.com/package/browser-image-compression

browser-image-compression