리액트를 사용하면서 특정 구역에 화면을 캡쳐하는 기능을 만들어야 하는 경우가 생겼다.
npmm i html2canvas
화면 캡처로 가장 많이 사용되는 라이브러리인 html2canvas를 사용했다.
import React, { useRef } from 'react';
import html2canvas from 'html2canvas';
const CaptureComponent: React.FC = () => {
//캡처할 html 요소 선택
const captureRef = useRef<HTMLDivElement>(null);
//캡처 함수
const onCapture = () => {
if (captureRef.current) {
html2canvas(captureRef.current).then(canvas => {
//사용할 이미지 포멧과 제목 선택
onSaveAs(canvas.toDataURL('image/png'), 'image-download.png');
});
}
};
//다운로드 함수
const onSaveAs = (uri: string, filename: string) => {
//a 태그를 생성하고 다운로드받음
const link = document.createElement('a');
document.body.appendChild(link);
link.href = uri;
link.download = filename;
link.click();
document.body.removeChild(link);
};
return (
<div>
<div ref={captureRef} id="capture">
{/* Your content to be captured */}
</div>
<button onClick={onCapture}>Capture</button>
</div>
);
};
export default CaptureComponent;
필요하다 싶은 기능은 왠만하면 누군가 다 만들어 놓은것 같다