browser-image-compression을 활용하여 이미지 최적화하기

프로젝트 진행 중 웹 프로젝트의 일부 화면을 캡처한 이미지를 서버에 저장해야 되는 기능을 구현하게 되었다.

하지만 업로드한 이미지와는 다르게 html2canvas를 활용하여 캡처한 이미지는 데이터가 너무 커 서버에 전달하는데 오류가 많이 발생하는 문제가 생겼다.

다행히도 browser-image-compression라는 라이브러리를 발견하게 됐고 이 라이브러리를 통해 이미지 압축, 포맷 설정 크기 조절 등 이미지를 최적화하여 프로젝트의 성능을 향상할 수 있었고, 서버와의 데이터 통신이 원활히 이루어졌다.

 

 

 

npm i html2canvas browser-image-compression

• html2canvas와 browser-image-compression 라이브러리는 설치되어있어야 한다

 

const handleCaptureElement = async (domRef: React.RefObject<HTMLDivElement>) => {
  if (domRef.current) {
    const canvas = await html2canvas(domRef.current);
    canvas.toBlob(async (captureImageBlob: any) => {
      const options = {
        maxSizeMB: 0.2,
        maxWidthOrHeight: 800,
        useWebWorker: true,
      };
      const compressedImageBlob = await imageCompression(
        captureImageBlob,
        options
      );
      
      return compressedImageBlob;
    }, "image/png");
  }

• html2canvas 라이브러리를 활용하여 특정 dom요소를 캡처한 데이터를 canvas변수에 저장했다.
• canvas 변수를 toBlob을 활용하여 파일 객체인 Blob으로 전환한다.
• option변수에  사이즈 및 크기 등 옵션을 저장한다
• browser-image-compression의 imageCompression을 활용하여 이미지 파일에 지정한 옵션을 설정하여 파일을 압축한다.
• compressedImageBlob에 지정한 옵션으로 압축된 이미지 파일 데이터가 저장된다.