Hvis du vil ta et skjermbilde av deler av eller hele nettsiden din ved hjelp av JavaScript, kan det hende du sitter fast. Å lage et bilde fra et HTML-element kan virke som en utfordring, siden det ikke er noen direkte måte å gjøre det på i JavaScript.

Heldigvis er dette ikke en umulig oppgave og er faktisk ganske enkelt med de riktige verktøyene. Ved å bruke html-til-bilde-biblioteket er det like enkelt å lage bilder av DOM-noder som et enkelt funksjonskall.

Hvordan fungerer html-til-bilde?

De html-til-bilde biblioteket produserer et bilde i form av en base64-data-URL. Den støtter flere utdataformater, inkludert PNG, JPG og SVG. For å utføre denne konverteringen bruker biblioteket denne algoritmen:

  1. Lag en klone av HTML-målelementet, dets underordnede elementer og eventuelle vedlagte pseudoelementer.
  2. Kopier stylingen for alle klonede elementer og bygg inn stylingen på linje.
  3. Bygg inn relevante nettfonter, hvis det er noen.
  4. Bygg inn eventuelle bilder som finnes.
  5. Konverter den klonede noden til XML, og deretter SVG.
  6. Bruk SVG til å opprette en data-URL.
instagram viewer

Forbehold og begrensninger

Selv om html-to-image er et flott bibliotek, er det ikke perfekt. Den har noen forbehold, nemlig:

  • Biblioteket vil ikke fungere i Internet Explorer eller Safari.
  • Hvis HTML-en du prøver å konvertere inneholder et forurenset lerretselement, vil biblioteket mislykkes. Som MDN forklarer, inkludert ikke-CORS-godkjente data i lerretselementet ditt vil skjemme det.
  • Fordi nettlesere setter grenser for maksimal størrelse på en data-URL, er det grenser for størrelsen på HTML-en biblioteket kan konvertere.

Bruke biblioteket

For å prøve biblioteket, er det første du må gjøre å lage en prosjektkatalog på din lokale maskin. Deretter installerer du html-til-bilde i den katalogen med npm-pakkebehandleren. Her er terminalkommandoen for å installere den:

npm installere--lagre html-til-bilde

Du bør også installere en JavaScript-bunter, for å gjøre det litt enklere å bruke biblioteket. De esbuild bundler kan hjelpe med å pakke nodemoduler inn i webkompatible skript.

npm installere esbuild

Det er alt du trenger for å installere. Deretter oppretter du en fil som heter index.html i katalogen din, og server den med en webserver du velger. Sett inn følgende kode i index.html:

<!doctype html>
<html lang="no">
<hode>
<metategnsett="UTF-8">
<metanavn="viewport"
 innhold="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-kompatibel" innhold="dvs. = kant">
<tittel>Dokument</title>
<stil>
 .colorful-div {
 polstring: 3rem;
 farge: hvit;
 bakgrunnsbilde: lineær gradient (til høyre, gul, rebeccapurple);
 kantlinje: 1px helt svart;
 margin: 1rem auto;
 skriftstørrelse: 3rem;
 font-familie: kursiv;
 }
</style>
</head>
<kropp>
<div klasse="fargerik-div">
 Jeg'jeg kommer til å være med på et skjermbilde!
</div>
<div klasse="lang tekst">
 Jeg'm et eksempel på et tilstrekkelig detaljert avsnitt som
 illustrerer at det å ta skjermbilder i JavaScript er
 veldig enkelt, av følgende grunner:
<ul>
<li>Grunn 1</li>
<li>Grunn 2</li>
<li>Grunn 2</li>
</ul>
</div>
<script src="out.js"></script>
</body>
</html>

Denne koden lager to elementer på siden: en div med en gradientbakgrunn, og litt tekst og en uordnet liste inne i en annen div. Deretter skal du skrive JavaScript for å konvertere disse elementene til bilder. Legg inn følgende kode i en ny fil kalt script.js:

import * som htmlToImage fra "html-til-bilde";
const elems = ['.fargerike-div', '.lang tekst']


elems.for hver((elem, ind) => {
konst node = dokument.querySelector (elem)
htmlToImage.toPng(node)
 .deretter(funksjon (dataUrl) {
la img = ny Bilde();
 img.src = dataUrl;
dokument.kropp.appendChild(img);
 })
 .å fange(funksjon(feil){
 console.error('Oops! Noe gikk galt!');
konsoll.log (feil)
 });
})

Denne koden gjør et par ting:

  • Importerer html-til-bilde-biblioteket.
  • Oppretter en matrise laget av CSS-velgere rettet mot de to elementene.
  • Oppretter et PNG-bilde i form av en data-URL fra hvert element i matrisen.
  • Oppretter en img-tag og setter src-attributtet til data-URLen, og lager bildekopier av de to elementene.

Bruk nå esbuild for å generere den medfølgende filen (out.js) som index.html refererer til ved å kjøre følgende i terminalen din:

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

Slik skal index.html se ut i nettleseren din:

Selv om kopiene ser helt like ut som originalene, er de faktisk bildeelementer. Du kan bekrefte dette ved å åpne utviklerverktøyene dine og inspisere dem.

Dette biblioteket fungerer også med JavaScript-rammeverk. De html-til-bilde dokumentasjon inneholder instruksjoner om hvordan du genererer andre bildeformater. Den inneholder også et eksempel som viser hvordan du bruker biblioteket med React.

Det er enkelt å ta skjermbilder med JavaScript

Det er ingen innebygd JavaScript-metode for å lage bilder fra HTML-elementer eller ta skjermbilder av DOM. Men ved hjelp av biblioteker og tjenester som html-til-bilde, blir det en enkel oppgave.

Det finnes andre måter å oppnå lignende resultater på, for eksempel wkhtmltoimage-biblioteket. Du kan bruke dette åpen kildekodeverktøyet til å ta skjermbilder av en komplett nettside.