Jos haluat ottaa kuvakaappauksen osasta tai kokonaan verkkosivustasi JavaScriptin avulla, saatat juuttua. Kuvan luominen HTML-elementistä voi tuntua haasteelta, koska JavaScriptissä ei ole suoraa tapaa tehdä sitä.

Onneksi tämä ei ole mahdoton tehtävä, ja se on itse asiassa melko helppoa oikeilla työkaluilla. Html-kuvakirjastoa käyttämällä kuvien tekeminen DOM-solmuista on yhtä yksinkertaista kuin yksi funktiokutsu.

Miten html-kuvaksi toimii?

The html-kuvaksi kirjasto tuottaa kuvan base64-tieto-URL-osoitteen muodossa. Se tukee useita tulostusmuotoja, mukaan lukien PNG, JPG ja SVG. Tämän muunnoksen suorittamiseen kirjasto käyttää tätä algoritmia:

  1. Luo klooni kohde-HTML-elementistä, sen lapsista ja kaikista liitetyistä pseudoelementeistä.
  2. Kopioi tyyli kaikille kloonatuille elementeille ja upota muotoilu riviin.
  3. Upota asiaankuuluvat verkkokirjasimet, jos sellaisia ​​on.
  4. Upota mahdolliset kuvat.
  5. Muunna kloonattu solmu XML: ksi ja sitten SVG: ksi.
  6. Käytä SVG: tä tietojen URL-osoitteen luomiseen.
instagram viewer

Varoitukset ja rajoitukset

Vaikka html-to-image on loistava kirjasto, se ei ole täydellinen. Siinä on muutamia varoituksia, nimittäin:

  • Kirjasto ei toimi Internet Explorerissa tai Safarissa.
  • Jos HTML-koodi, jota yrität muuntaa, sisältää pilaantuneen canvas-elementin, kirjasto epäonnistuu. Kuten MDN ei-CORS-hyväksyttyjen tietojen lisääminen canvas-elementtiin saastuttaa sen.
  • Koska selaimet rajoittavat datan URL-osoitteen enimmäiskokoa, kirjaston muunnettavissa olevan HTML-koodin kokoa on rajoitettu.

Kirjaston käyttäminen

Jos haluat kokeilla kirjastoa, sinun on ensin luotava projektihakemisto paikalliselle koneellesi. Asenna seuraavaksi html-to-image kyseiseen hakemistoon käyttämällä npm-pakettien hallinta. Tässä on terminaalikomento sen asentamiseksi:

npm Asentaa--tallenna html-kuvaan

Sinun tulisi myös asentaa JavaScript-niputtaja, jotta kirjaston käyttö olisi hieman helpompaa. The rakentaa bundler voi auttaa pakkaamaan solmumoduulit web-yhteensopiviin komentosarjoihin.

npm Asentaa rakentaa

Siinä on kaikki mitä tarvitset asentamiseen. Luo seuraavaksi tiedosto nimeltä index.html hakemistossasi ja toimita se valitsemasi verkkopalvelimen kanssa. Laita seuraava koodi index.html: ään:

<!doctype html>
<html lang="fi">
<pää>
<meta charset="UTF-8">
<metanimi="näkymä"
 sisältö="leveys = laitteen leveys, käyttäjän skaalattava = ei, aloitusskaala = 1,0, maksimimittakaava = 1,0, pienin mittakaava = 1,0">
<meta http-equiv="X-UA-yhteensopiva" sisältö="eli = reuna">
<otsikko>Asiakirja</title>
<tyyli>
 .colorful-div {
 pehmuste: 3rem;
 väri valkoinen;
 background-image: lineaarinen gradientti (oikealle, keltainen, rebeccapurple);
 reuna: 1px tasainen musta;
 marginaali: 1rem auto;
 fontin koko: 3rem;
 font-family: kursiivinen;
 }
</style>
</head>
<kehon>
<div class="värikäs-div">
 minä'tulen olemaan kuvakaappauksessa!
</div>
<div class="pitkä teksti">
 minä'm esimerkki riittävän monisanaisesta kappaleesta
 osoittaa, että kuvakaappausten ottaminen JavaScriptillä on
 todella helppoa seuraavista syistä:
<ul>
<li>Syy 1</li>
<li>Syy 2</li>
<li>Syy 2</li>
</ul>
</div>
<komentosarja src="out.js"></script>
</body>
</html>

Tämä koodi luo kaksi elementtiä sivulle: div, jossa on kaltevuustausta, ja jonkin verran tekstiä ja järjestämättömän luettelon toisen div-elementin sisään. Seuraavaksi kirjoitat JavaScript, joka muuntaa nämä elementit kuviksi. Laita seuraava koodi uuteen tiedostoon nimeltä script.js:

tuonti * kuten htmlToImage alkaen "html-kuvaksi";
const elems = ['.colorful-div', '.pitkä teksti']


elements.jokaiselle((elem, ind) => {
konst solmu = asiakirja.querySelector (elem)
htmlToImage.toPng(solmu)
 .sitten(toiminto (dataUrl) {
päästää img = Uusi Kuva();
 img.src = dataUrl;
asiakirja.body.appendChild(img);
 })
 .ottaa kiinni(toiminto(virhe){
 console.error('Hups! Jotain meni pieleen!');
konsoli.log (virhe)
 });
})

Tämä koodi tekee muutamia asioita:

  • Tuo html-kuvakirjaston.
  • Luo CSS-valitsimista koostuvan taulukon, joka kohdistaa kahteen elementtiin.
  • Luo PNG-kuvan data-URL-osoitteen muodossa taulukon jokaisesta elementistä.
  • Luo img-tunnisteen ja asettaa sen src-attribuutin datan URL-osoitteeseen luoden kuvakopiot kahdesta elementistä.

Käytä nyt esbuildia luomaan niputettu tiedosto (out.js), jotka index.html viittaavat suorittamalla seuraavat komennot päätteessäsi:

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

Tässä vaiheessa tältä index.html: n pitäisi näyttää selaimessasi:

Vaikka kopiot näyttävät täsmälleen samalta kuin alkuperäiset, ne ovat itse asiassa kuvaelementtejä. Voit vahvistaa tämän käyttämällä avaamalla kehitystyökalusi ja tarkastaa ne.

Tämä kirjasto toimii myös JavaScript-kehysten kanssa. The html-kuvaksi -dokumentaatio sisältää ohjeet muiden kuvamuotojen luomiseen. Se sisältää myös esimerkin, joka näyttää kuinka kirjastoa käytetään Reactin kanssa.

Kuvakaappausten ottaminen JavaScriptillä on helppoa

Ei ole natiivi JavaScript-menetelmää kuvien luomiseen HTML-elementeistä tai kuvakaappausten ottamiseksi DOM: sta. Kuitenkin kirjastojen ja palveluiden, kuten html-to-image, avulla siitä tulee helppo tehtävä.

On muitakin tapoja saavuttaa samanlaisia ​​tuloksia, kuten wkhtmltoimage-kirjasto. Voit käyttää tätä avoimen lähdekoodin työkalua ottaaksesi kuvakaappauksia koko verkkosivusta.