Se vuoi fare uno screenshot di parte o di tutta la tua pagina web usando JavaScript, potresti trovarti bloccato. La creazione di un'immagine da un elemento HTML può sembrare una sfida, poiché non esiste un modo diretto per farlo in JavaScript.

Per fortuna, questo non è un compito impossibile ed è, in effetti, abbastanza facile con gli strumenti adeguati. Utilizzando la libreria html-to-image, creare immagini di nodi DOM è semplice come una singola chiamata di funzione.

Come funziona da html a immagine?

Il da html a immagine library produce un'immagine sotto forma di URL di dati base64. Supporta diversi formati di output, inclusi PNG, JPG e SVG. Per eseguire questa conversione, la libreria utilizza questo algoritmo:

  1. Crea un clone dell'elemento HTML di destinazione, dei suoi figli e di eventuali pseudo-elementi allegati.
  2. Copia lo stile per tutti gli elementi clonati e incorpora lo stile in linea.
  3. Incorpora i font web pertinenti, se presenti.
  4. Incorpora tutte le immagini presenti.
  5. Converti il ​​nodo clonato in XML, quindi SVG.
  6. Usa l'SVG per creare un URL di dati.
instagram viewer

Avvertenze e limitazioni

Anche se html-to-image è un'ottima libreria, non è perfetta. Ha alcuni avvertimenti, vale a dire:

  • La libreria non funzionerà in Internet Explorer o Safari.
  • Se l'HTML che provi a convertire include un elemento canvas contaminato, la libreria fallirà. Come MDN spiega, l'inclusione di dati non approvati da CORS nell'elemento canvas lo contaminerà.
  • Poiché i browser impongono limiti alla dimensione massima di un URL di dati, esistono limiti alla dimensione dell'HTML che la libreria può convertire.

Usando la Libreria

Per provare la libreria, la prima cosa che devi fare è creare una directory di progetto sul tuo computer locale. Quindi, installa html-to-image in quella directory usando il gestore di pacchetti npm. Ecco il comando da terminale per installarlo:

npm installare--save html-to-immagine

Dovresti anche installare un bundler JavaScript, per rendere un po' più semplice l'uso della libreria. Il costruire bundler può aiutare a impacchettare i moduli del nodo in script compatibili con il Web.

npm installare costruire

Questo è tutto ciò che devi installare. Quindi, crea un file chiamato indice.html nella tua directory e servilo con un server web a tua scelta. Inserisci il seguente codice in index.html:

<!doc digita html>
<lingua html="it">
<testa>
<metacarattere="UTF-8">
<metanome="vista"
 contenuto="larghezza=larghezza-dispositivo, scalabile-utente=no, scala-iniziale=1.0, scala-massima=1.0, scala-minima=1.0">
<meta http-equiv="Compatibile con X-UA" contenuto="cioè = bordo">
<titolo>Documento</title>
<stile>
 .div-colorato {
 imbottitura: 3rem;
 colore bianco;
 immagine di sfondo: gradiente lineare (a destra, giallo, viola porpora);
 bordo: 1px nero pieno;
 margine: 1rem auto;
 dimensione del carattere: 3rem;
 font-family: corsivo;
 }
</style>
</head>
<corpo>
<classe div="colorato-div">
 io'Sarò in uno screenshot!
</div>
<classe div="testo lungo">
 io'm un esempio di paragrafo sufficientemente dettagliato che
 illustra che l'acquisizione di schermate in JavaScript è
 davvero molto facile, per i seguenti motivi:
<ul>
<li>Motivo 1</li>
<li>Motivo 2</li>
<li>Motivo 2</li>
</ul>
</div>
<sorgente dello script="out.js"></script>
</body>
</html>

Questo codice crea due elementi nella pagina: un div con uno sfondo sfumato, del testo e un elenco non ordinato all'interno di un altro div. Successivamente, scriverai il JavaScript per convertire questi elementi in immagini. Inserisci il codice seguente in un nuovo file chiamato script.js:

importare * come htmlToImage da "da-html a immagine";
costelems = ['.colorato-div', '.testo lungo']


elem.per ciascuno((elemento, ind) => {
cost nodo = documento.querySelector (elemento)
htmlToImage.toPng(nodo)
 .poi(funzione (dataUrl) {
permettere img = nuovo Immagine();
 img.src = dataUrl;
documento.corpo.appendChild(img);
 })
 .presa(funzione(errore){
 console.errore('Oops! Qualcosa è andato storto!');
consolle.log (errore)
 });
})

Questo codice fa alcune cose:

  • Importa la libreria da html a immagini.
  • Crea un array composto da selettori CSS mirati ai due elementi.
  • Crea un'immagine PNG sotto forma di URL di dati da ogni elemento dell'array.
  • Crea un tag img e imposta il suo attributo src sull'URL dei dati, creando copie immagine dei due elementi.

Ora usa esbuild per generare il file in bundle (out.js) che index.html fa riferimento eseguendo quanto segue nel tuo terminale:

 ./node_modules/.bin/esbuild script.js --bundle --outfile=out.js

A questo punto, ecco come dovrebbe apparire index.html nel tuo browser:

Anche se le copie hanno lo stesso aspetto degli originali, in realtà sono elementi dell'immagine. Puoi confermarlo entro aprendo i tuoi strumenti di sviluppo e ispezionandoli.

Questa libreria funziona anche con i framework JavaScript. Il documentazione da html a immagine contiene istruzioni su come generare altri formati di immagine. Include anche un esempio che mostra come utilizzare la libreria con React.

Prendere screenshot con JavaScript è facile

Non esiste un metodo JavaScript nativo per creare immagini da elementi HTML o acquisire schermate del DOM. Tuttavia, con l'aiuto di librerie e servizi come html-to-image, diventa un compito facile.

Esistono altri modi per ottenere risultati simili, come la libreria wkhtmltoimage. Puoi utilizzare questo strumento open source per acquisire schermate di una pagina Web completa.