Component: Screenshot Capture Capture DOM elements as downloadable images

What the Screenshot module does

This module captures a selected DOM element and converts it into a downloadable image using the html2canvas library.

• Capture any DOM element
• Convert element to canvas image
• Automatically download screenshot
• Simple attribute-based setup

Install dependency

Install html2canvas in your project.

npm install html2canvas

Basic usage

Add the attribute data-anim-screenshot to a button and specify the target element selector.

<button data-anim-screenshot=".card">
	Download screenshot
</button>

Target element

The selector inside data-anim-screenshot defines which element will be captured.

<div class="card">
	Content to capture
</div>

Full example

<button data-anim-screenshot=".card">
	Download screenshot
</button>

<div class="card">
	Content to capture
</div>

How it works

1. User clicks screenshot button
2. Target element is captured using html2canvas
3. Canvas is converted to base64 image
4. Temporary download link is created
5. Image is downloaded automatically

Download

Allow users to capture UI elements, share designs, or export content as images directly from your interface.