230811 개발일지 TIL - React에서 html2canvas를 사용한 이미지 저장(화면 캡쳐) 방법

React에서 html2canvas를 사용한 이미지 저장(화면 캡쳐) 방법

html2canvas 설치

yarn add html2canvas

적용 코드

import html2canvas from 'html2canvas';

const Post = (props) => {  
  // 이미지로 저장
  const handleSaveClick = async () => {
    try {
      const page3 = document.querySelector('#page3');
      const page4 = document.querySelector('#page4');
      // html2canvas를 사용하여 Page 3과 Page 4의 내용 캡처
      const [canvasPage3, canvasPage4] = await Promise.all([html2canvas(page3), html2canvas(page4)]);
      // 병합된 캔버스의 전체 너비와 높이 계산
      const totalWidth = canvasPage3.width + canvasPage4.width;
      const totalHeight = Math.max(canvasPage3.height, canvasPage4.height);
      // 병합된 이미지를 위한 새로운 캔버스 생성
      const mergedCanvas = document.createElement('canvas');
      mergedCanvas.width = totalWidth;
      mergedCanvas.height = totalHeight;
      const context = mergedCanvas.getContext('2d');
      // 캡처한 이미지를 병합된 캔버스에 그림
      context.drawImage(canvasPage3, 0, 0);
      context.drawImage(canvasPage4, canvasPage3.width, 0);
      // 병합된 이미지를 다운로드하기 위한 링크 생성
      const linkMerged = document.createElement('a');
      linkMerged.href = mergedCanvas.toDataURL('image/png');
      linkMerged.download = 'download.png';
      linkMerged.click();
    } catch (error) {
      console.error('이미지 저장 오류:', error);
    }
  };  
  
  return (
  	<>
      <Page id="page3">
        <PageContent>
          <PageText3>
            <StyledSubmittedConcern>{submittedConcern}</StyledSubmittedConcern>
          </PageText3>
          <StyledImage src={page3Img} alt="Page 3" />
        </PageContent>
      </Page>
      <Page id="page4">
        <PageContent>
          <PageText4>
            <StyledH3>조언</StyledH3>
            {randomAdvice && (
              <>
                <StyledParagraph>{randomAdvice.message}</StyledParagraph>
                <StyledParagraph2>
                  - {randomAdvice.author} / {randomAdvice.authorProfile} -
                </StyledParagraph2>
              </>
            )}
          </PageText4>
          <StyledImage src={page2Img} alt="Page 4" />
        </PageContent>
      </Page>
      <StyledLinkButton onClick={handleSaveClick}>이미지로 저장</StyledLinkButton>
    </>
  )
};

const StyledLinkButton = styled.div`
  margin: 25px auto 0;
  padding: 0 20px;
  height: 30px;
  font-size: 12px;
  font-weight: 600;
  line-height: 26px;
  border-radius: 20px;
  border: 2px solid #9e9e9e;
  background-color: #fff;
  box-shadow: 1px 1px 1px #686868;
  transition: 0.3s;
  cursor: pointer;
  color: #666;
  &:hover {
    background-color: #9e9e9e;
  }
`;

결과 이미지