인생네컷 만들기 프로젝트 3 - 화면 저장하기

html2canvas

지난 번에 작성했던
https://velog.io/@fairytale779/TIL-html2canvas
를 이용해서 쉽게 구현하였다

세팅은 위 게시글에 적혀있으니 넘어가고, 함수는 다시 적어보자면 이렇다

  const onFullCapture = () => {
    html2canvas(document.querySelector(".App")).then(
      (canvas) => {
        const link = document.createElement("a");
        link.download = "image";
        link.href = canvas.toDataURL();
        document.body.appendChild(link);
        link.click();
      }
    );
  };

  const onFourCutCapture = () => {
    html2canvas(document.querySelector(".container")).then((canvas) => {
      const link = document.createElement("a");
      link.download = "image";
      link.href = canvas.toDataURL();
      document.body.appendChild(link);
      link.click();
    });
  };

querySelector를 이용해서 두 가지를 만들어주었다
그래서 버튼을 만들어 두 함수들을 넣어주었음

css는 나중에 손보기로 하고...

이렇게 해서 캡처했을 때, 문제를 직면했다.. 뭐하나 쉽게 되는게 없구나 ^__^

일단 네컷 사진은... 가운데 사진들이 css가 적용되지 않은 상태로 출력되었다 ㅠㅠ

그리고 풀화면은 App::before만 적용된? 상태로 나옴.
이건 코드 부분을 수정해도 소용이 없었다 ㅠㅠ 계속 전체에 불투명도가 입혀진 상태로 출력 됨.
근데 그냥 라이브러리다 보니 뭘 어찌해야 될지 몰라 헤매다가 다른 캡처도구를 발건했다.

html-to-image

왜 html2canvas보다 html-to-image가 더 좋은가? 하는 글 https://betterprogramming.pub/heres-why-i-m-replacing-html2canvas-with-html-to-image-in-our-react-app-d8da0b85eadf

• html-to-image : https://www.npmjs.com/package/html-to-image

근데 구글에 정보가 많지 않다..
그래서 깃헙 레포지토리랑 꾸역꾸역 들여다보면서
심지어 자바스크립트로 만들었는데 타입스크립트로 예시가 나와있어서
크게 어렵게 고친건 아니었지만 그래도 칭얼칭얼~

const ref = useRef();

const onButtonClick = useCallback(() => {
    if (ref.current === null) {
      return;
    }

    toPng(ref.current)
      .then((dataUrl) => {
        const link = document.createElement("a");
        link.download = "my-image-name.png";
        link.href = dataUrl;
        link.click();
      })
      .catch((err) => {
        console.log(err);
      });
  }, [ref]);

<button className="capButton" onClick={onButtonClick}>
        전체화면 캡처
</button>

<div ref={ref}>  .... 
  

해주었더니 원하는 대로 출력이 되었다!

우리 고양이 귀여워...