Function DownloadCardButton

components/download-card-button.tsx:71–156

({
  targetId,
  fileName = "github-creature.png",
  pixelRatio = 2,
}: DownloadCardButtonProps)

}

export default function DownloadCardButton({
  targetId,
  fileName = "github-creature.png",
  pixelRatio = 2,
}: DownloadCardButtonProps) {
  const [isDownloading, setIsDownloading] = React.useState(false);

  const onDownload = React.useCallback(async () => {
    const node = document.getElementById(targetId);
    if (!node) return;

    setIsDownloading(true);
    try {
      try {
        await document.fonts?.ready;
      } catch {
        // ignore
      }

      const webglCaptures = captureWebGLCanvases(node);

      const dataUrl = await domToPng(node, {
        scale: pixelRatio,
        features: {
          removeControlCharacter: false,
        },
        onCloneNode: (clonedNode) => {
          if (!(clonedNode instanceof HTMLElement)) return;

          const clonedCanvases = clonedNode.querySelectorAll("canvas");
          const originalCanvases = node.querySelectorAll("canvas");

          clonedCanvases.forEach((clonedCanvas, index) => {
            const originalCanvas = originalCanvases[index];
            const capture = webglCaptures.get(originalCanvas);

            if (capture) {
              const img = document.createElement("img");
              img.src = capture;
              img.style.cssText = clonedCanvas.style.cssText;
              img.style.width =
                clonedCanvas.style.width || `${originalCanvas.offsetWidth}px`;
              img.style.height =
                clonedCanvas.style.height || `${originalCanvas.offsetHeight}px`;
              img.style.position = "absolute";
              img.style.top = "0";
              img.style.left = "0";

              clonedCanvas.parentNode?.replaceChild(img, clonedCanvas);
            }
          });

          if (clonedNode.id === targetId) {
            clonedNode.style.transform = "none";
            clonedNode.style.transformStyle = "flat";
          }
        },
      });