지난 번에 작성했던
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만 적용된? 상태로 나옴.
이건 코드 부분을 수정해도 소용이 없었다 ㅠㅠ 계속 전체에 불투명도가 입혀진 상태로 출력 됨.
근데 그냥 라이브러리다 보니 뭘 어찌해야 될지 몰라 헤매다가 다른 캡처도구를 발건했다.
왜 html2canvas보다 html-to-image가 더 좋은가? 하는 글 https://betterprogramming.pub/heres-why-i-m-replacing-html2canvas-with-html-to-image-in-our-react-app-d8da0b85eadf
근데 구글에 정보가 많지 않다..
그래서 깃헙 레포지토리랑 꾸역꾸역 들여다보면서
심지어 자바스크립트로 만들었는데 타입스크립트로 예시가 나와있어서
크게 어렵게 고친건 아니었지만 그래도 칭얼칭얼~
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}> ....
해주었더니 원하는 대로 출력이 되었다!
우리 고양이 귀여워...