browser-image-compression

 

 

간단하게 이미지 압축을 위한 라이브러리 입니다.

이 라이브러리를 사용하면 서버에 이미지를 업로드 하기 전에 해상도나 저장 용랼을 줄여 서버에 부담을 줄일 수 있습니다.

 

browser-image-compression 은 이미지 압축을 위해 웹 브라우저에서 실행되는 javascript 모듈입니다.

공식 홈페이지에서는 이미지를 서버에 업로드하기 전에 해상도나 혹은 크기를 줄여 jpeg, png, webp 및 bmp 이미지를

압축하는 데 이 모듈을 사용할 수 있다고 설명하고 있습니다.

 

설치

npm i browser-image-compression

import imageCompression from "browser-image-compression";

 

기본 옵션

const options: Options = { 
  maxSizeMB: number,
  maxWidthOrHeight: number,
  
  onProgress: Function, // 선택사항
  useWebWorker: boolean, // 선택사항
  libURL: string, // 선택사항
  preserveExif: boolean, // 선택사항

  signal: AbortSignal, // 선택사항

  // following options are for advanced users
  maxIteration: number, // 선택사항
  exifOrientation: number, // 선택사항
  fileType: string, // 선택사항
  initialQuality: number, // 선택사항
  alwaysKeepResolution: boolean // 선택사항
}

 

maxSizeMB , maxWidthOrHeight 는 필수적으로 들어가야 하는 옵션입니다. 

maxSizeMB 는 저장할 이미지의 최대 허용 용량을 정해줍니다. 

maxWidthOrHeight 는 옵션을 설정하면 이미지의 최대 너비 또는 높이를 지정할 수 있습니다.

 

사용법

import imageCompression from "browser-image-compression";

const uploadFile = async (event) => {
  const files = e.target.files;
  
  const options = {
    maxSizeMB: 0.5, // 허용하는 최대 사이즈 지정
    maxWidthOrHeight: 1024, // 허용하는 최대 width, height 값 지정
    useWebWorker: true // webworker 사용 여부
  }
  try {
    const compressionFiles = await imageCompression(files, options);
    ....
}

 

imageCompression 은 기본적으로 비동기로 동작합니다 따라서 사용할때 꼭 async or await 을 사용하셔야 합니다.

 

compressionFiles 를 console.log 로 찍어보면 파일 크기가 줄어든 것을 확인하실 수 있습니다.

imageCompression 모듈을 이용하면 크기를 줄인 파일을 Blob 형태로 리턴해 주고 있습니다. 만약 진행하고 있는 프로젝트가 File 타입을 사용한다면 바꾸어 주어야 하겠죠??

const getImgUpload = async (image: File) => {
  const resizingBlob = await imageCompression(image, options);
  const resizingFile = new File([resizingBlob], image.name, { type: image.type });
  return resizingFile;
};

 

여기서 또 이미지의 이름과 jpeg 같은 형식을 바꾸고 싶다면 아래와 같이 바꾸시면 됩니다.

const getImgUpload = async (image: File) => {
  const resizingBlob = await imageCompression(image, options);
  const resizingFile = new File([resizingBlob], "chan.jpeg", { type: "image/jpeg" });
  return resizingFile;
};