Kui soovite teha JavaScripti kasutades ekraanipilti osast või kogu oma veebilehest, võite jääda ummikusse. HTML-i elemendist pildi loomine võib tunduda väljakutsena, kuna JavaScriptis pole selleks otsest võimalust.

Õnneks pole see võimatu ülesanne ja on õigete tööriistadega tegelikult üsna lihtne. Html-pildiks teeki kasutades on DOM-i sõlmede kujutiste loomine sama lihtne kui ühe funktsiooni kutse.

Kuidas html-pildiks toimib?

The html-pildiks teek loob pildi base64 andmete URL-i kujul. See toetab mitut väljundvormingut, sealhulgas PNG, JPG ja SVG. Selle teisenduse teostamiseks kasutab teek järgmist algoritmi:

  1. Looge sihtmärgiks olevast HTML-i elemendist, selle lastest ja mis tahes lisatud pseudoelementidest kloon.
  2. Kopeerige kõigi kloonitud elementide stiil ja manustage stiil sees.
  3. Manustage asjakohased veebifondid, kui neid on.
  4. Manusta kõik olemasolevad pildid.
  5. Teisendage kloonitud sõlm XML-iks ja seejärel SVG-ks.
  6. Kasutage andmete URL-i loomiseks SVG-d.

Hoiatused ja piirangud

Kuigi html-to-image on suurepärane raamatukogu, pole see täiuslik. Sellel on mõned hoiatused, nimelt:

instagram viewer
  • Teek ei tööta Internet Exploreris ega Safaris.
  • Kui HTML, mida proovite teisendada, sisaldab rikutud lõuendi elementi, siis teek ebaõnnestub. Nagu MDN selgitab, et CORS-i heakskiitmata andmete lisamine lõuendi elementi rikub selle.
  • Kuna brauserid seavad piirangud andmete URL-i maksimaalsele suurusele, on piirangud ka HTML-i suurusele, mida teek saab teisendada.

Raamatukogu kasutamine

Teegi proovimiseks peate esimese asjana looma kohalikus masinas projektikataloogi. Järgmisena installige sellesse kataloogi html-to-image, kasutades npm paketihaldur. Siin on terminali käsk selle installimiseks:

npm installida--salvestage html-pildiks

Teegi kasutamise hõlbustamiseks peaksite installima ka JavaScripti komplekti. The ehitama bundler võib aidata pakkida sõlmemooduleid veebiga ühilduvatesse skriptidesse.

npm installida ehitama

See on kõik, mida peate installima. Järgmisena looge fail nimega index.html oma kataloogis ja serveerige seda teie valitud veebiserveriga. Sisestage indeks.html-i järgmine kood:

<!doctype html>
<html lang="et">
<pea>
<metamärgistik="UTF-8">
<meta nimi="vaateava"
 sisu="laius = seadme laius, kasutaja skaleeritav = ei, algskaala = 1,0, maksimaalne skaala = 1,0, minimaalne skaala = 1,0">
<meta http-equiv="X-UA-ühilduv" sisu="ie=serv">
<pealkiri>Dokument</title>
<stiilis>
 .colorful-div {
 polster: 3rem;
 värv: valge;
 taustapilt: lineaarne gradient (paremale, kollane, rebeccapurple);
 ääris: 1px täismust;
 veeris: 1rem auto;
 fondi suurus: 3rem;
 font-perekond: kursiiv;
 }
</style>
</head>
<keha>
<div klass="värviline-div">
 I'jään ekraanipildile!
</div>
<div klass="pika tekstiga">
 I'm näide piisavalt sõnasõnalisest lõigust, mis
 illustreerib, et JavaScriptis ekraanipiltide tegemine on
 tõesti väga lihtne, järgmistel põhjustel:
<ul>
<li>Põhjus 1</li>
<li>2. põhjus</li>
<li>2. põhjus</li>
</ul>
</div>
<skript src="out.js"></script>
</body>
</html>

See kood loob lehele kaks elementi: gradiendi taustaga div ning teise div sees osa teksti ja järjestamata loendi. Järgmisena kirjutate nende elementide kujutisteks teisendamiseks JavaScripti. Sisestage järgmine kood uude faili nimega script.js:

importida * nagu htmlToImage alates "html-pildiks";
const elems = ['.värviline-div', '.pika tekstiga']


elements.igaühele((elem, ind) => {
konst sõlm = dokument.querySelector (elem)
htmlToImage.toPng(sõlm)
 .hen(funktsiooni (dataUrl) {
lase img = uus Pilt();
 img.src = dataUrl;
dokument.keha.appendChild(img);
 })
 .püüda(funktsiooni(viga){
 console.error('Oops! Midagi läks valesti!');
konsool.log (viga)
 });
})

See kood teeb mõned asjad:

  • Impordib html-pildiks teegi.
  • Loob CSS-i valijatest koosneva massiivi, mis sihib kahte elementi.
  • Loob massiivi igast elemendist PNG-kujutise andme-URL-i kujul.
  • Loob img-märgendi ja määrab selle atribuudi src andmete URL-ile, luues kahest elemendist pildikoopiad.

Nüüd kasutage komplekteeritud faili genereerimiseks esbuildi (out.js), mis viitab index.html-ile, käivitades oma terminalis järgmise:

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

Siin peaks index.html teie brauseris välja nägema:

Kuigi koopiad näevad välja täpselt samasugused kui originaalid, on need tegelikult pildielemendid. Saate seda kinnitada arendustööriistade avamine ja nende kontrollimine.

See teek töötab ka JavaScripti raamistikega. The html-pildiks dokumentatsioon sisaldab juhiseid muude pildivormingute genereerimiseks. See sisaldab ka näidet, mis näitab teegi kasutamist Reactiga.

Ekraanipiltide tegemine JavaScriptiga on lihtne

HTML-i elementidest piltide loomiseks või DOM-i ekraanipiltide tegemiseks pole natiivset JavaScripti meetodit. Teekide ja teenuste (nt html-to-image) abil on see aga lihtne ülesanne.

Sarnaste tulemuste saavutamiseks on ka teisi viise, näiteks wkhtmltoimage teek. Seda avatud lähtekoodiga tööriista saate kasutada terve veebilehe ekraanipiltide tegemiseks.