Dacă doriți să faceți o captură de ecran a unei părți sau a întregii pagini web folosind JavaScript, este posibil să vă aflați blocat. Crearea unei imagini dintr-un element HTML poate părea o provocare, deoarece nu există o modalitate directă de a face acest lucru în JavaScript.

Din fericire, aceasta nu este o sarcină imposibilă și, de fapt, este destul de ușoară cu instrumentele adecvate. Folosind biblioteca html-to-image, realizarea de imagini ale nodurilor DOM este la fel de simplă ca un singur apel de funcție.

Cum funcționează html-to-image?

The html-to-image biblioteca produce o imagine sub forma unui URL de date base64. Acceptă mai multe formate de ieșire, inclusiv PNG, JPG și SVG. Pentru a efectua această conversie, biblioteca folosește acest algoritm:

  1. Creați o clonă a elementului HTML țintă, a copiilor acestuia și a oricăror pseudo-elemente atașate.
  2. Copiați stilul pentru toate elementele clonate și încorporați stilul în linie.
  3. Încorporați fonturile web relevante, dacă există.
  4. Încorporați orice imagini prezente.
    5. instagram viewer
  5. Convertiți nodul clonat în XML, apoi SVG.
  6. Utilizați SVG pentru a crea o adresă URL de date.

Avertismente și limitări

Chiar dacă html-to-image este o bibliotecă grozavă, nu este perfectă. Are câteva avertismente, și anume:

  • Biblioteca nu va funcționa în Internet Explorer sau Safari.
  • Dacă codul HTML pe care încercați să îl convertiți include un element de pânză contaminat, biblioteca va eșua. La fel de MDN explică, includerea datelor neaprobate de CORS în elementul dvs. de pânză îl va afecta.
  • Deoarece browserele stabilesc limite pentru dimensiunea maximă a unei adrese URL de date, există limite privind dimensiunea HTML pe care o poate converti biblioteca.

Utilizarea Bibliotecii

Pentru a încerca biblioteca, primul lucru pe care trebuie să-l faceți este să creați un director de proiect pe mașina dvs. locală. Apoi, instalați html-to-image în acel director folosind managerul de pachete npm. Iată comanda terminalului pentru a-l instala:

npm instalare--save html-to-image

De asemenea, ar trebui să instalați un bundler JavaScript, pentru a ușura puțin utilizarea bibliotecii. The esbuild bundler poate ajuta la pachetul modulelor nod în scripturi compatibile web.

npm instalare esbuild

Asta este tot ce trebuie să instalezi. Apoi, creați un fișier numit index.html în directorul dvs. și serviți-l cu un server web la alegere. Pune următorul cod în index.html:

<!doctype html>
<html lang="ro">
<cap>
<meta charset="UTF-8">
<meta nume="fereastra"
 continut="width=device-width, user-scalable=nu, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="Compatibil X-UA" continut="adică=marginea">
<titlu>Document</title>
<stil>
 .colorful-div {
 captuseala: 3rem;
 culoare albă;
 imagine de fundal: gradient liniar (la dreapta, galben, rebeccapurple);
 chenar: 1px negru solid;
 marja: 1rem auto;
 dimensiunea fontului: 3rem;
 familie de fonturi: cursiv;
 }
</style>
</head>
<corp>
<div class="colorat-div">
 eu'voi fi într-o captură de ecran!
</div>
<div class="text lung">
 eu'm un exemplu de paragraf suficient de verbos care
 ilustrează faptul că realizarea de capturi de ecran în JavaScript este
 foarte ușor, din următoarele motive:
<ul>
<li>Motivul 1</li>
<li>Motivul 2</li>
<li>Motivul 2</li>
</ul>
</div>
<script src="out.js"></script>
</body>
</html>

Acest cod creează două elemente pe pagină: un div cu un fundal gradient și ceva text și o listă neordonată în interiorul altui div. Apoi, veți scrie JavaScript pentru a converti aceste elemente în imagini. Puneți următorul cod într-un fișier nou numit script.js:

import * la fel de htmlToImage din „html-to-image”;
const elems = ['.colorat-div', '.text lung']


elems.pentru fiecare((elem, ind) => {
const nod = document.querySelector (elem)
htmlToImage.toPng(nodul)
 .apoi(funcţie (dataUrl) {
lăsa img = nou Imagine();
 img.src = dataUrl;
document.corp.apendChild(img);
 })
 .captură(funcţie(eroare){
 console.error('Ups! Ceva a mers prost!');
consolă.log (eroare)
 });
})

Acest cod face câteva lucruri:

  • Importă biblioteca html-to-image.
  • Creează o matrice formată din selectori CSS care vizează cele două elemente.
  • Creează o imagine PNG sub forma unei adrese URL de date din fiecare element al matricei.
  • Creează o etichetă img și își setează atributul src la adresa URL a datelor, creând copii de imagine ale celor două elemente.

Acum utilizați esbuild pentru a genera fișierul pachet (out.js) care face referire la index.html rulând următoarele în terminalul dvs.:

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

În acest moment, iată cum ar trebui să arate index.html în browserul dvs.:

Chiar dacă copiile arată exact la fel ca originalele, ele sunt de fapt elemente de imagine. Puteți confirma acest lucru prin deschiderea instrumentelor de dezvoltare și inspectându-le.

Această bibliotecă funcționează și cu cadre JavaScript. The documentație html-to-image conține instrucțiuni despre cum să generați alte formate de imagine. Include, de asemenea, un exemplu care arată cum să utilizați biblioteca cu React.

Realizarea de capturi de ecran cu JavaScript este ușoară

Nu există o metodă JavaScript nativă pentru a crea imagini din elemente HTML sau a face capturi de ecran ale DOM. Cu toate acestea, cu ajutorul bibliotecilor și serviciilor precum html-to-image, devine o sarcină ușoară.

Există și alte modalități de a obține rezultate similare, cum ar fi biblioteca wkhtmltoimage. Puteți utiliza acest instrument open-source pentru a face capturi de ecran ale unei pagini web complete.