Ja vēlaties uzņemt ekrānuzņēmumu no savas tīmekļa lapas vai visas tās daļas, izmantojot JavaScript, iespējams, ka esat iestrēdzis. Attēla izveide no HTML elementa var šķist izaicinājums, jo JavaScript nav tieša veida, kā to izdarīt.

Par laimi, tas nav neiespējams uzdevums, un patiesībā tas ir diezgan vienkāršs, izmantojot atbilstošus rīkus. Izmantojot html-attēlu bibliotēku, DOM mezglu attēlu izveide ir tikpat vienkārša kā vienas funkcijas izsaukums.

Kā darbojas html-attēls?

The html uz attēlu bibliotēka izveido attēlu base64 datu URL formātā. Tā atbalsta vairākus izvades formātus, tostarp PNG, JPG un SVG. Lai veiktu šo konvertēšanu, bibliotēka izmanto šo algoritmu:

  1. Izveidojiet mērķa HTML elementa, tā atvasinājumu un visu pievienoto pseidoelementu klonu.
  2. Kopējiet stilu visiem klonētajiem elementiem un ieguliet stilu.
  3. Iegult attiecīgos tīmekļa fontus, ja tādi ir.
  4. Iegult visus esošos attēlus.
  5. Konvertējiet klonēto mezglu XML un pēc tam SVG formātā.
  6. Izmantojiet SVG, lai izveidotu datu URL.
instagram viewer

Brīdinājumi un ierobežojumi

Lai gan html-to-image ir lieliska bibliotēka, tā nav ideāla. Tam ir daži brīdinājumi, proti:

  • Bibliotēka nedarbosies pārlūkprogrammā Internet Explorer vai Safari.
  • Ja HTML, kuru mēģināt konvertēt, ir bojāts kanvas elements, bibliotēka neizdosies. Kā MDN paskaidro, ka audekla elementā iekļaujot CORS neapstiprinātus datus, tas tiks sabojāts.
  • Tā kā pārlūkprogrammas ierobežo datu URL maksimālo izmēru, ir ierobežojumi HTML failam, ko bibliotēka var konvertēt.

Izmantojot bibliotēku

Lai izmēģinātu bibliotēku, pirmā lieta, kas jums jādara, ir vietējā datorā izveidot projekta direktoriju. Pēc tam instalējiet html-to-image šajā direktorijā, izmantojot npm pakotņu pārvaldnieks. Šeit ir termināļa komanda, lai to instalētu:

npm uzstādīt--saglabāt html-attēlā

Lai atvieglotu bibliotēkas lietošanu, ir jāinstalē arī JavaScript komplektētājs. The būvēt bundler var palīdzēt iesaiņot mezglu moduļus ar tīmekli saderīgos skriptos.

npm uzstādīt būvēt

Tas ir viss, kas jums jāinstalē. Pēc tam izveidojiet failu ar nosaukumu index.html savā direktorijā un pasniedziet to ar jūsu izvēlētu tīmekļa serveri. Ievietojiet šādu kodu indeksā.html:

<!doctype html>
<html lang="lv">
<galvu>
<meta rakstzīmju kopa ="UTF-8">
<meta nosaukums ="skata logs"
 saturs="platums = ierīces platums, lietotāja mērogojams = nē, sākotnējais mērogs = 1,0, maksimālais mērogs = 1,0, minimālais mērogs = 1,0">
<meta http-equiv="X-UA saderīgs" saturs="ie=mala">
<virsraksts>Dokuments</title>
<stils>
 .colorful-div {
 polsterējums: 3rem;
 krāsa: balta;
 fona attēls: lineārs gradients (pa labi, dzeltens, rebekapurpurs);
 apmale: 1px vienkrāsains melns;
 piemale: 1rem auto;
 fonta izmērs: 3rem;
 fontu saime: kursīvs;
 }
</style>
</head>
<ķermeni>
<div klase="krāsains-div">
 es'es būšu ekrānuzņēmumā!
</div>
<div klase="garš teksts">
 es'm piemers pietiekami verbozai rindkopai, kas
 ilustrē, ka ekrānuzņēmumu uzņemšana JavaScript ir
 tiešām ļoti viegli šādu iemeslu dēļ:
<ul>
<li>1. iemesls</li>
<li>2. iemesls</li>
<li>2. iemesls</li>
</ul>
</div>
<skripts src="out.js"></script>
</body>
</html>

Šis kods lapā izveido divus elementus: div ar gradienta fonu un tekstu un nesakārtotu sarakstu citā div. Pēc tam jums būs jāraksta JavaScript, lai pārvērstu šos elementus attēlos. Ievietojiet šo kodu jaunā failā ar nosaukumu script.js:

imports * kā htmlToImage no "html-to-image";
const elems = ['.krāsains-div', '.garu tekstu']


elements.katram((elem, ind) => {
konst mezgls = dokumentu.querySelector (elem)
htmlToImage.toPng(mezgls)
 .hen(funkciju (dataUrl) {
ļaut img = jauns Attēls();
 img.src = dataUrl;
dokumentu.body.appendChild(img);
 })
 .noķert(funkciju(kļūda){
 console.error('Hmm! Kaut kas nogāja greizi!');
konsole.log (kļūda)
 });
})

Šis kods veic dažas darbības:

  • Importē bibliotēku no html uz attēlu.
  • Izveido masīvu, kas sastāv no CSS atlasītājiem, kuru mērķauditorija ir divi elementi.
  • Izveido PNG attēlu datu URL veidā no katra masīva elementa.
  • Izveido img tagu un iestata tā atribūtu src uz datu URL, izveidojot abu elementu attēlu kopijas.

Tagad izmantojiet esbuild, lai ģenerētu komplektēto failu (out.js), kas atsaucas uz index.html, terminālī izpildot tālāk norādīto.

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

Šobrīd jūsu pārlūkprogrammā ir jāizskatās indeksam.html:

Lai gan kopijas izskatās tieši tādas pašas kā oriģināli, patiesībā tās ir attēla elementi. Jūs varat to apstiprināt ar atverot izstrādātāja rīkus un tos pārbaudot.

Šī bibliotēka darbojas arī ar JavaScript ietvariem. The html-to-image dokumentācija satur norādījumus par citu attēlu formātu ģenerēšanu. Tajā ir arī piemērs, kas parāda, kā izmantot bibliotēku ar React.

Ekrānuzņēmumu uzņemšana ar JavaScript ir vienkārša

Nav vietējās JavaScript metodes attēlu izveidei no HTML elementiem vai DOM ekrānuzņēmumu uzņemšanai. Tomēr, izmantojot bibliotēkas un pakalpojumus, piemēram, html-to-image, tas kļūst par vieglu uzdevumu.

Ir arī citi veidi, kā sasniegt līdzīgus rezultātus, piemēram, wkhtmltoimage bibliotēka. Varat izmantot šo atvērtā pirmkoda rīku, lai uzņemtu visas tīmekļa lapas ekrānuzņēmumus.