Pokud chcete pořídit snímek obrazovky části nebo celé své webové stránky pomocí JavaScriptu, můžete se zaseknout. Vytvoření obrázku z prvku HTML se může zdát jako výzva, protože neexistuje žádný přímý způsob, jak to udělat v JavaScriptu.

Naštěstí to není nemožný úkol a ve skutečnosti je to docela snadné se správnými nástroji. Pomocí knihovny html-to-image je vytváření obrázků uzlů DOM stejně jednoduché jako jediné volání funkce.

Jak funguje html-to-image?

The html-to-image knihovna vytváří obrázek ve formě adresy URL dat base64. Podporuje několik výstupních formátů, včetně PNG, JPG a SVG. K provedení tohoto převodu knihovna používá tento algoritmus:

  1. Vytvořte klon cílového prvku HTML, jeho potomků a všech připojených pseudoprvků.
  2. Zkopírujte styl pro všechny klonované prvky a vložte styl do řádku.
  3. Vložte příslušné webové fonty, pokud nějaké existují.
  4. Vložte všechny přítomné obrázky.
  5. Převeďte klonovaný uzel na XML a poté na SVG.
  6. Použijte SVG k vytvoření datové URL.

Upozornění a omezení

instagram viewer

I když je html-to-image skvělá knihovna, není dokonalá. Má to několik výhrad, jmenovitě:

  • Knihovna nebude fungovat v Internet Exploreru nebo Safari.
  • Pokud kód HTML, který se pokoušíte převést, obsahuje prvek pokaženého plátna, knihovna selže. Tak jako MDN vysvětluje, že zahrnutí neschválených dat CORS do vašeho prvku canvas jej pošpiní.
  • Protože prohlížeče omezují maximální velikost datové adresy URL, existují omezení velikosti HTML, které může knihovna převést.

Používání knihovny

Chcete-li knihovnu vyzkoušet, první věc, kterou musíte udělat, je vytvořit adresář projektu na místním počítači. Dále nainstalujte html-to-image do tohoto adresáře pomocí správce balíčků npm. Zde je příkaz terminálu pro jeho instalaci:

npm Nainstalujte--uložit html-to-image

Měli byste také nainstalovat svazek JavaScriptu, aby bylo používání knihovny o něco jednodušší. The esbuild bundler může pomoci zabalit moduly uzlů do skriptů kompatibilních s webem.

npm Nainstalujte esbuild

To je vše, co potřebujete nainstalovat. Dále vytvořte soubor s názvem index.html ve vašem adresáři a naservírujte jej s webovým serverem dle vašeho výběru. Vložte následující kód do index.html:

<!doctype html>
<html jazyk="en">
<hlava>
<meta znaková sada="UTF-8">
<meta jméno="výřez"
 obsah ="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-kompatibilní" obsah ="tj=okraj">
<titul>Dokument</title>
<styl>
 .colorful-div {
 polstrování: 3rem;
 barva bílá;
 background-image: linear-gradient (doprava, žlutá, rebeccapurple);
 ohraničení: 1px plná černá;
 okraj: 1rem auto;
 velikost písma: 3rem;
 font-family: cursive;
 }
</style>
</head>
<tělo>
<třída div="barevný-div">
 já'budu na snímku obrazovky!
</div>
<třída div="dlouhý text">
 já'm příklad dostatečně podrobného odstavce, který
 ilustruje, že pořizování snímků obrazovky v JavaScriptu je
 opravdu velmi snadné, a to z následujících důvodů:
<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 vytvoří na stránce dva prvky: prvek div s přechodem na pozadí a nějaký text a neuspořádaný seznam uvnitř dalšího prvku div. Dále napíšete JavaScript pro převod těchto prvků na obrázky. Vložte následující kód do nového souboru s názvem script.js:

import * tak jako htmlToImage z "html-to-image";
const elems = ['.barevný-div', '.dlouhý text']


prvky.pro každého((elem, ind) => {
konst uzel = dokument.querySelector (elem)
htmlToImage.toPng(uzel)
 .pak(funkce (dataUrl) {
nechat img = Nový Obraz();
 img.src = dataUrl;
dokument.tělo.appendChild(img);
 })
 .úlovek(funkce(chyba){
 console.error('Jejda! Něco se pokazilo!');
řídicí panel.log (chyba)
 });
})

Tento kód dělá několik věcí:

  • Importuje knihovnu html-to-image.
  • Vytvoří pole vytvořené ze selektorů CSS zacílených na dva prvky.
  • Vytvoří obrázek PNG ve formě datové adresy URL z každého prvku pole.
  • Vytvoří značku img a nastaví její atribut src na datovou adresu URL, čímž vytvoří kopie obrázku dvou prvků.

Nyní pomocí esbuild vygenerujte přiložený soubor (out.js), na který index.html odkazuje, spuštěním následujícího ve vašem terminálu:

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

V tuto chvíli by měl index.html ve vašem prohlížeči vypadat takto:

I když kopie vypadají úplně stejně jako originály, ve skutečnosti se jedná o obrazové prvky. Můžete to potvrdit tím otevření vašich vývojářských nástrojů a kontrolovat je.

Tato knihovna také pracuje s frameworky JavaScript. The dokumentace html-to-image obsahuje návod, jak generovat další obrazové formáty. Obsahuje také příklad ukazující, jak používat knihovnu s Reactem.

Pořizování snímků obrazovky pomocí JavaScriptu je snadné

Neexistuje žádná nativní metoda JavaScriptu pro vytváření obrázků z prvků HTML nebo pořizování snímků obrazovky DOM. S pomocí knihoven a služeb, jako je html-to-image, se to však stává snadným úkolem.

Existují i ​​jiné způsoby, jak dosáhnout podobných výsledků, jako je knihovna wkhtmltoimage. Tento nástroj s otevřeným zdrojovým kódem můžete použít k pořízení snímků celé webové stránky.