Hvis du vil tage et skærmbillede af en del af eller hele din webside ved hjælp af JavaScript, kan du finde dig selv i stå. At skabe et billede fra et HTML-element kan virke som en udfordring, da der ikke er nogen direkte måde at gøre det på i JavaScript.

Heldigvis er dette ikke en umulig opgave og er faktisk ret let med de rigtige værktøjer. Ved at bruge html-til-billede-biblioteket er det så enkelt at lave billeder af DOM-noder som et enkelt funktionskald.

Hvordan virker html-til-billede?

Det html-til-billede biblioteket producerer et billede i form af en base64 data URL. Det understøtter flere outputformater, herunder PNG, JPG og SVG. For at udføre denne konvertering bruger biblioteket denne algoritme:

  1. Opret en klon af HTML-målelementet, dets underordnede elementer og eventuelle vedhæftede pseudo-elementer.
  2. Kopier stylingen for alle klonede elementer, og indlejr stylingen inline.
  3. Integrer de relevante webskrifttyper, hvis der er nogen.
  4. Integrer alle tilstedeværende billeder.
  5. Konverter den klonede node til XML og derefter SVG.
  6. Brug SVG til at oprette en data-URL.
instagram viewer

Forbehold og begrænsninger

Selvom html-to-image er et fantastisk bibliotek, er det ikke perfekt. Den har et par forbehold, nemlig:

  • Biblioteket fungerer ikke i Internet Explorer eller Safari.
  • Hvis den HTML, du forsøger at konvertere, indeholder et plettet lærredselement, vil biblioteket mislykkes. Som MDN forklarer, herunder ikke-CORS-godkendte data i dit lærredselement vil plette det.
  • Fordi browsere sætter grænser for den maksimale størrelse af en data-URL, er der grænser for størrelsen af ​​den HTML, som biblioteket kan konvertere.

Brug af biblioteket

For at prøve biblioteket er den første ting, du skal gøre, at oprette en projektmappe på din lokale maskine. Installer derefter html-to-image i den mappe ved hjælp af npm-pakkehåndteringen. Her er terminalkommandoen til at installere den:

npm installere--gem html-til-billede

Du bør også installere en JavaScript-bundler, for at gøre det lidt nemmere at bruge biblioteket. Det esbuild bundler kan hjælpe med at pakke nodemoduler til webkompatible scripts.

npm installere esbuild

Det er alt hvad du behøver for at installere. Opret derefter en fil kaldet index.html i dit bibliotek, og server det med en webserver efter eget valg. Indsæt følgende kode i index.html:

<!doctype html>
<html lang="da">
<hoved>
<meta tegnsæt="UTF-8">
<metanavn="viewport"
 indhold="width=enhedsbredde, brugerskalerbar=nej, initial-skala=1,0, maksimum-skala=1,0, minimum-skala=1,0">
<meta http-equiv="X-UA-kompatibel" indhold="dvs = kant">
<titel>Dokument</title>
<stil>
 .colorful-div {
 polstring: 3rem;
 farve: hvid;
 baggrundsbillede: lineær gradient (til højre, gul, rebeccapurple);
 kant: 1px ensfarvet sort;
 margin: 1rem auto;
 skriftstørrelse: 3rem;
 skrifttype-familie: kursiv;
 }
</style>
</head>
<legeme>
<div klasse="farverig-div">
 jeg'jeg skal med i et skærmbillede!
</div>
<div klasse="lang tekst">
 jeg'm et eksempel på et tilstrækkeligt udførligt afsnit, der
 illustrerer, at det er at tage skærmbilleder i JavaScript
 virkelig meget nemt af følgende grunde:
<ul>
<li>Årsag 1</li>
<li>Årsag 2</li>
<li>Årsag 2</li>
</ul>
</div>
<script src="ud.js"></script>
</body>
</html>

Denne kode opretter to elementer på siden: en div med en gradientbaggrund og noget tekst og en uordnet liste inde i en anden div. Dernæst skal du skrive JavaScript for at konvertere disse elementer til billeder. Indsæt følgende kode i en ny fil kaldet script.js:

importere * som htmlToImage fra "html-til-billede";
const elems = ['.farverig-div', '.lang tekst']


elems.for hver((elem, ind) => {
konst node = dokument.querySelector (elem)
htmlToImage.toPng(node)
 .derefter(fungere (dataUrl) {
lade img = ny Billede();
 img.src = dataUrl;
dokument.legeme.appendChild(img);
 })
 .fangst(fungere(fejl){
 console.error('Ups! Noget gik galt!');
konsol.log (fejl)
 });
})

Denne kode gør et par ting:

  • Importerer html-til-billede-biblioteket.
  • Opretter et array lavet af CSS-vælgere rettet mod de to elementer.
  • Opretter et PNG-billede i form af en data-URL fra hvert element i arrayet.
  • Opretter et img-tag og indstiller dets src-attribut til data-URL'en, hvilket skaber billedkopier af de to elementer.

Brug nu esbuild til at generere den medfølgende fil (ud.js), som index.html refererer til ved at køre følgende i din terminal:

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

På dette tidspunkt er det sådan, index.html skal se ud i din browser:

Selvom kopierne ser nøjagtigt ud som originalerne, er de faktisk billedelementer. Du kan bekræfte dette ved at åbner dine udviklerværktøjer og inspicere dem.

Dette bibliotek fungerer også med JavaScript-rammer. Det html-til-billede dokumentation indeholder instruktioner om, hvordan man genererer andre billedformater. Den indeholder også et eksempel, der viser, hvordan du bruger biblioteket med React.

Det er nemt at tage skærmbilleder med JavaScript

Der er ingen indbygget JavaScript-metode til at oprette billeder fra HTML-elementer eller tage skærmbilleder af DOM. Men ved hjælp af biblioteker og tjenester som html-to-image bliver det en nem opgave.

Der er andre måder at opnå lignende resultater på, såsom wkhtmltoimage-biblioteket. Du kan bruge dette open source-værktøj til at tage skærmbilleder af en komplet webside.