Ak chcete urobiť snímku obrazovky časti alebo celej svojej webovej stránky pomocou JavaScriptu, môžete sa ocitnúť v uviaznutí. Vytvorenie obrázka z prvku HTML sa môže javiť ako výzva, pretože neexistuje žiadny priamy spôsob, ako to urobiť v JavaScripte.

Našťastie to nie je nemožná úloha a v skutočnosti je to celkom jednoduché so správnymi nástrojmi. Pomocou knižnice html-to-image je vytváranie obrázkov uzlov DOM také jednoduché ako jediné volanie funkcie.

Ako funguje html-to-image?

The html-to-image knižnica vytvorí obrázok vo forme adresy URL údajov base64. Podporuje niekoľko výstupných formátov vrátane PNG, JPG a SVG. Na vykonanie tejto konverzie knižnica používa tento algoritmus:

  1. Vytvorte klon cieľového prvku HTML, jeho potomkov a všetkých pripojených pseudoprvkov.
  2. Skopírujte štýl pre všetky klonované prvky a vložte štýl do riadku.
  3. Vložte príslušné webové písma, ak nejaké existujú.
  4. Vložte všetky prítomné obrázky.
  5. Preveďte klonovaný uzol na XML a potom na SVG.
  6. Použite SVG na vytvorenie dátovej URL.
instagram viewer

Výstrahy a obmedzenia

Aj keď je html-to-image skvelá knižnica, nie je dokonalá. Má niekoľko výhrad, a to:

  • Knižnica nebude fungovať v prehliadači Internet Explorer alebo Safari.
  • Ak kód HTML, ktorý sa pokúšate konvertovať, obsahuje poškodený prvok plátna, knižnica zlyhá. Ako MDN vysvetľuje, že zahrnutie údajov neschválených CORS do prvku plátna ho pokazí.
  • Pretože prehliadače obmedzujú maximálnu veľkosť údajovej adresy URL, existujú obmedzenia týkajúce sa veľkosti HTML, ktoré môže knižnica konvertovať.

Používanie knižnice

Ak chcete knižnicu vyskúšať, prvá vec, ktorú musíte urobiť, je vytvoriť adresár projektu na vašom lokálnom počítači. Ďalej nainštalujte html-to-image do tohto adresára pomocou správca balíkov npm. Tu je príkaz terminálu na jeho inštaláciu:

npm Inštalácia--uložiť html-to-image

Mali by ste si tiež nainštalovať balík JavaScript, aby bolo používanie knižnice o niečo jednoduchšie. The esbuild bundler môže pomôcť zabaliť moduly uzlov do skriptov kompatibilných s webom.

npm Inštalácia esbuild

To je všetko, čo potrebujete nainštalovať. Ďalej vytvorte súbor s názvom index.html vo vašom adresári a podávajte ho s webovým serverom podľa vášho výberu. Vložte nasledujúci kód do index.html:

<!doctype html>
<html jazyk="en">
<hlavu>
<meta znaková sada="UTF-8">
<meta meno="výrez"
 obsah ="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-ekviv="X-UA-kompatibilné" obsah ="ie=okraj">
<titul>Dokument</title>
<štýl>
 .colorful-div {
 polstrovanie: 3rem;
 farba: biela;
 obrázok na pozadí: lineárny gradient (doprava, žltá, rebeccapurpurová);
 orámovanie: 1px plná čierna;
 okraj: 1rem auto;
 veľkosť písma: 3rem;
 font-family: kurzíva;
 }
</style>
</head>
<telo>
<trieda div="farebný-div">
 ja'budem na snímke obrazovky!
</div>
<trieda div="dlhý text">
 ja'm príklad dostatočne podrobného odseku, ktorý
 ilustruje, že vytváranie snímok obrazovky v JavaScripte je
 naozaj veľmi jednoduché, a to z nasledujúcich dôvodov:
<ul>
<li>Dôvod 1</li>
<li>Dôvod 2</li>
<li>Dôvod 2</li>
</ul>
</div>
<skript src="out.js"></script>
</body>
</html>

Tento kód vytvorí na stránke dva prvky: prvok div s gradientným pozadím a nejaký text a neusporiadaný zoznam v inom prvku div. Ďalej napíšete JavaScript na konverziu týchto prvkov na obrázky. Vložte nasledujúci kód do nového súboru s názvom script.js:

importovať * ako htmlToImage od "html-to-image";
const elems = ['.farebný-div', '.dlhý text']


prvky.pre každý((element, ind) => {
konšt uzol = dokument.querySelector (elem)
htmlToImage.toPng(uzol)
 .potom(funkciu (dataUrl) {
nech img = Nový Obrázok();
 img.src = dataUrl;
dokument.telo.appendChild(img);
 })
 .chytiť(funkciu(chyba){
 console.error('Och! Niečo sa pokazilo!');
konzoly.log (chyba)
 });
})

Tento kód robí niekoľko vecí:

  • Importuje knižnicu html-to-image.
  • Vytvorí pole vytvorené zo selektorov CSS so zacielením na dva prvky.
  • Vytvorí obrázok PNG vo forme adresy URL údajov z každého prvku poľa.
  • Vytvorí značku img a nastaví jej atribút src na adresu URL údajov, čím vytvorí kópie obrázkov týchto dvoch prvkov.

Teraz použite esbuild na vygenerovanie pribaleného súboru (out.js), ktorý index.html odkazuje, spustením nasledujúceho príkazu vo vašom termináli:

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

V tomto bode by mal index.html vyzerať vo vašom prehliadači takto:

Aj keď kópie vyzerajú úplne rovnako ako originály, v skutočnosti sú to obrazové prvky. Môžete to potvrdiť tým otváranie nástrojov pre vývojárov a ich kontrolu.

Táto knižnica funguje aj s frameworkami JavaScript. The html-to-image dokumentácia obsahuje návod, ako generovať iné obrazové formáty. Obsahuje aj príklad, ktorý ukazuje, ako používať knižnicu s Reactom.

Vytváranie snímok obrazovky pomocou JavaScriptu je jednoduché

Neexistuje žiadna natívna metóda JavaScript na vytváranie obrázkov z prvkov HTML alebo vytváranie snímok obrazovky DOM. S pomocou knižníc a služieb, ako je html-to-image, sa to však stáva jednoduchou úlohou.

Existujú aj iné spôsoby, ako dosiahnuť podobné výsledky, ako napríklad knižnica wkhtmltoimage. Tento nástroj s otvoreným zdrojom môžete použiť na vytvorenie snímok celej webovej stránky.