[Library] browser-image-compression - 이미지 압축 라이브러리

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

• 설치

  yarn add browser-image-compression

• 사용법

  async function handleImageUpload(event) {
  
    const imageFile = event.target.files[0]; // 입력받은 file객체
    const options = {
      maxSizeMB: 1, // 허용하는 최대 사이즈 지정
      maxWidthOrHeight: 1920, // 허용하는 최대 width, height 값 지정
      useWebWorker: true // webworker 사용 여부
    }
    try {
      const compressedFile = await imageCompression(imageFile, options);
      // 압축된 이미지 리턴
      await uploadToServer(compressedFile); 
    } catch (error) {
      console.log(error);
    }
  }

• options

  const options: Options = { 
    maxSizeMB: number,            // (default: Number.POSITIVE_INFINITY)
    maxWidthOrHeight: number,     // compressedFile will scale down by ratio to a point that width or height is smaller than maxWidthOrHeight (default: undefined)
                                  // but, automatically reduce the size to smaller than the maximum Canvas size supported by each browser.
                                  // Please check the Caveat part for details.
    onProgress: Function,         // optional, a function takes one progress argument (percentage from 0 to 100) 
    useWebWorker: boolean,        // optional, use multi-thread web worker, fallback to run in main-thread (default: true)
  
    signal: AbortSignal,          // options, to abort / cancel the compression
  
    // following options are for advanced users
    maxIteration: number,         // optional, max number of iteration to compress the image (default: 10)
    exifOrientation: number,      // optional, see https://stackoverflow.com/a/32490603/10395024
    fileType: string,             // optional, fileType override e.g., 'image/jpeg', 'image/png' (default: file.type)
    initialQuality: number,       // optional, initial quality value between 0 and 1 (default: 1)
    alwaysKeepResolution: boolean // optional, only reduce quality, always keep width and height (default: false)
  }