Softonic

HTML till bild-konverterare

Steg 1 / 3

Klistra in ett HTML-utdrag. Skript, formulär, ramar och händelsehanterare tas bort före renderingen.

Gör om ett HTML- och CSS-utdrag till en PNG- eller JPG-bild med fast storlek utan att skicka koden eller resultatet till våra servrar. Välj 64 till 1 920 px per sida och en skala från 1x till 3x. Förhandsvisning och hämtning sker i webbläsaren.

Så renderar du HTML som en bild

  1. 1

    Klistra in koden

    Ange ett HTML-utdrag eller dokument. Infogad CSS och `<style>`-regler stöds; skript, formulär, ramar och händelsehanterare tas bort.

  2. 2

    Ställ in bildytan

    Välj PNG eller JPG, ange bredd och höjd och välj en skala från 1x till 3x.

  3. 3

    Rendera förhandsvisningen

    Webbläsaren lägger ut den rensade koden i en isolerad ram med fast storlek.

  4. 4

    Hämta lokalt

    Spara PNG- eller JPG-filen direkt. Den skapade filen skickas inte till våra servrar.

Det här stöder webbläsarens renderer

Konverteraren använder webbläsarens layoutmotor. Vanlig HTML, infogad CSS, <style>-regler, Flexbox, Grid, toningar, skuggor, infogad SVG och installerade teckensnitt kan därför visas i resultatet. Utdata är en stillbild i rasterformat, inte en interaktiv kopia av sidan.

Regler för bildyta och utdata

Inställning Tillåtet intervall Beteende
Bredd 64 till 1 920 px Exakt CSS-bredd på ramen
Höjd 64 till 1 920 px Exakt CSS-höjd; innehåll utanför klipps
Skala 1x till 3x Höjer upplösningen utan att ändra layouten
PNG Rasterbild med fast storlek Bevarar genomskinliga ytor
JPG Rasterbild med fast storlek Använder 92% kvalitet och vit bakgrund

Utdata begränsas till 16 megapixlar för att skydda webbläsarens minne. Om mått och skala överskrider gränsen minskar verktyget skalan till det högsta säkra steget på 0,5x. HTML-källan får innehålla högst 100 000 tecken.

Integritet och externa resurser

HTML-koden och den skapade databilden stannar i den aktuella webbläsaren. I stegläget sparar flikens sessionslagring inställningarna till nästa steg. Börja om raderar dem. Verktyget skickar varken kod eller bild till våra servrar.

En extern webbadress är ett undantag. Bilder, webbteckensnitt och stilmallar hämtas från sina källservrar, som kan se begäran. CORS eller åtkomstskydd kan också stoppa hämtningen. Bädda in bilder och teckensnitt som dataadresser och använd infogad CSS när renderingen ska vara helt offline.

Gränser för säkerhet och återgivning

Skript, formulär, inbäddade ramar, objekt och händelseattribut tas bort före fångsten. Förhandsvisningen blir då passiv, men detta ersätter inte en allmän HTML-rensare för innehåll som publiceras någon annanstans. JavaScript-komponenter körs inte, tillståndet för video och canvas garanteras inte, animeringar blir en stillbild och webbläsarspecifik CSS kan se annorlunda ut i en annan motor.

Vanliga frågor

Ja. Renderern använder kompatibla <style>-regler och stilmallslänkar från dokumenthuvudet och fångar innehållet i body. Skript, metadata, formulär, ramar och aktiva hanterare tas bort, så resultatet är inte en navigerbar webbsida.

Källservern kan blockera användning mellan domäner, kräva inloggning eller svara för sent. Använd en tillgänglig URL som tillåter CORS eller bädda in resursen som en dataadress.

PNG behåller genomskinliga pixlar. JPG använder vit bakgrund och fast kvalitet på 92%, vilket ofta ger mindre fotofiler. Verktyget exporterar inte WebP och har ingen separat kvalitetskontroll.

Konverteraren begränsar utdata till 16 megapixlar. För en stor bildyta väljer den automatiskt högsta säkra steg på 0,5x så att webbläsarens minne inte tar slut.

Relaterade verktyg

OpenAPI-validerare

Klistra in ett OpenAPI- eller Swagger-dokument i JSON eller YAML och kontrollera dess kärnstruktur: versionsfält, info-objekt och paths, med tydliga fel och varningar.

PHP-formaterare

Lägg till radbrytningar och indrag med 2 eller 4 blanksteg i ett enkelt PHP-kodstycke. Granska resultatet: detta är varken en PHP-parser eller en PSR-12-korrigerare.

CSS-laddningsgenerator

Skapa en cirkulär spinnare i ren CSS: ställ in diameter, kanttjocklek, accentfärg och rotationshastighet, förhandsvisa direkt och kopiera den färdiga CSS-koden. Ingen SVG, ingen JavaScript.

Webpack-konfigurationsgenerator

Skapa en webpack.config.js för webpack 5 med vanlig JavaScript, React eller Vue: TypeScript, Babel, CSS eller Sass, bilder, HtmlWebpackPlugin, en utvecklingsserver och raden för npm install.

Protocol Buffers-avkodare

Avkoda Protobuf-byte lokalt från hex, Base64, Base64URL, text eller fil, granska fälttolkningar och exportera en privat rapport.

XSD-validerare

Validera ett XML-dokument mot ett XSD-schema och rapportera element- och typavvikelser med exakta radnummer.

Verktyget finns på andra språk