Jeśli chcesz zrobić zrzut ekranu części lub całej swojej strony internetowej za pomocą JavaScript, możesz utknąć. Tworzenie obrazu z elementu HTML może wydawać się wyzwaniem, ponieważ nie ma bezpośredniego sposobu na zrobienie tego w JavaScript.

Na szczęście nie jest to zadanie niemożliwe do wykonania i jest całkiem łatwe dzięki odpowiednim narzędziom. Korzystając z biblioteki html-to-image, tworzenie obrazów węzłów DOM jest tak proste, jak wywołanie pojedynczej funkcji.

Jak działa zamiana html na obraz?

The html-do-obrazu biblioteka tworzy obraz w postaci adresu URL danych base64. Obsługuje kilka formatów wyjściowych, w tym PNG, JPG i SVG. Aby wykonać tę konwersję, biblioteka używa tego algorytmu:

  1. Utwórz klon docelowego elementu HTML, jego elementów podrzędnych i wszelkich dołączonych pseudoelementów.
  2. Skopiuj stylizację dla wszystkich sklonowanych elementów i osadź stylizację w wierszu.
  3. Osadź odpowiednie czcionki internetowe, jeśli takie istnieją.
  4. Osadź wszystkie obecne obrazy.
  5. Przekonwertuj sklonowany węzeł na XML, a następnie SVG.
  6. Użyj SVG, aby utworzyć adres URL danych.
instagram viewer

Zastrzeżenia i ograniczenia

Mimo że html-to-image to świetna biblioteka, nie jest idealna. Ma kilka zastrzeżeń, a mianowicie:

  • Biblioteka nie będzie działać w przeglądarce Internet Explorer lub Safari.
  • Jeśli kod HTML, który próbujesz przekonwertować, zawiera skażony element canvas, biblioteka nie powiedzie się. Jak MDN wyjaśnia, że ​​umieszczenie w elemencie canvas danych niezatwierdzonych przez CORS spowoduje jego skażenie.
  • Ponieważ przeglądarki nakładają ograniczenia na maksymalny rozmiar adresu URL danych, istnieją ograniczenia dotyczące rozmiaru kodu HTML, który biblioteka może przekonwertować.

Korzystanie z Biblioteki

Aby wypróbować bibliotekę, pierwszą rzeczą, którą musisz zrobić, to utworzyć katalog projektu na swoim lokalnym komputerze. Następnie zainstaluj html-to-image w tym katalogu, używając menedżer pakietów npm. Oto polecenie terminala, aby go zainstalować:

npm zainstalować--save html-to-image

Powinieneś także zainstalować pakiet JavaScript, aby nieco ułatwić korzystanie z biblioteki. The esbuild bundler może pomóc w pakowaniu modułów węzłów do skryptów kompatybilnych z siecią.

npm zainstalować esbuild

To wszystko, czego potrzebujesz do zainstalowania. Następnie utwórz plik o nazwie index.html w swoim katalogu i udostępniaj go z wybranym serwerem WWW. Umieść następujący kod w index.html:

<!doctype html>
<html lang="en">
<głowa>
<zestaw znaków meta="UTF-8">
<nazwa meta="rzutnia"
 zawartość="szerokość=szerokość urządzenia, skalowalność użytkownika=nie, skala początkowa=1.0, skala maksymalna=1.0, skala minimalna=1.0">
<meta http-equiv="Kompatybilny z X-UA" zawartość="tj=krawędź">
<tytuł>Dokument</title>
<styl>
 .kolorowy-div {
 wypełnienie: 3rem;
 kolor biały;
 obraz w tle: gradient liniowy (do prawej, żółty, rebeccapurple);
 obramowanie: 1px jednolita czerń;
 marża: 1rem auto;
 rozmiar czcionki: 3rem;
 rodzina czcionek: kursywa;
 }
</style>
</head>
<ciało>
<klasa div="kolorowe-div">
 I'będę na zrzucie ekranu!
</div>
<klasa div="długi tekst">
 I'm przykład wystarczająco szczegółowego akapitu, który…
 pokazuje, że robienie zrzutów ekranu w JavaScript jest
 naprawdę bardzo proste, z następujących powodów:
<ul>
<Li>Powód 1</li>
<Li>Powód 2</li>
<Li>Powód 2</li>
</ul>
</div>
<źródło skryptu="out.js"></script>
</body>
</html>

Ten kod tworzy na stronie dwa elementy: element div z gradientowym tłem oraz tekst i nieuporządkowaną listę wewnątrz innego elementu div. Następnie napiszesz JavaScript, aby przekonwertować te elementy na obrazy. Umieść następujący kod w nowym pliku o nazwie script.js:

import * jak htmlDoObrazu z "html-do-obrazu";
stałe elementy = ['.kolorowe-div', '.długi tekst']


pierwiastki.dla każdego((elem, ind) => {
stały węzeł = dokument.querySelector (elem)
htmlDoObrazu.toPng(węzeł)
 .następnie(funkcjonować (dataURL) {
wynajmować obraz = Nowy Obraz();
 img.src = dataUrl;
dokument.ciało.dołączDziecko(obrazek);
 })
 .złapać(funkcjonować(błąd){
 konsola.błąd('Ups! Coś poszło nie tak!');
konsola.log (błąd)
 });
})

Ten kod robi kilka rzeczy:

  • Importuje bibliotekę html-to-image.
  • Tworzy tablicę złożoną z selektorów CSS skierowanych na te dwa elementy.
  • Tworzy obraz PNG w postaci adresu URL danych z każdego elementu tablicy.
  • Tworzy tag img i ustawia jego atrybut src na adres URL danych, tworząc kopie obrazów dwóch elementów.

Teraz użyj esbuild do wygenerowania spakowanego pliku (out.js), do którego odwołuje się index.html, uruchamiając w terminalu następujące polecenie:

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

W tym momencie tak powinien wyglądać index.html w Twojej przeglądarce:

Mimo że kopie wyglądają dokładnie tak samo jak oryginały, w rzeczywistości są elementami obrazu. Możesz to potwierdzić przez otwieranie narzędzi deweloperskich i sprawdzanie ich.

Ta biblioteka działa również z frameworkami JavaScript. The dokumentacja html-to-image zawiera instrukcje dotyczące generowania innych formatów obrazów. Zawiera również przykład pokazujący, jak korzystać z biblioteki z Reactem.

Robienie zrzutów ekranu za pomocą JavaScript jest łatwe

Nie ma natywnej metody JavaScript do tworzenia obrazów z elementów HTML lub robienia zrzutów ekranu DOM. Jednak z pomocą bibliotek i usług, takich jak html-to-image, staje się to łatwym zadaniem.

Istnieją inne sposoby uzyskania podobnych wyników, takie jak biblioteka wkhtmltoimage. Możesz użyć tego narzędzia o otwartym kodzie źródłowym do robienia zrzutów ekranu całej strony internetowej.