Toolverse
All skills

snapdom

by 2025Emma

snapDOM is a fast, accurate DOM-to-image capture tool that converts HTML elements into scalable SVG images. Use for capturing HTML elements, converting DOM to images (SVG, PNG, JPG, WebP), preserving styles, fonts, and pseudo-elements.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
2025Emma
Category
Frontend
Views
3

About this skill

snapDOM is a fast, accurate DOM-to-image capture tool that converts HTML elements into scalable SVG images. Use for capturing HTML elements, converting DOM to images (SVG, PNG, JPG, WebP), preserving styles, fonts, and pseudo-elements.

How to use

  1. Zainstaluj snapDOM za pomocą npm lub yarn: npm install @zumer/snapdom. Alternatywnie możesz załadować bibliotekę z CDN jako moduł ES, dodając tag script z importem z unpkg.com.

  2. Zaimportuj funkcję snapdom do swojego projektu: import { snapdom } from '@zumer/snapdom' (lub z CDN, jeśli używasz tego podejścia).

  3. Wybierz element HTML, który chcesz przechwycić — może to być dowolny element DOM, w tym komponenty z pseudo-elementami, cieniami i transformacjami CSS.

  4. Wywołaj snapdom na wybranym elemencie, określając żądany format wyjściowy: SVG dla wektorów, PNG/JPG/WebP dla rastrów, Canvas dla dalszego przetwarzania, lub Blob dla surowych danych binarnych.

  5. Obsługuj wynik — otrzymasz obraz w wybranym formacie, gotowy do pobrania, wyświetlenia lub przesłania. Dla zasobów zablokowanych przez CORS biblioteka automatycznie spróbuje użyć fallback proxy.

  6. Opcjonalnie dostosuj parametry: ustaw niestandardowe wymiary, skalowanie, wyklucz określone elementy lub użyj systemu wtyczek do transformacji renderowania.

Related skills