[React] 화면 캡처 후 저장 기능 만들기 - Html2Canvas

💻 만드려고 하는 부분

 

요즘 GPT로 그림 일기를 만드는 프로젝트를 제작중인데,

완성된 그림 일기 화면을 캡처해서, 인스타 공유 / 앨범에 저장 기능을 만드려고 한다

---

Html2Canvas 설치 후 적용하기

찾아보니 Html2Canvas 라이브러리를 활용해 간단히 화면 속 영역을 이미지로 바꿀 수 있길래 Html2Canvas를 사용하였다

html2canvas

.

📌 Html2Canvas 설치

npm install html2canvas

yarn add html2canvas

 

📌 import

import html2canvas from "html2canvas";

---

💡 프로젝트 코드에 적용

  const onClickDownloadButton = () => {
    const target = document.getElementById("download");
    if (!target) {
      return alert("사진 저장에 실패했습니다.");
    }
    html2canvas(target).then((canvas) => {
      const link = document.createElement("a");
      document.body.appendChild(link);
      link.href = canvas.toDataURL("image/png");
      link.download = "Haru4cut.png"; // 다운로드 이미지 파일 이름
      link.click();
      document.body.removeChild(link);
    });
  };

 

• html에서 id가 "download"인 부분을 찾아서 캡처하는 코드
• download 요소가 없으면 "사진 저장에 실패했습니다."라는 경고 토스트 메시지 출력
• html2canvas 라이브러리를 사용하여 target 요소를 캡처
• 캡처된 이미지를 데이터 url로 변환해서 <a> 태그의 href 속성에 할당되어서 클릭했을 때 이미지를 다운로드하도록 함

 

return (
    <MainWrap>
      <DownWrap id="download">
        <LogoWrap>
          <Logo>Haru4cut</Logo>
          <LogoUnderLine />
          <div>내 하루를 네컷으로 기록하세요</div>
        </LogoWrap>

        <TodaysDiaryWrap>
          <Date>{moment(date).format("YY.MM.DD")}</Date>
          <Todays4CutDiary>오늘의 네컷일기</Todays4CutDiary>
          <ImgWrap>
            {DiaryImgList.map((imgUrl, index) => (
              <>
                <DiaryImage src={imgUrl} alt="하루네컷 이미지" />
              </>
            ))}
          </ImgWrap>
          <TextWrap>{Text}</TextWrap>
        </TodaysDiaryWrap>
      </DownWrap>
      <div>오늘의 하루네컷을 완성했어요!</div>
      <DownloadButtonWrap>
        <Button width="143px" onClick={onClickShareButton}>
          <Icon src={InstaLogo} />
          인스타 공유
        </Button>
        <Button width="143px" onClick={onClickDownloadButton}>
          <Icon src={DownloadIcon} />
          앨범에 저장
        </Button>
      </DownloadButtonWrap>
      <Button backgroundColor="#9D9D9D" marginBottom="20px">
        <Icon src={HomeIcon} marginBottom="3px" />
        홈으로 돌아가기
      </Button>
    </MainWrap>
  );
}

 

• div에 id="download"를 추가
• 버튼을 눌렀을 때, onClcikShareButton 함수가 실행되도록 함

---

🎥 구현 영상

 

 

앨범에 저장 버튼을 누르면 지정된 영역 부분의 사진이 저장되는 모습을 확인할 수 있다-!

---

📌 참고 링크

html2canvas — does not render images located in the element

[React] 화면(DOM) 캡쳐 및 저장 기능 구현하기 (feat. html2canvas, file-saver)