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

Gratis Node.js Imaging API för att konvertera HTML till bild

Node.js bildbehandlingsbibliotek med öppen källkod Utvecklare som fullt ut stöder bildladdning och konvertering, kan konvertera HTML-innehåll till bilder (JPEG, PNG, GIF) inuti Node.js Apps.

I den snabbt föränderliga världen av webbutveckling öppnar möjligheten att konvertera HTML till bilder en värld av kreativa möjligheter. Oavsett om det handlar om att skapa grafik i sociala medier, skapa visuella rapporter eller designa anpassat innehåll för e-postmeddelanden, kan konvertering av HTML till bilder effektivisera många processer. Node-HTML-to-Image-biblioteket är ett öppen källkodsverktyg som gör det möjligt för utvecklare att göra just det, vilket ger ett enkelt sätt att generera bilder från HTML med Node.js. Mjukvaruutvecklare kan skapa fantastiska bilder, generera miniatyrer och till och med automatisera uppgifter som kräver bildgenerering. Det finns flera viktiga funktioner i biblioteket, såsom ny bildgenerering, ladda HTML från extern källa och konvertera den till bild, lägga till anpassad CSS och JavaScript, generera flera bilder samtidigt och så vidare.

Node-HTML-to-Image-biblioteket är otroligt lätt att använda och det tillåter programutvecklare att ladda och konvertera HTML-strängar eller filer till högkvalitativa bilder med bara ett par rader kod. Utvecklat av Frinyvonnick, detta bibliotek utnyttjar kraften i Headless Chromium genom Puppeteer-biblioteket för att rendera HTML och CSS till PNG-, JPEG- eller till och med WebP-bilder. Detta gör det möjligt för utvecklare att skapa bilder som fångar HTMLs fulla visuella komplexitet, inklusive stöd för modern CSS, typsnitt och till och med JavaScript-körning. Du kan anpassa utskriften genom att ange alternativ som bildkvalitet, bredd och höjd. Dessutom kan användare extrahera bilder från webbsidor, så att de kan bygga kraftfulla webbskrapningsapplikationer. Med sin flexibilitet, anpassningsbarhet och användarvänlighet är det inte konstigt varför utvecklare strömmar till det här biblioteket.

Previous Next

Komma igång med Node-HTML-to-Image

Det rekommenderade sättet att installera Node-HTML-to-Image t är att använda NPM. Använd följande kommando för en smidig installation.

Installera Node-HTML-to-Image via NPM

npm install node-html-to-image

Installera Node-HTML-to-Image via Yarn

yarn add node-html-to-image

Bildgenerering från HTML-kod inuti Node.js

En av de största styrkorna med Node-HTML-to-Image-biblioteket är dess enkelhet och kan enkelt integreras med alla Node.js-applikationer. Med bara några rader kod kan mjukvaruutvecklare börja generera bilder från HTML-innehåll i sina egna Node.js-applikationer. Denna enkla användning gör den tillgänglig för utvecklare på alla nivåer. I följande exempel tar biblioteket en enkel HTML-sträng och konverterar den till en PNG-bild. Utdatabilden, image.png, sparas i rotkatalogen.

Hur genererar man PNG-bild från HTML i Node.js Apps?

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

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

Komplex HTML- och CSS-stöd

Öppen källkod Node-HTML-to-Image är inte begränsad till grundläggande HTML-bearbetning. Den kan hantera komplexa HTML-dokument med omfattande CSS-styling såväl som JavaScript. Oavsett om du använder moderna CSS-funktioner som Flexbox eller Grid, eller bäddar in anpassade typsnitt, kommer biblioteket att rendera ditt innehåll till bildfilformat som JPEG, PNG, WebP och många fler. Här är ett exempel som visar hur utvecklare kan skapa en bild från en mer komplex HTML-layout, inklusive stilar för Flexbox och anpassade färger, vilket resulterar i en väldesignad bild.

Hur genererar man en bild från en mer komplex HTML-kod i Node.js Apps?

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!'));

Anpassningsbara bildformat för utdata

Node-HTML-to-Image-biblioteket stöder flera utdatabildformat, inklusive PNG, JPEG och WebP. Denna flexibilitet gör att du kan välja det bästa formatet för ditt specifika användningsfall, oavsett om det gäller webbprestanda eller bildkvalitet. Här är ett exempel som visar hur användare kan ange utdata som en JPEG-bild, vilket kan vara användbart för scenarier där filstorleken måste minimeras utan att kompromissa för mycket med kvaliteten.

Hur anger man utdatabildformatet till JPEG medan HTML till bildkonvertering i Node.js?

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

Stöd för avancerad bildåtergivning i Node.js

Node-HTML-to-Image-biblioteket har tillhandahållit komplett stöd för att anpassa renderingsprocessen omfattande. Mjukvaruutvecklare kan definiera visningsportstorlek, enhetsskalningsfaktor och till och med injicera anpassad CSS och JavaScript i HTML innan rendering. Följande exempel visar hur bilden renderas med en anpassad visningsportstorlek på 800x600 pixlar, och kvaliteten är inställd på 100, vilket säkerställer högsta möjliga bildkvalitet.

Hur renderar man bilder med anpassad vyportstorlek och kvalitet i Node.js-applikationer?

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