Om du vill ta en skärmdump av en del av eller hela din webbsida med JavaScript, kanske du har fastnat. Att skapa en bild från ett HTML-element kan verka som en utmaning, eftersom det inte finns något direkt sätt att göra det i JavaScript.

Tack och lov är detta inte en omöjlig uppgift och är faktiskt ganska lätt med rätt verktyg. Att använda html-till-bild-biblioteket är att skapa bilder av DOM-noder lika enkelt som ett enda funktionsanrop.

Hur fungerar html-to-image?

De html-till-bild biblioteket producerar en bild i form av en base64-data-URL. Den stöder flera utdataformat, inklusive PNG, JPG och SVG. För att utföra denna konvertering använder biblioteket denna algoritm:

  1. Skapa en klon av mål-HTML-elementet, dess underordnade och eventuella bifogade pseudoelement.
  2. Kopiera stylingen för alla klonade element och bädda in stylingen inline.
  3. Bädda in relevanta webbteckensnitt, om det finns några.
  4. Bädda in alla bilder som finns.
  5. Konvertera den klonade noden till XML och sedan SVG.
  6. Använd SVG för att skapa en data-URL.

Varningar och begränsningar

Även om html-to-image är ett bra bibliotek är det inte perfekt. Den har några varningar, nämligen:

  • Biblioteket fungerar inte i Internet Explorer eller Safari.
  • Om HTML-koden du försöker konvertera innehåller ett fläckat canvaselement, kommer biblioteket att misslyckas. Som MDN förklarar, inklusive icke-CORS-godkända data i ditt canvas-element kommer att fläcka det.
  • Eftersom webbläsare sätter gränser för den maximala storleken på en data-URL, finns det gränser för storleken på HTML-filen som biblioteket kan konvertera.

Använda biblioteket

För att prova biblioteket är det första du behöver göra att skapa en projektkatalog på din lokala dator. Installera sedan html-to-image i den katalogen med hjälp av npm-pakethanteraren. Här är terminalkommandot för att installera det:

npm Installera--spara html-till-bild

Du bör också installera en JavaScript-bundler för att göra det lite enklare att använda biblioteket. De esbygga bundler kan hjälpa till att paketera nodmoduler till webbkompatibla skript.

npm Installera esbygga

Det är allt du behöver installera. Skapa sedan en fil som heter index.html i din katalog och servera den med en webbserver som du väljer. Lägg in följande kod i index.html:

<!doctype html>
<html lang="sv">
<huvud>
<meta teckenuppsättning="UTF-8">
<metanamn="utsiktsplats"
 innehåll="bredd=enhetsbredd, användarskalbar=nej, initialskala=1,0, maxskala=1,0, minimumskala=1,0">
<meta http-equiv="X-UA-kompatibel" innehåll="dvs=kant">
<titel>Dokumentera</title>
<stil>
 .colorful-div {
 stoppning: 3rem;
 färg vit;
 bakgrundsbild: linjär-gradient (till höger, gul, rebeccapurple);
 kant: 1px helt svart;
 marginal: 1rem auto;
 teckenstorlek: 3rem;
 font-family: kursiv;
 }
</style>
</head>
<kropp>
<div klass="färgglad-div">
 jag'jag kommer att vara med i en skärmdump!
</div>
<div klass="lång text">
 jag'm ett exempel på ett tillräckligt utförligt stycke som
 illustrerar att det är att ta skärmdumpar i JavaScript
 verkligen väldigt enkelt, av följande skäl:
<ul>
<li>Orsak 1</li>
<li>Anledning 2</li>
<li>Anledning 2</li>
</ul>
</div>
<script src="out.js"></script>
</body>
</html>

Den här koden skapar två element på sidan: en div med en gradientbakgrund och lite text och en oordnad lista inuti en annan div. Därefter ska du skriva JavaScript för att konvertera dessa element till bilder. Lägg in följande kod i en ny fil som heter script.js:

importera * som htmlToImage från "html-till-bild";
const elems = ['.colorful-div', '.lång text']


elems.för varje((elem, ind) => {
konst nod = dokumentera.querySelector (elem)
htmlToImage.toPng(nod)
 .sedan(fungera (dataUrl) {
låta img = ny Bild();
 img.src = dataUrl;
dokumentera.kropp.appendChild(img);
 })
 .fånga(fungera(fel){
 console.error('Oops! Något gick fel!');
trösta.log (fel)
 });
})

Den här koden gör några saker:

  • Importerar html-till-bild-biblioteket.
  • Skapar en array gjord av CSS-väljare som riktar in sig på de två elementen.
  • Skapar en PNG-bild i form av en data-URL från varje element i arrayen.
  • Skapar en img-tagg och ställer in dess src-attribut till data-URL, vilket skapar bildkopior av de två elementen.

Använd nu esbuild för att generera den medföljande filen (out.js) som index.html refererar till genom att köra följande i din terminal:

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

Så här ska index.html se ut i din webbläsare:

Även om kopiorna ser exakt likadana ut som originalen är de faktiskt bildelement. Du kan bekräfta detta genom att öppna dina dev-verktyg och inspektera dem.

Detta bibliotek fungerar också med JavaScript-ramverk. De html-till-bild dokumentation innehåller instruktioner om hur man genererar andra bildformat. Den innehåller också ett exempel som visar hur man använder biblioteket med React.

Det är enkelt att ta skärmdumpar med JavaScript

Det finns ingen inbyggd JavaScript-metod för att skapa bilder från HTML-element eller ta skärmdumpar av DOM. Men med hjälp av bibliotek och tjänster som html-to-image blir det en lätt uppgift.

Det finns andra sätt att uppnå liknande resultat, till exempel wkhtmltoimage-biblioteket. Du kan använda detta open source-verktyg för att ta skärmdumpar av en komplett webbsida.