Zamień swój kod HTML na obraz
Wklej do 100 KB kodu HTML i CSS, wybierz szerokość, wysokość, skalę i format, a potem kliknij Wygeneruj.
Jeden projekt, nazwane pola i gotowy obraz przy każdym żądaniu
Kod HTML zamienia się w obraz, bo coś dalej w procesie go potrzebuje: karta Open Graph, pokwitowanie albo certyfikat wystawiany przy rejestracji. DynaPictures przechowuje taki układ jako szablon, w którym tekst, kolory i obrazy są nazwanymi polami, a jedno wywołanie REST API zwraca gotowy plik w mniej niż 300 ms.
- Pola tekstu, obrazu i koloru w każdej warstwie
- Wyślij JSON metodą POST, odbierz gotowy obraz
- Do wyboru PNG, JPEG, WEBP, AVIF, PDF i PPTX
Jak zamienić HTML na PNG albo JPG
Wklej HTML i CSS
Wklej kod do edytora, razem ze stylami inline albo blokiem style. Jeden obraz to maksymalnie 100 KB kodu; linki do Google Fonts są dozwolone.
Ustaw rozmiar i format
Wybierz szerokość i wysokość w pikselach, skalę 1x lub 2x dla ostrego obrazu na ekranach retina oraz format PNG, JPG albo WebP.
Wygeneruj i pobierz
Kliknij Wygeneruj. Obraz pojawi się po kilku sekundach, a link do pobrania działa przez 24 godziny.
Dlaczego warto korzystać z tego konwertera HTML na obraz
Obraz z prawdziwej przeglądarki
Twój kod HTML układa Chromium w trybie headless, więc CSS grid, flexbox, cienie i gradienty wyglądają dokładnie jak w przeglądarce.
Gotowe na ekrany retina
Wybierz skalę 2x, a dostaniesz obraz o dwukrotnie większej gęstości pikseli i ostry tekst na ekranach o wysokiej rozdzielczości.
Trzy formaty wyjściowe
Eksportuj PNG, gdy potrzebujesz przezroczystego tła, JPG do zdjęć i małych plików, a WebP do nowoczesnych stron internetowych.
Izolowane i bezpieczne
JavaScript jest wyłączony, a z zewnątrz można wczytać tylko Google Fonts, więc nic się nie uruchamia i nic nie wycieka.
Jak działa konwersja HTML na obraz
Narzędzie wczytuje Twój kod w izolowanej przeglądarce headless z wybranym obszarem widoku, czeka na załadowanie czcionek i zapisuje stronę jako bitmapę. JavaScript jest wyłączony, a żądania zewnętrzne poza Google Fonts są blokowane, dzięki czemu generowanie jest szybkie i przewidywalne. Wynik jest taki sam jak zrzut ekranu tego kodu HTML, ale dokładnie w rozmiarze i skali, o które prosisz.
Limity darmowego narzędzia
20 obrazów dziennie na osobę, do 100 KB kodu HTML i CSS na obraz, a pliki do pobrania czekają przez 24 godziny.
Generowanie z poziomu kodu
Ten dzienny limit obowiązuje każdego w równym stopniu. Inną drogą jest platforma DynaPictures: generujesz tam obrazy z własnych szablonów przez API, Zapier albo Make lub wypełniasz szablon danymi z arkusza.
Czcionki i zasoby
Linki do Google Fonts dodaj w kodzie HTML. Inne zewnętrzne arkusze stylów, skrypty i obrazy darmowe narzędzie blokuje, więc wstaw je inline albo jako data URL.
Najczęściej zadawane pytania
Wklej kod HTML do edytora, wybierz format PNG, ustaw szerokość i wysokość, a potem kliknij Wygeneruj. Plik pobierzesz z panelu z wynikiem.