1. Produkter
  2.   Bilde
  3.   Node.js
  4.   Node-HTML-to-Image
 
  

Gratis Node.js Imaging API for å konvertere HTML til bilde

Åpen kildekode Node.js bildebehandlingsbibliotek Utviklere som fullt ut støtter bildelasting og konvertering, kan konvertere HTML-innhold til bilder (JPEG, PNG, GIF) i Node.js Apps.

I den raskt skiftende verdenen av nettutvikling åpner muligheten til å konvertere HTML til bilder en verden av kreative muligheter. Enten det er å generere grafikk på sosiale medier, lage visuelle rapporter eller designe tilpasset innhold for e-poster, kan konvertering av HTML til bilder strømlinjeforme mange prosesser. Node-HTML-to-Image-biblioteket er et åpen kildekodeverktøy som lar utviklere gjøre nettopp det, og gir en enkel måte å generere bilder fra HTML ved hjelp av Node.js. Programvareutviklere kan lage imponerende bilder, generere miniatyrbilder og til og med automatisere oppgaver som krever bildegenerering. Det er flere viktige funksjoner i biblioteket, for eksempel ny bildegenerering, last inn HTML fra ekstern kilde og konverter den til bilde, legg til tilpasset CSS og JavaScript, generer flere bilder samtidig og så videre.

Node-HTML-to-Image-biblioteket er utrolig enkelt å bruke, og det lar programvareutviklere laste inn og konvertere HTML-strenger eller filer til bilder av høy kvalitet med bare et par linjer med kode. Dette biblioteket er utviklet av Frinyvonnick og utnytter kraften til Headless Chromium gjennom Puppeteer-biblioteket for å gjengi HTML og CSS til PNG-, JPEG- eller til og med WebP-bilder. Dette lar utviklere lage bilder som fanger den fulle visuelle kompleksiteten til HTML, inkludert støtte for moderne CSS, fonter og til og med JavaScript-kjøring. Du kan tilpasse utskriften ved å spesifisere alternativer som bildekvalitet, bredde og høyde. Dessuten kan brukere trekke ut bilder fra nettsider, slik at de kan bygge kraftige nettskrapingsapplikasjoner. Med sin fleksibilitet, tilpassbarhet og brukervennlighet er det ikke rart hvorfor utviklere strømmer til dette biblioteket.

Previous Next

Kom i gang med Node-HTML-to-Image

Den anbefalte måten å installere Node-HTML-to-Image t på er å bruke NPM. Bruk følgende kommando for en jevn installasjon.

Installer Node-HTML-to-Image via NPM

npm install node-html-to-image

Installer Node-HTML-to-Image via Yarn

yarn add node-html-to-image

Bildegenerering fra HTML-kode inne i Node.js

En av hovedstyrkene til Node-HTML-to-Image-biblioteket er dets enkelhet og kan enkelt integreres med alle Node.js-applikasjoner. Med bare noen få linjer med kode kan programvareutviklere begynne å generere bilder fra HTML-innhold i sine egne Node.js-applikasjoner. Denne brukervennligheten gjør den tilgjengelig for utviklere på alle ferdighetsnivåer. I det følgende eksempelet tar biblioteket en enkel HTML-streng og konverterer den til et PNG-bilde. Utdatabildet, image.png, lagres i rotkatalogen.

Hvordan genererer jeg PNG-bilde fra HTML i Node.js-apper?

const nodeHtmlToImage = require('node-html-to-image');

nodeHtmlToImage({
  output: './image.png',
  html: '
Hello, World!
'
})
  .then(() => console.log('Image created successfully!'));

Kompleks HTML- og CSS-støtte

Åpen kildekode Node-HTML-to-Image er ikke begrenset til grunnleggende HTML-behandling. Den kan håndtere komplekse HTML-dokumenter med omfattende CSS-styling så vel som JavaScript. Enten du bruker moderne CSS-funksjoner som Flexbox eller Grid, eller legger inn tilpassede fonter, vil biblioteket nøyaktig gjengi innholdet ditt til bildefilformater som JPEG, PNG, WebP og mange flere. Her er et eksempel som viser hvordan utviklere kan generere et bilde fra en mer kompleks HTML-layout, inkludert stiler for Flexbox og egendefinerte farger, noe som resulterer i et godt designet bilde.

Hvordan genererer jeg et bilde fra en mer kompleks HTML-kode i Node.js-apper?

const nodeHtmlToImage = require('node-html-to-image');

const htmlContent = `

  
    

      

        
Welcome to My Website

        
Building the web, one pixel at a time.

      

    

  
`;

nodeHtmlToImage({
  output: './welcome-image.png',
  html: htmlContent
})
  .then(() => console.log('Complex layout image created successfully!'));

Tilpassbare utdataformater

Node-HTML-to-Image-biblioteket støtter flere utdataformater, inkludert PNG, JPEG og WebP. Denne fleksibiliteten lar deg velge det beste formatet for ditt spesifikke bruksområde, enten det er for nettytelse eller bildekvalitet. Her er et eksempel som viser hvordan brukere kan spesifisere utdataene som et JPEG-bilde, noe som kan være nyttig for scenarier der filstørrelsen må minimeres uten å gå for mye på kompromiss med kvaliteten.

Hvordan spesifisere utdatabildeformatet til JPEG mens HTML til bildekonvertering i Node.js?

nodeHtmlToImage({
  output: './output-image.jpg',
  html: '
JPEG Image Example
',
  type: 'jpeg'
})
  .then(() => console.log('JPEG image created successfully!'));

Støtte for avansert bildegjengivelse i Node.js

Node-HTML-to-Image-biblioteket har gitt fullstendig støtte for å tilpasse gjengivelsesprosessen omfattende. Programvareutviklere kan definere viewport-størrelse, enhetsskaleringsfaktor og til og med injisere tilpasset CSS og JavaScript i HTML-en før gjengivelse. Følgende eksempel viser hvordan bildet gjengis med en tilpasset visningsportstørrelse på 800x600 piksler, og kvaliteten er satt til 100, noe som sikrer høyest mulig bildekvalitet.

Hvordan gjengi bilder med tilpasset visningsportstørrelse og -kvalitet i Node.js-applikasjoner?

nodeHtmlToImage({
  output: './custom-image.png',
  html: '
Custom Viewport
',
  viewport: { width: 800, height: 600 },
  quality: 100
})
  .then(() => console.log('Image with custom viewport created successfully!'));
 Norsk