1. Tuotteet
  2.   Kuva
  3.   Node.js
  4.   Node-HTML-to-Image
 
  

Ilmainen Node.js Imaging API muuntaa HTML kuvaksi

Avoimen lähdekoodin Node.js-kuvankäsittelykirjasto, joka tukee täysin kuvien lataamista ja muuntamista, kehittäjät voivat muuntaa HTML-sisällön kuviksi (JPEG, PNG, GIF) Node.js-sovelluksissa.

Nopeasti muuttuvassa verkkokehityksen maailmassa kyky muuntaa HTML-koodi kuviksi avaa luovien mahdollisuuksien maailman. Olipa kyse sosiaalisen median grafiikan luomisesta, visuaalisten raporttien luomisesta tai mukautetun sisällön suunnittelusta sähköposteihin, HTML:n muuntaminen kuviksi voi virtaviivaistaa monia prosesseja. Node-HTML-to-Image-kirjasto on avoimen lähdekoodin työkalu, jonka avulla kehittäjät voivat tehdä juuri niin. Se tarjoaa suoraviivaisen tavan luoda kuvia HTML:stä Node.js:n avulla. Ohjelmistokehittäjät voivat luoda upeita visuaaleja, luoda pikkukuvia ja jopa automatisoida tehtäviä, jotka vaativat kuvien luomista. Kirjastossa on useita tärkeitä ominaisuuksia, kuten uusi kuvien luominen, HTML-koodin lataaminen ulkoisesta lähteestä ja muuntaminen kuvaksi, mukautetun CSS:n ja JavaScriptin lisääminen, useiden kuvien luominen kerralla ja niin edelleen.

Node-HTML-to-Image-kirjasto on uskomattoman helppokäyttöinen, ja sen avulla ohjelmistokehittäjät voivat ladata ja muuntaa HTML-merkkijonoja tai tiedostoja korkealaatuisiksi kuviksi vain muutamalla koodirivillä. Tämä Frinyvonnickin kehittämä kirjasto hyödyntää Headless Chromiumin tehoa Puppeteer-kirjaston kautta HTML- ja CSS-tiedostojen muuntamiseen PNG-, JPEG- tai jopa WebP-kuviksi. Näin kehittäjät voivat luoda kuvia, jotka tallentavat HTML:n koko visuaalisen monimutkaisuuden, mukaan lukien tuen nykyaikaiselle CSS:lle, fonteille ja jopa JavaScript-suoritukselle. Voit mukauttaa tulostetta määrittämällä asetuksia, kuten kuvan laadun, leveyden ja korkeuden. Lisäksi käyttäjät voivat poimia kuvia verkkosivuilta, jolloin he voivat rakentaa tehokkaita web-kaappaussovelluksia. Sen joustavuuden, muokattavuuden ja helppokäyttöisyyden ansiosta ei ole ihme, miksi kehittäjät kerääntyvät tähän kirjastoon.

Previous Next

Node-HTML-to-Image-sovelluksen käytön aloittaminen

Suositeltava tapa asentaa Node-HTML-to-Image t on käyttää NPM:ää. Käytä seuraavaa komentoa sujuvaan asennukseen.

Asenna Node-HTML-to-Image NPM:n kautta

npm install node-html-to-image

Install Node-HTML-to-Image via Yarn

yarn add node-html-to-image

Kuvien luominen Node.js:n sisällä olevasta HTML-koodista

Yksi ​​Node-HTML-to-Image-kirjaston suurimmista vahvuuksista on sen yksinkertaisuus ja se voidaan helposti integroida mihin tahansa Node.js-sovellukseen. Vain muutamalla koodirivillä ohjelmistokehittäjät voivat alkaa luoda kuvia HTML-sisällöstä omissa Node.js-sovelluksissaan. Tämä helppokäyttöisyys tekee siitä kaikkien taitotasojen kehittäjien saatavilla. Seuraavassa esimerkissä kirjasto ottaa yksinkertaisen HTML-merkkijonon ja muuntaa sen PNG-kuvaksi. Tulostekuva, image.png, tallennetaan juurihakemistoon.

Kuinka PNG-kuva luodaan HTML-koodista Node.js-sovelluksissa?

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

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

Monimutkainen HTML- ja CSS-tuki

Avoimen lähdekoodin Node-HTML-to-Image ei rajoitu HTML-peruskäsittelyyn. Se pystyy käsittelemään monimutkaisia ​​HTML-dokumentteja laajalla CSS-tyylillä sekä JavaScriptillä. Käytätpä nykyaikaisia ​​CSS-ominaisuuksia, kuten Flexboxia tai Gridiä, tai upottamalla mukautettuja kirjasimia, kirjasto renderöi sisältösi tarkasti kuvatiedostomuotoihin, kuten JPEG, PNG, WebP ja moniin muihin. Tässä on esimerkki, joka osoittaa, kuinka kehittäjät voivat luoda kuvan monimutkaisemmasta HTML-asettelusta, mukaan lukien Flexboxin tyylit ja mukautetut värit, jolloin tuloksena on hyvin suunniteltu kuva.

Kuinka luodaan kuva monimutkaisemmasta HTML-koodista Node.js-sovelluksissa?

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

Muokattavat tulostuskuvamuodot

Node-HTML-to-Image-kirjasto tukee useita tulostuskuvamuotoja, mukaan lukien PNG, JPEG ja WebP. Tämän joustavuuden avulla voit valita parhaan muodon käyttötapauksellesi, olipa kyseessä verkkosuorituskyky tai kuvanlaatu. Tässä on esimerkki, joka näyttää, kuinka käyttäjät voivat määrittää tulosteen JPEG-kuvana, mikä voi olla hyödyllistä skenaarioissa, joissa tiedostokoko on minimoitava laadusta tinkimättä.

Kuinka määritetään tulostuskuvamuoto JPEG-muotoon, kun HTML-muoto muunnetaan kuvaksi Node.js:ssä?

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

Kehittynyt kuvien renderöintituki Node.js:ssä

Node-HTML-to-Image-kirjasto on tarjonnut täydellisen tuen renderöintiprosessin laajalle mukauttamiselle. Ohjelmistokehittäjät voivat määrittää näkymän koon, laitteen skaalaustekijän ja jopa lisätä mukautetun CSS:n ja JavaScriptin HTML-koodiin ennen hahmontamista. Seuraava esimerkki näyttää, kuinka kuva renderöidään mukautetulla 800 x 600 pikselin katseluportilla ja laaduksi on asetettu 100, mikä varmistaa parhaan mahdollisen kuvanlaadun.

Kuinka renderöidä kuvia mukautetulla näkymän koolla ja laadulla Node.js-sovelluksissa?

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