Ha képernyőképet szeretne készíteni weboldalának egy részéről vagy egészéről JavaScript használatával, előfordulhat, hogy elakad. A kép létrehozása HTML elemből kihívásnak tűnhet, mivel erre nincs közvetlen mód a JavaScriptben.

Szerencsére ez nem lehetetlen feladat, sőt, a megfelelő eszközökkel meglehetősen egyszerű. A html-to-image könyvtár használatával a DOM-csomópontok képeinek elkészítése olyan egyszerű, mint egyetlen függvényhívás.

Hogyan működik a html-ből képbe?

Az html-to-image könyvtár egy képet állít elő base64 adat URL formájában. Számos kimeneti formátumot támogat, beleértve a PNG-t, JPG-t és SVG-t. Az átalakítás végrehajtásához a könyvtár ezt az algoritmust használja:

  1. Hozzon létre egy klónt a cél HTML-elemről, annak gyermekeiről és a csatolt pszeudoelemekről.
  2. Másolja ki az összes klónozott elem stílusát, és ágyazza be a stílust.
  3. A megfelelő webes betűtípusok beágyazása, ha vannak ilyenek.
  4. A jelenlévő képek beágyazása.
  5. A klónozott csomópont konvertálása XML-be, majd SVG-be.
  6. Használja az SVG-t adat URL létrehozásához.
instagram viewer

Figyelmeztetések és korlátozások

Annak ellenére, hogy a html-to-image egy nagyszerű könyvtár, nem tökéletes. Van benne néhány figyelmeztetés, nevezetesen:

  • A könyvtár nem fog működni az Internet Explorerben vagy a Safariban.
  • Ha a konvertálni kívánt HTML szennyezett vászonelemet tartalmaz, a könyvtár meghiúsul. Mint MDN elmagyarázza, hogy a CORS által nem jóváhagyott adatok bevonása a vászonelembe beszennyezi azt.
  • Mivel a böngészők korlátozzák az adat-URL maximális méretét, a könyvtár által konvertálható HTML méretére vonatkozóan is vannak korlátozások.

A könyvtár használata

A könyvtár kipróbálásához először létre kell hoznia egy projektkönyvtárat a helyi gépen. Ezután telepítse a html-to-image fájlt ebbe a könyvtárba a használatával az npm csomagkezelőt. Íme a terminálparancs a telepítéshez:

npm telepítés-- html mentése képbe

Telepítsen egy JavaScript bundlert is, hogy egy kicsit megkönnyítse a könyvtár használatát. Az esbuild A bundler segíthet a csomópontmodulok web-kompatibilis szkriptekbe történő becsomagolásában.

npm telepítés esbuild

Csak ennyit kell telepítenie. Ezután hozzon létre egy fájlt, melynek neve index.html címtárában, és tálalja ki egy választott webszerverrel. Helyezze be a következő kódot az index.html-be:

<!doctype html>
<html lang="hu">
<fej>
<meta karakterkészlet="UTF-8">
<meta név="nézetablak"
 tartalom="szélesség = eszköz szélessége, felhasználói méretezhető = nem, kezdeti méret = 1,0, maximális skála = 1,0, minimális méret = 1,0">
<meta http-equiv="X-UA-kompatibilis" tartalom="ie=él">
<cím>Dokumentum</title>
<stílus>
 .colorful-div {
 párnázás: 3 rem;
 fehér szín;
 background-image: lineáris gradiens (jobbra, sárga, rebeccapurple);
 keret: 1px tömör fekete;
 margó: 1rem auto;
 betűméret: 3 rem;
 font-family: cursive;
 }
</style>
</head>
<test>
<div class="színes-div">
 én'képernyőképen leszek!
</div>
<div class="hosszú szövegű">
 én'm egy példa kellően bőbeszédű bekezdésre, amely
 szemlélteti, hogy a képernyőképek készítése JavaScriptben igen
 nagyon egyszerű, a következő okok miatt:
<ul>
<li>1. ok</li>
<li>2. ok</li>
<li>2. ok</li>
</ul>
</div>
<script src="out.js"></script>
</body>
</html>

Ez a kód két elemet hoz létre az oldalon: egy div-t színátmenetes háttérrel, valamint egy szöveget és egy rendezetlen listát egy másik div-ben. Ezután meg kell írnia a JavaScriptet, hogy ezeket az elemeket képekké konvertálja. Helyezze be a következő kódot egy új, script.js nevű fájlba:

import * mint htmlToImage tól től "html-képre";
const elems = ['.színes-div', '.hosszú szöveg']


elems.az egyes((elem, ind) => {
const csomópont = dokumentum.querySelector (elem)
htmlToImage.toPng(csomópont)
 .akkor(funkció (dataUrl) {
hagyja img = új Kép();
 img.src = adatUrl;
dokumentum.test.appendChild(img);
 })
 .fogás(funkció(hiba){
 console.error('Hoppá! Valami rosszul sült el!');
konzol.log (hiba)
 });
})

Ez a kód néhány dolgot végez:

  • Importálja a html-ről képre könyvtárat.
  • Létrehoz egy tömböt, amely a két elemet célzó CSS-szelektorokból áll.
  • PNG-képet hoz létre adat-URL formájában a tömb minden eleméből.
  • Létrehoz egy img címkét, és beállítja az src attribútumot az adat URL-jére, így képmásolatokat hoz létre a két elemről.

Most az esbuild segítségével állítsa elő a kötegelt fájlt (out.js), amelyre az index.html hivatkozik, a következő futtatásával a terminálon:

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

Ezen a ponton a következőképpen kell kinéznie az index.html-nek a böngészőben:

Annak ellenére, hogy a másolatok pontosan ugyanúgy néznek ki, mint az eredetiek, valójában képelemek. Ezzel megerősítheti a fejlesztői eszközök megnyitása és megvizsgálja őket.

Ez a könyvtár JavaScript keretrendszerekkel is működik. Az html-to-image dokumentáció utasításokat tartalmaz más képformátumok létrehozásához. Tartalmaz egy példát is, amely bemutatja, hogyan kell használni a könyvtárat a React segítségével.

Képernyőképek készítése JavaScripttel egyszerű

Nincs natív JavaScript-módszer a képek HTML-elemekből történő létrehozására vagy a DOM-ról képernyőképek készítésére. A könyvtárak és szolgáltatások, például a html-to-image segítségével azonban ez egyszerű feladattá válik.

Vannak más módok is hasonló eredmények elérésére, például a wkhtmltoimage könyvtár. Ezzel a nyílt forráskódú eszközzel képernyőképeket készíthet egy teljes weboldalról.