Ako želite napraviti snimku zaslona dijela ili cijele svoje web stranice pomoću JavaScripta, mogli biste zapeti. Stvaranje slike iz HTML elementa može izgledati kao izazov jer ne postoji izravan način da se to učini u JavaScriptu.

Srećom, ovo nije nemoguć zadatak i zapravo je vrlo jednostavan uz odgovarajuće alate. Korištenjem biblioteke html-to-image, izrada slika DOM čvorova jednostavna je poput jednog poziva funkcije.

Kako funkcionira html-u-sliku?

The html-u-sliku biblioteka proizvodi sliku u obliku base64 podatkovnog URL-a. Podržava nekoliko izlaznih formata, uključujući PNG, JPG i SVG. Za izvođenje ove konverzije knjižnica koristi ovaj algoritam:

  1. Napravite klon ciljanog HTML elementa, njegove djece i svih priloženih pseudoelemenata.
  2. Kopirajte stil za sve klonirane elemente i ugradite stil u liniju.
  3. Ugradite relevantne web fontove, ako ih ima.
  4. Ugradite sve prisutne slike.
  5. Pretvorite klonirani čvor u XML, a zatim u SVG.
  6. Koristite SVG za izradu podatkovnog URL-a.

Upozorenja i ograničenja

instagram viewer

Iako je html-to-image izvrsna biblioteka, nije savršena. Ima nekoliko upozorenja, naime:

  • Knjižnica neće raditi u Internet Exploreru ili Safariju.
  • Ako HTML koji pokušavate pretvoriti uključuje zaraženi element platna, biblioteka neće uspjeti. Kao MDN objašnjava, uključivanje podataka koji nisu odobreni od strane CORS-a u vaš element platna će ga pokvariti.
  • Budući da preglednici postavljaju ograničenja na maksimalnu veličinu podatkovnog URL-a, postoje ograničenja na veličinu HTML-a koji biblioteka može pretvoriti.

Korištenje knjižnice

Da biste isprobali biblioteku, prva stvar koju trebate učiniti je stvoriti direktorij projekta na vašem lokalnom računalu. Zatim instalirajte html-to-image u taj direktorij pomoću npm upravitelj paketa. Evo naredbe terminala za instalaciju:

npm instalirati--spremi html-u-sliku

Također biste trebali instalirati JavaScript bundler, kako biste malo lakše koristili biblioteku. The esbuild bundler može pomoći pakirati module čvorova u web-kompatibilne skripte.

npm instalirati esbuild

To je sve što trebate za instalaciju. Zatim stvorite datoteku pod nazivom index.html u vašem imeniku i poslužite ga s web poslužiteljem po vašem izboru. Stavite sljedeći kod u index.html:

<!doctype html>
<html lang="hr">
<glavu>
<meta charset="UTF-8">
<meta naziv="prozor za prikaz"
 sadržaj="širina=širina-uređaja, korisnički skalabilno=ne, početna skala=1,0, maksimalna skala=1,0, minimalna skala=1,0">
<meta http-ekviv="X-UA-kompatibilan" sadržaj="tj.=rub">
<titula>Dokument</title>
<stil>
 .colorful-div {
 podstava: 3rem;
 boja: bijela;
 pozadinska slika: linearni gradijent (desno, žuta, crvenoljubičasta);
 obrub: 1px puna crna;
 margina: 1rem auto;
 veličina fonta: 3rem;
 obitelj-fontova: kurziv;
 }
</style>
</head>
<tijelo>
<div klasa="šareno-div">
 ja'bit ću na snimci zaslona!
</div>
<div klasa="dugi tekst">
 ja'm primjer dovoljno opširnog odlomka koji
 ilustrira da je snimanje zaslona u JavaScriptu
 stvarno vrlo lako, iz sljedećih razloga:
<ul>
<li>Razlog 1</li>
<li>Razlog 2</li>
<li>Razlog 2</li>
</ul>
</div>
<skripta src="van.js"></script>
</body>
</html>

Ovaj kod stvara dva elementa na stranici: div s gradijentnom pozadinom i malo teksta i neuređen popis unutar drugog diva. Zatim ćete napisati JavaScript za pretvaranje ovih elemenata u slike. Stavite sljedeći kod u novu datoteku pod nazivom script.js:

uvoz * kao htmlToImage iz "html-u-sliku";
const elementi = ['.šareno-div', '.dugi tekst']


elems.za svakoga((elem, ind) => {
konst čvor = dokument.querySelector (elem)
htmlToImage.toPng(čvor)
 .zatim(funkcija (dataUrl) {
neka img = novi Slika();
 img.src = dataUrl;
dokument.tijelo.dodajDijete(img);
 })
 .ulov(funkcija(greška){
 console.error('Ups! Nešto je pošlo po zlu!');
konzola.log (pogreška)
 });
})

Ovaj kôd čini nekoliko stvari:

  • Uvozi biblioteku html-u-sliku.
  • Stvara niz od CSS selektora koji ciljaju dva elementa.
  • Stvara PNG sliku u obliku podatkovnog URL-a iz svakog elementa niza.
  • Stvara img oznaku i postavlja njen atribut src na podatkovni URL, stvarajući slikovne kopije dvaju elemenata.

Sada koristite esbuild za generiranje datoteke u paketu (van.js) na koje index.html upućuje izvođenjem sljedećeg na vašem terminalu:

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

U ovom trenutku, evo kako bi index.html trebao izgledati u vašem pregledniku:

Iako kopije izgledaju potpuno isto kao i originali, one su zapravo elementi slike. Ovo možete potvrditi putem otvaranje vaših razvojnih alata i pregledavajući ih.

Ova biblioteka također radi s JavaScript okvirima. The html-to-image dokumentacija sadrži upute o tome kako generirati druge formate slika. Također uključuje primjer koji pokazuje kako koristiti biblioteku s Reactom.

Snimanje zaslona s JavaScriptom je jednostavno

Ne postoji izvorna JavaScript metoda za stvaranje slika iz HTML elemenata ili snimanje zaslona DOM-a. Međutim, uz pomoć knjižnica i usluga poput html-to-image, to postaje lak zadatak.

Postoje i drugi načini za postizanje sličnih rezultata, kao što je biblioteka wkhtmltoimage. Možete koristiti ovaj alat otvorenog koda za snimanje zaslona cijele web stranice.