Jei norite padaryti dalies arba viso savo tinklalapio ekrano kopiją naudodami „JavaScript“, galite užstrigti. Vaizdo kūrimas iš HTML elemento gali atrodyti kaip iššūkis, nes „JavaScript“ nėra tiesioginio būdo tai padaryti.

Laimei, tai nėra neįmanoma užduotis ir iš tikrųjų yra gana lengva naudojant tinkamus įrankius. Naudojant HTML į vaizdo biblioteką, DOM mazgų vaizdų kūrimas yra toks pat paprastas kaip vienos funkcijos iškvietimas.

Kaip veikia html į vaizdą?

The html į vaizdą biblioteka sukuria vaizdą base64 duomenų URL forma. Jis palaiko kelis išvesties formatus, įskaitant PNG, JPG ir SVG. Norėdami atlikti šią konversiją, biblioteka naudoja šį algoritmą:

  1. Sukurkite tikslinio HTML elemento, jo antrinių elementų ir visų pridėtų pseudoelementų kloną.
  2. Nukopijuokite visų klonuotų elementų stilių ir įterpkite stilių į eilutę.
  3. Įdėkite atitinkamus žiniatinklio šriftus, jei tokių yra.
  4. Įterpti visus esamus vaizdus.
  5. Konvertuokite klonuotą mazgą į XML, tada į SVG.
  6. Norėdami sukurti duomenų URL, naudokite SVG.
instagram viewer

Įspėjimai ir apribojimai

Nors html į vaizdą yra puiki biblioteka, ji nėra tobula. Jame yra keletas įspėjimų, būtent:

  • Biblioteka neveiks „Internet Explorer“ ar „Safari“.
  • Jei HTML, kurį bandote konvertuoti, yra sugadintas drobės elementas, biblioteka nepavyks. Kaip MDN paaiškina, kad CORS nepatvirtintų duomenų įtraukimas į drobės elementą jį sugadins.
  • Kadangi naršyklės riboja maksimalų duomenų URL dydį, yra ribojamas HTML, kurį biblioteka gali konvertuoti, dydis.

Naudojimasis biblioteka

Norėdami išbandyti biblioteką, pirmiausia turite sukurti projekto katalogą vietiniame kompiuteryje. Tada įdiekite html į vaizdą tame kataloge naudodami npm paketų tvarkyklė. Čia yra terminalo komanda, skirta jį įdiegti:

npm diegti--išsaugoti html į vaizdą

Taip pat turėtumėte įdiegti „JavaScript“ rinktuvą, kad būtų lengviau naudotis biblioteka. The statyti bundler gali padėti supakuoti mazgų modulius į su žiniatinkliu suderinamus scenarijus.

npm diegti statyti

Tai viskas, ko jums reikia įdiegti. Tada sukurkite failą pavadinimu index.html savo kataloge ir pateikite jį pasirinktu žiniatinklio serveriu. Įdėkite šį kodą į index.html:

<!doctype html>
<html lang="lt">
<galva>
<meta simbolių rinkinys ="UTF-8">
<meta vardas ="peržiūros sritis"
 turinys="plotis = įrenginio plotis, vartotojo keičiamas = ne, pradinė skalė = 1,0, didžiausia skalė = 1,0, mažiausia skalė = 1,0">
<meta http-equiv="Suderinamas su X-UA" turinys="ie=kraštas">
<titulą>dokumentas</title>
<stilius>
 .colorful-div {
 paminkštinimas: 3 rem;
 spalva: balta;
 background-image: linijinis gradientas (į dešinę, geltona, rebeccapurple);
 kraštinė: 1px vientisa juoda;
 paraštė: 1rem auto;
 šrifto dydis: 3rem;
 šriftų šeima: kursyvus;
 }
</style>
</head>
<kūnas>
<div klasė ="spalvingas-div">
 aš'būsiu ekrano kopijoje!
</div>
<div klasė ="ilgas tekstas">
 aš'm pakankamai žodinės pastraipos pavyzdys, kad
 iliustruoja, kad ekrano kopijų darymas JavaScript yra
 tikrai labai paprasta dėl šių priežasčių:
<ul>
<li>1 priežastis</li>
<li>2 priežastis</li>
<li>2 priežastis</li>
</ul>
</div>
<scenarijus src="out.js"></script>
</body>
</html>

Šis kodas sukuria du puslapio elementus: „div“ su gradiento fonu ir tam tikrą tekstą bei netvarkingą sąrašą kitame „div“. Tada parašykite „JavaScript“, kad konvertuotumėte šiuos elementus į vaizdus. Įdėkite šį kodą į naują failą script.js:

importuoti * kaip htmlToImage iš „html į vaizdą“;
const elems = ['.spalvingas-div', '.ilgo teksto']


elements.kiekvienam((elem, ind) => {
konst mazgas = dokumentas.querySelector (element)
htmlToImage.toPng(mazgas)
 .thena(funkcija (dataUrl) {
leisti img = naujas Vaizdas ();
 img.src = dataUrl;
dokumentas.kūnas.pridėtiChild(img);
 })
 .sugauti(funkcija(klaida){
 console.error('Oi! Kažkas negerai!');
konsolė.log (klaida)
 });
})

Šis kodas atlieka keletą dalykų:

  • Importuoja HTML į vaizdą biblioteką.
  • Sukuria masyvą, sudarytą iš CSS parinktuvų, taikomų dviem elementams.
  • Sukuria PNG vaizdą duomenų URL forma iš kiekvieno masyvo elemento.
  • Sukuria img žymą ir nustato jos atributą src į duomenų URL, sukurdamas dviejų elementų vaizdo kopijas.

Dabar naudokite esbuild, kad sugeneruotumėte susietą failą (out.js), kurios nurodo index.html nuorodas, savo terminale paleisdami šiuos veiksmus:

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

Šiuo metu jūsų naršyklėje turėtų atrodyti index.html:

Nors kopijos atrodo lygiai taip pat kaip originalai, jos iš tikrųjų yra vaizdo elementai. Tai galite patvirtinti naudodami atidarydami savo kūrimo įrankius ir juos apžiūrint.

Ši biblioteka taip pat veikia su „JavaScript“ sistemomis. The html į vaizdą dokumentacija yra instrukcijos, kaip sukurti kitus vaizdo formatus. Jame taip pat yra pavyzdys, rodantis, kaip naudoti biblioteką su React.

Lengva daryti ekrano kopijas naudojant „JavaScript“.

Nėra vietinio „JavaScript“ metodo, leidžiančio kurti vaizdus iš HTML elementų arba daryti DOM ekrano kopijas. Tačiau naudojant bibliotekas ir paslaugas, pvz., „html-to-image“, tai tampa lengva užduotimi.

Yra ir kitų būdų, kaip pasiekti panašių rezultatų, pavyzdžiui, wkhtmltoimage biblioteka. Galite naudoti šį atvirojo kodo įrankį, kad padarytumėte viso tinklalapio ekrano kopijas.