---
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
---

# html2canvas Client-Side DOM Screenshot

Renders DOM element hierarchies into canvas elements using html2canvas: CSS styling emulation, image cross-origin handling, font rendering, and base64 snapshot generation.

## When to Invoke
Invoke this skill whenever you need to:
- take screenshot of html element
- convert div to image html2canvas
- download receipt as image

## Execution SOP & Rules
1. Invoke html2canvas(targetElement, { useCORS: true, scale: window.devicePixelRatio }).
2. Avoid unsupported complex CSS properties (e.g. backdrop-filter) inside capture containers.
3. Convert resulting canvas to image data with canvas.toDataURL('image/png').
4. Handle async image loading completely before initiating html2canvas capture.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.