Als je een screenshot wilt maken van een deel of je hele webpagina met JavaScript, loop je misschien vast. Het maken van een afbeelding van een HTML-element kan een uitdaging lijken, omdat er geen directe manier is om dit in JavaScript te doen.

Gelukkig is dit geen onmogelijke taak en is het zelfs vrij eenvoudig met de juiste tools. Met behulp van de html-naar-image-bibliotheek is het maken van afbeeldingen van DOM-knooppunten net zo eenvoudig als een enkele functieaanroep.

Hoe werkt html-naar-afbeelding?

De html-naar-afbeelding bibliotheek produceert een afbeelding in de vorm van een base64-gegevens-URL. Het ondersteunt verschillende uitvoerformaten, waaronder PNG, JPG en SVG. Om deze conversie uit te voeren, gebruikt de bibliotheek dit algoritme:

  1. Maak een kloon van het doel-HTML-element, de onderliggende elementen en eventuele bijgevoegde pseudo-elementen.
  2. Kopieer de styling voor alle gekloonde elementen en sluit de styling inline in.
  3. Sluit de relevante weblettertypen in, als die er zijn.
    4. instagram viewer
  4. Sluit alle aanwezige afbeeldingen in.
  5. Converteer het gekloonde knooppunt naar XML en vervolgens naar SVG.
  6. Gebruik de SVG om een ​​gegevens-URL te maken.

Voorbehoud en beperkingen

Hoewel html-naar-afbeelding een geweldige bibliotheek is, is het niet perfect. Het heeft een paar kanttekeningen, namelijk:

  • De bibliotheek werkt niet in Internet Explorer of Safari.
  • Als de HTML die u probeert te converteren een besmet canvaselement bevat, mislukt de bibliotheek. Net zo MDN uitlegt, zal het opnemen van niet-CORS-goedgekeurde gegevens in uw canvas-element het aantasten.
  • Omdat browsers limieten stellen aan de maximale grootte van een gegevens-URL, zijn er limieten aan de grootte van de HTML die de bibliotheek kan converteren.

De bibliotheek gebruiken

Om de bibliotheek uit te proberen, moet u eerst een projectdirectory maken op uw lokale computer. Installeer vervolgens html-naar-afbeelding in die map met behulp van de npm-pakketbeheerder. Hier is de terminalopdracht om het te installeren:

npm installeren--save html-to-image

Je moet ook een JavaScript-bundelaar installeren om het gebruik van de bibliotheek iets gemakkelijker te maken. De esbuild Bundler kan helpen bij het verpakken van node-modules in webcompatibele scripts.

npm installeren esbuild

Dat is alles wat u hoeft te installeren. Maak vervolgens een bestand met de naam index.html in uw directory en serveer deze met een webserver naar keuze. Zet de volgende code in index.html:

<!doctype html>
<html lang="en">
<hoofd>
<meta-tekenset="UTF-8">
<metanaam="uitkijk postje"
 inhoud="width=device-width, user-scalable=no, initial-scale=1,0, maximum-scale=1,0, minimum-scale=1,0">
<meta http-equiv="X-UA-compatibel" inhoud="ie=rand">
<titel>Document</title>
<stijl>
 .kleurrijk-div {
 vulling: 3rem;
 kleur wit;
 achtergrondafbeelding: lineair verloop (naar rechts, geel, rebeccapaars);
 rand: 1px effen zwart;
 marge: 1rem automatisch;
 lettergrootte: 3rem;
 font-familie: cursief;
 }
</style>
</head>
<lichaam>
<div klasse="kleurrijk-div">
 l'ik kom in een screenshot!
</div>
<div klasse="lange tekst">
 l'm een ​​voorbeeld van een voldoende uitgebreide alinea die:
 illustreert dat het maken van screenshots in JavaScript is
 echt heel gemakkelijk, om de volgende redenen:
<ul>
<li>Reden 1</li>
<li>Reden 2</li>
<li>Reden 2</li>
</ul>
</div>
<script src="uit.js"></script>
</body>
</html>

Deze code maakt twee elementen op de pagina: een div met een verloopachtergrond en wat tekst en een ongeordende lijst in een andere div. Vervolgens schrijft u het JavaScript om deze elementen naar afbeeldingen om te zetten. Zet de volgende code in een nieuw bestand met de naam script.js:

importeren * net zo htmlNaarAfbeelding van "html-naar-afbeelding";
const elementen = ['.kleurrijk-div', '.lange tekst']


elementen.voor elk((elem, ind) => {
const knoop = document.querySelector (elem)
htmlNaarAfbeelding.toPng(knooppunt)
 .dan(functie (dataUrl) {
laten img = nieuwe Afbeelding();
 img.src = dataUrl;
document.lichaam.appendKind(img);
 })
 .vangst(functie(fout){
 console.fout('Oeps! Er is iets misgegaan!');
troosten.log (fout)
 });
})

Deze code doet een paar dingen:

  • Importeert de html-naar-afbeeldingsbibliotheek.
  • Creëert een array gemaakt van CSS-selectors die gericht zijn op de twee elementen.
  • Maakt een PNG-afbeelding in de vorm van een gegevens-URL van elk element van de array.
  • Creëert een img-tag en stelt het src-attribuut in op de gegevens-URL, waardoor afbeeldingskopieën van de twee elementen worden gemaakt.

Gebruik nu esbuild om het gebundelde bestand te genereren (uit.js) waarnaar index.html verwijst door het volgende in uw terminal uit te voeren:

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

Op dit moment ziet index.html er als volgt uit in uw browser:

Ook al zien de kopieën er precies hetzelfde uit als de originelen, het zijn eigenlijk beeldelementen. U kunt dit bevestigen door: uw dev-tools openen en ze te inspecteren.

Deze bibliotheek werkt ook met JavaScript-frameworks. De html-naar-afbeelding documentatie bevat instructies voor het genereren van andere afbeeldingsindelingen. Het bevat ook een voorbeeld dat laat zien hoe de bibliotheek met React kan worden gebruikt.

Screenshots maken met JavaScript is eenvoudig

Er is geen native JavaScript-methode voor het maken van afbeeldingen van HTML-elementen of het maken van screenshots van de DOM. Met de hulp van bibliotheken en services zoals html-naar-afbeelding wordt het echter een gemakkelijke taak.

Er zijn andere manieren om vergelijkbare resultaten te bereiken, zoals de wkhtmltoimage-bibliotheek. U kunt deze open-source tool gebruiken om screenshots te maken van een complete webpagina.