리엑트에서 화면 캡처 기능 만들기

리액트를 사용하면서 특정 구역에 화면을 캡쳐하는 기능을 만들어야 하는 경우가 생겼다.

라이브러리

npmm i html2canvas

화면 캡처로 가장 많이 사용되는 라이브러리인 html2canvas를 사용했다.

코드

import React, { useRef } from 'react';
import html2canvas from 'html2canvas';

const CaptureComponent: React.FC = () => {
//캡처할 html 요소 선택
  const captureRef = useRef<HTMLDivElement>(null);

//캡처 함수 
  const onCapture = () => {

    if (captureRef.current) {
      html2canvas(captureRef.current).then(canvas => {
       
       //사용할 이미지 포멧과 제목 선택
       onSaveAs(canvas.toDataURL('image/png'), 'image-download.png');
      });
    }
  };

//다운로드 함수 
  const onSaveAs = (uri: string, filename: string) => {

//a 태그를 생성하고 다운로드받음 
    const link = document.createElement('a');
    document.body.appendChild(link);
    link.href = uri;
    link.download = filename;
    link.click();
    document.body.removeChild(link);
  };

  return (
    <div>
      <div ref={captureRef} id="capture">
        {/* Your content to be captured */}
      </div>
      <button onClick={onCapture}>Capture</button>
    </div>
  );
};

export default CaptureComponent;

마치며

필요하다 싶은 기능은 왠만하면 누군가 다 만들어 놓은것 같다