Če želite narediti posnetek zaslona dela ali celotne vaše spletne strani z uporabo JavaScripta, se vam lahko zgodi, da se zataknete. Ustvarjanje slike iz elementa HTML se lahko zdi izziv, saj v JavaScriptu ni neposrednega načina za to.

Na srečo to ni nemogoča naloga in je z ustreznimi orodji pravzaprav precej enostavna. Z uporabo knjižnice html-to-image je izdelava slik vozlišč DOM tako preprosta kot en klic funkcije.

Kako deluje html-v-sliko?

The html-v-sliko knjižnica ustvari sliko v obliki podatkovnega URL-ja base64. Podpira več izhodnih formatov, vključno z PNG, JPG in SVG. Za izvedbo te pretvorbe knjižnica uporablja ta algoritem:

  1. Ustvarite klon ciljnega elementa HTML, njegovih podrejenih elementov in vseh priloženih psevdoelementov.
  2. Kopirajte slog za vse klonirane elemente in vdelajte slog v vrstico.
  3. Vdelajte ustrezne spletne pisave, če obstajajo.
  4. Vdelajte vse prisotne slike.
  5. Pretvorite klonirano vozlišče v XML in nato SVG.
  6. Uporabite SVG, da ustvarite podatkovni URL.

Opozorila in omejitve

instagram viewer

Čeprav je html v sliko odlična knjižnica, ni popolna. Ima nekaj opozoril, in sicer:

  • Knjižnica ne bo delovala v Internet Explorerju ali Safariju.
  • Če HTML, ki ga poskušate pretvoriti, vključuje pokvarjen element platna, knjižnica ne bo uspela. Kot MDN pojasnjuje, da bo vključitev podatkov, ki jih CORS ne odobri, v vaš element platna omadeževala.
  • Ker brskalniki omejujejo največjo velikost podatkovnega URL-ja, obstajajo omejitve glede velikosti HTML-ja, ki ga knjižnica lahko pretvori.

Uporaba knjižnice

Če želite preizkusiti knjižnico, morate najprej ustvariti imenik projekta na vašem lokalnem računalniku. Nato namestite html-to-image v ta imenik z uporabo upravitelj paketov npm. Tukaj je terminalski ukaz za namestitev:

npm namestite--save html-to-image

Prav tako bi morali namestiti JavaScript bundler, da bi nekoliko olajšali uporabo knjižnice. The esbuild bundler lahko pomaga zapakirati module vozlišč v skripte, združljive s spletom.

npm namestite esbuild

To je vse, kar potrebujete za namestitev. Nato ustvarite datoteko z imenom index.html v vašem imeniku in ga postrezite s spletnim strežnikom po vaši izbiri. V index.html vstavite naslednjo kodo:

<!doctype html>
<html lang="en">
<glavo>
<meta charset="UTF-8">
<meta ime="vidno polje"
 vsebina="width=device-width, user-scalable=ne, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-ekviv="Združljiv z X-UA" vsebina="ie=rob">
<naslov>Dokument</title>
<stil>
 .colorful-div {
 polnilo: 3rem;
 barva: bela;
 slika ozadja: linearni gradient (desno, rumena, rebekavijolična);
 obroba: 1px polna črna;
 rob: 1rem auto;
 velikost pisave: 3rem;
 družina pisav: kurziv;
 }
</style>
</head>
<telo>
<razred div="barvita-div">
 jaz'bom na posnetku zaslona!
</div>
<razred div="dolgo besedilo">
 jaz'm primer dovolj besednega odstavka, ki
 ponazarja, da je snemanje posnetkov zaslona v JavaScriptu
 zelo enostavno iz naslednjih razlogov:
<ul>
<li>1. razlog</li>
<li>2. razlog</li>
<li>2. razlog</li>
</ul>
</div>
<skript src="out.js"></script>
</body>
</html>

Ta koda ustvari dva elementa na strani: div z gradientnim ozadjem ter nekaj besedila in neurejen seznam znotraj drugega diva. Nato boste napisali JavaScript za pretvorbo teh elementov v slike. Vstavite naslednjo kodo v novo datoteko z imenom script.js:

uvoz * kot htmlToImage od "html-v-sliko";
const elems = ['.colorful-div', '.dolgo besedilo']


elems.za vsakogar((elem, ind) => {
konst vozlišče = dokument.querySelector (elem)
htmlToImage.toPng(vozlišče)
 .potem(funkcijo (dataUrl) {
pustiti img = novo Slika();
 img.src = dataUrl;
dokument.telo.appendChild(img);
 })
 .ulov(funkcijo(napaka){
 console.error('Ups! Nekaj ​​je šlo narobe!');
konzola.log (napaka)
 });
})

Ta koda naredi nekaj stvari:

  • Uvozi knjižnico html-v-sliko.
  • Ustvari matriko iz izbirnikov CSS, ki cilja na dva elementa.
  • Ustvari sliko PNG v obliki podatkovnega URL-ja iz vsakega elementa matrike.
  • Ustvari oznako img in nastavi njen atribut src na podatkovni URL ter ustvari slikovni kopiji obeh elementov.

Zdaj uporabite esbuild za ustvarjanje priložene datoteke (out.js), na katerega se index.html sklicuje, tako da v vašem terminalu zaženete naslednje:

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

Tukaj je videti, kako naj bi index.html izgledal v vašem brskalniku:

Čeprav so kopije videti popolnoma enake originalom, so dejansko slikovni elementi. To lahko potrdite z odpiranje orodij za razvijalce in jih pregledati.

Ta knjižnica deluje tudi z okviri JavaScript. The dokumentacijo html v sliko vsebuje navodila za ustvarjanje drugih slikovnih formatov. Vključuje tudi primer, ki prikazuje, kako uporabljati knjižnico z Reactom.

Snemanje posnetkov zaslona z JavaScriptom je preprosto

Za ustvarjanje slik iz elementov HTML ali snemanje posnetkov zaslona DOM ni izvorne metode JavaScript. Vendar s pomočjo knjižnic in storitev, kot je html-to-image, postane to lahka naloga.

Obstajajo tudi drugi načini za doseganje podobnih rezultatov, na primer knjižnica wkhtmltoimage. S tem odprtokodnim orodjem lahko posnamete posnetke zaslona celotne spletne strani.