snapdom
Konwertuj elementy HTML na obrazy SVG i PNG w milisekundach, bez zależności zewnętrznych.
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
snapDOM to narzędzie do szybkiego przechwytywania elementów HTML i konwersji ich na obrazy. Obsługuje formaty SVG, PNG, JPG i WebP, zachowując style CSS, czcionki, pseudo-elementy i efekty cienia. Działa bez dodatkowych bibliotek, wykorzystując tylko standardowe API przeglądarki. Idealne do tworzenia zrzutów ekranu, eksportowania stylizowanych komponentów z osadzonymi czcionkami ikonowymi oraz przetwarzania złożonych elementów DOM z transformacjami i efektami wizualnymi.
Jak używać
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.
Zaimportuj funkcję snapdom do swojego projektu: import { snapdom } from '@zumer/snapdom' (lub z CDN, jeśli używasz tego podejścia).
Wybierz element HTML, który chcesz przechwycić — może to być dowolny element DOM, w tym komponenty z pseudo-elementami, cieniami i transformacjami CSS.
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.
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.
Opcjonalnie dostosuj parametry: ustaw niestandardowe wymiary, skalowanie, wyklucz określone elementy lub użyj systemu wtyczek do transformacji renderowania.