[html2canvas] html2canvas로 UI를 이미지로 다운로드 하기

  async function handleDownload() {
    // 요소 선택
    const card = document.querySelector(".className") as HTMLElement;
    // 요소가 없으면 종료
    if (!card) return;

    // 요소를 캔버스로 변환
    const canvas = await html2canvas(card, {
      scale: 2,
      backgroundColor: "#ffffff",
      logging: false,
    });

    // 이미지 데이터 추출
    const imageData = canvas.toDataURL("image/png").split(",")[1];
    // 파일명 설정
    const fileName = `파일명.png`;
    // 특수문자를 '_'로  변경
    const safeFileName = fileName.replace(/[\\/:*?"<>|]/g, "_");

    // 다운로드 링크 생성
    const link = document.createElement("a");
    // 다운로드 링크 설정
    link.download = safeFileName;
    // 다운로드 링크 설정
    link.href = `data:image/png;base64,${imageData}`;
    // 다운로드 링크 추가
    document.body.appendChild(link);
    // 다운로드 링크 클릭
    link.click();
    document.body.removeChild(link);
  }