The Complete Production SOP: How to Deploy and Run html2canvas Client-Side DOM Screenshot in Autonomous AI Agents

---
name: "html2canvas-dom-screenshot"
description: "Capture screenshots of live HTML DOM elements directly inside web browsers."
metadata:
  author: "Niklas von Hertzen"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "take screenshot of html element"
  - "convert div to image html2canvas"
  - "download receipt as image"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

import html2canvas from 'html2canvas';

interface ScreenshotOptions {
  scale?: number;
  backgroundColor?: string | null;
  ignoreElements?: (element: Element) => boolean;
}

export async function captureElementToDataUrl(
  target: HTMLElement,
  options: ScreenshotOptions = {}
): Promise<string> {
  // Ensure fonts and images are settled
  await document.fonts.ready;

  const canvas = await html2canvas(target, {
    useCORS: true,
    allowTaint: false,
    scale: options.scale ?? (window.devicePixelRatio || 2),
    backgroundColor: options.backgroundColor !== undefined ? options.backgroundColor : '#ffffff',
    ignoreElements: options.ignoreElements,
    logging: process.env.NODE_ENV === 'development',
  });

  return canvas.toDataURL('image/png');
}

import React, { useState } from 'react';
import { captureElementToDataUrl } from '../utils/domScreenshot';

export const InvoiceDownloadButton: React.FC<{ elementId: string; filename?: string }> = ({
  elementId,
  filename = 'receipt.png',
}) => {
  const [loading, setLoading] = useState(false);

  const handleDownload = async () => {
    const node = document.getElementById(elementId);
    if (!node) return;
    try {
      setLoading(true);
      const dataUrl = await captureElementToDataUrl(node);
      const link = document.createElement('a');
      link.download = filename;
      link.href = dataUrl;
      link.click();
    } catch (err) {
      console.error('Failed to generate image snapshot:', err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <button onClick={handleDownload} disabled={loading} className="btn-primary">
      {loading ? 'Generating Image...' : 'Download Receipt as Image'}
    </button>
  );
};