[React] 화면 저장, 캡쳐 기능 구현하기(TypeScript)

 

 

 

안녕하세요, 제니입니다!

오늘은 화면 영역을 저장 및 캡쳐하는 기능을 정리해보려고 합니다.

굉장히 간단하고 추후에 계속 사용할 수 있는 영역이라

한 번 정리해두면 유용할 것 같아요!

 

 

 

1-1. 저장 버튼 만들기

<SaveImg src={saveIcon} alt='save-icon' />

 

 

 

어떤 모양으로 만드셔도 상관 없고

일단 버튼 하나 심플하게 만들어주세요.

저는 디자이너님의 icon 이미지로 적용했습니다.

 

 

 

1-2. html2canvas 

javascript로 canvas 영역을 잡아서 캡쳐하는 방법도 있는데 여러가지 문제점이 발생되더라구요.

영역 width, height를 잘 잡아주어도 잡히지 않거나 화면 영역이 까맣게 나오는 현상들이 발생되어서 제가 정착한 방법은 html2canvas 라이브러리 입니다!

 

 

 

1-2-1. html2canvas 다운

yarn add html2canvas

 

 

 

먼저 해당 라이브러리를 다운로드해주겠습니다.

 

 

 

1-2-2. 함수 분리

저는 해당 함수를 여러 곳에서 쓸 거라서, 함수를 재사용하기 위해 분리했습니다.

 

 

 

import html2canvas from 'html2canvas';
import React from 'react';

export const handleDownload = (title: string, ref: React.RefObject<HTMLDivElement>) => () => {
  if (!ref.current) return;

  html2canvas(ref.current).then((canvas) => {
    const link = document.createElement('a');
    link.href = canvas.toDataURL('image/png');
    link.download = title === '' ? '제목없음' : title;
    document.body.appendChild(link);
    link.click();
  });
};

 

 

 

위 코드를 그대로 사용하셔도 되는데, 해당 코드 내에서 title, ref로 보내는 매개변수는 상황에 맞추어 변경해주시면 됩니다!

저는 저장할 때, title를 저장해주고 싶어서 title까지 받아서 사용했구요

 

 

 

link.download = title === '' ? '제목없음' : title;

 

 

 

위 코드에서처럼, title이 빈 값일 경우 '제목없음'으로 저장되도록 구현해주었습니다.

 

 

 

1-2-3. 함수 적용하기

<SaveImg src={saveIcon} onClick={handleDownload(saveTitle, captrueRef)} />

 

 

 

1-1에서 만들었던 아이콘 버튼에, onClick 함수로 적용해주었습니다.

 

 

 

1-3-1. 캡쳐 영역 적용하기

<div>
   <SaveImg src={saveIcon} onClick={handleDownload(saveTitle, captrueRef)} />
   <CaptureContainer ref={captureRef} width={graphData.size.width + colHeaderItemWidth}>
      여기 캡쳐 영역
   </CaptureContainer>
</div>

 

 

 

예시로 위와 같이 코드를 만들어주면, 저장 아이콘을 클릭했을 때,

위에 만들어 둔 handleDownload 함수를 통해 캡쳐 영역만 저장할 수 있습니다.

 

 

 

 

오늘의 정리 완료!