Narzędzia do przechwytywania i konwertowania Internetu

Wykonuj zrzuty ekranu z JavaScript

JavaScript API
Połączenia panel diagnostyczny może pomóc w debugowaniu kodu!

Korzystanie z GrabzIt JavaScript API jest najprostszym sposobem umieszczania zrzutów ekranu, obrazów DOCX lub PDF, a także konwersje wideo do animowanych GIF-ów i więcej into twoja strona internetowa. Wymagający tylko Biblioteka JavaScript GrabzIt, wiersz kodu JavaScript i trochę magii GrabzIt!

Domyślnie po utworzeniu przechwytywania pozostanie on w pamięci podręcznej na naszych serwerach przez czas określony przez twoją paczkę. Następnie, jeśli wywołanie JavaScript API GrabzIt zostanie wykonane przy użyciu tych samych parametrów, co poprzednio buforowany zrzut ekranu, który zostanie zwrócony, aby zapobiec niepotrzebnemu wykorzystaniu limitu zrzutu ekranu. To zachowanie można wyłączyć za pomocą parametr pamięci podręcznej.

Pierwsze kroki

Aby rozpocząć korzystanie z JavaScript API, wykonaj następujące kroki:

  1. Pobierz za darmo klucz aplikacji.
  2. Pobierz za darmo Biblioteka JavaScript i wypróbuj aplikacja demo.
  3. Dowiedz się, jak działa JavaScript API GrabzIt, czytając poniższe omówienie.

Aby uniemożliwić innym osobom kopiowanie kodu JavaScript i kradzież wszystkich zasobów konta GrabzIt, musisz autoryzować jakie domeny może użyć Twojego klucza aplikacji.

  • Ponieważ obecnie nie masz autoryzowanych domen, ten JavaScript API nie będzie dla Ciebie działał! Proszę dodaj swoją domenę!

Najprostszy przykład

Aby rozpocząć, pobierz Biblioteka JavaScript GrabzIt i uwzględnij grabzit.min.js biblioteki na stronie internetowej, w której ma się pojawiać przechwycenie lub zawierać odniesienie do wersji CDN pliku grabzit.min.js biblioteka, jak pokazano poniżej. Następnie dołącz poniższy kod, aby dodać zrzut ekranu do tagu body swojej strony internetowej. Będziesz musiał wymienić APPLICATION KEY z Twoim Klucz aplikacji i zamień https://www.tesla.com z witryny, z której chcesz zrobić zrzut ekranu.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com").Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>").Create();
</script>

Następnie poczekaj chwilę, a obraz pojawi się automatycznie u góry strony, bez konieczności ponownego ładowania strony. Mimo że ten obraz jest generowany w przeglądarce, nadal możesz z niego korzystać te techniki do save przechwytuje na własnym serwerze Jeśli chcesz.

Jeśli chcesz użyć GrabzIt jako modułu ES6, możesz użyć tego technika, oprócz tego, w jaki sposób GrabzIt jest zawarty w twoim JavaScript, będzie działał dokładnie tak samo, jak opisano tutaj.

Dostosowywanie zrzutów ekranu

Chociaż klucz aplikacji i parametry adresu URL lub HTML są wymagane, wszystkie pozostałe parametry są opcjonalne. Parametr jest dodawany przez dodanie parametru z jego wartością jako słownik JSON w następującym formacie dla każdego wymaganego parametru opcjonalnego.

Na przykład, jeśli chcesz mieć zrzut ekranu o szerokości 400 pikseli i wysokości 400 pikseli, w formacie PNG i chcesz poczekać 10 sekund przed wykonaniem zrzutu ekranu, wykonaj następujące czynności.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"width": 400, "height": 400, "format": "png", "delay": 10000}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"width": 400, "height": 400, "format": "png", "delay": 10000}).Create();
</script>

Ponieważ JavaScript API ma łatwy dostęp do HTML strony internetowej, jest również idealny do przechwytywania dynamiczna treść strony lub treść za loginem.

Tworzenie plików PDF i nie tylko

Aby utworzyć inny typ przechwytywania, taki jak PDF, DOCX, CSV, JSON lub arkusz kalkulacyjny Excel, po prostu określ żądany format, a zostanie on automatycznie utworzony. Na przykład w poniższych przykładach tworzymy dokumenty DOCX i PDF odpowiednio z adresów URL i HTML, które następnie są automatycznie pobierane do przeglądarki użytkownika.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"format": "pdf", "download": 1}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"format": "pdf", "download": 1}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"format": "docx", "download": 1}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"format": "docx", "download": 1}).Create();
</script>

Ważne jest, aby o tym pamiętać pobierz parametr może być używany do automatycznego pobierania dowolnego rodzaju przechwytywania, takiego jak DOCX, PDF, PNG, JPG lub CSV.

Dodawanie zrzutów ekranu do elementów

Połączenia AddTo Poniższa metoda akceptuje identyfikator elementu lub elementu DOM jako lokalizację w dokumencie HTML, do którego ma zostać dodany obraz lub plik PDF. W poniższym przykładzie zrzut ekranu zostanie dodany do insertCode div.

Na koniec przekaż wszystkie wymagane parametry jako słownik JSON do ConvertURL or ConvertHTML metody W poniższym przykładzie opóźnienie zostało ustawione na 1000ms, a format na PNG. Jeśli jednak nie potrzebujesz żadnych dodatkowych opcji, nie musisz wcale określać tego parametru.

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
</head>
<body>
<div id="insertCode"></div>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.yahoo.com", {"delay": 1000, "format": "png"}).AddTo("insertCode");
</script>
</body>
</html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
</head>
<body>
<div id="insertCode"></div>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>", 
{"delay": 1000, "format": "png"}).AddTo("insertCode");
</script>
</body>
</html>

Konwertowanie przechwyceń na identyfikator URI danych

Połączenia DataURI metoda poniżej akceptuje funkcję wywołania zwrotnego, funkcja ta zostanie następnie przekazana do identyfikatora URI base64 zrzutu ekranu lub przechwytywania po jego renderowaniu, umożliwiając Twojej aplikacji JavaScript jeszcze większą kontrolę nad przechwytywaniem.

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
</head>
<body>
<div id="datauri" style="width:100%;word-break:break-all"></div>
<script type="text/javascript">
function callback(dataUri)
{
    document.getElementById('datauri').innerHTML = dataUri;
}
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.yahoo.com").DataURI(callback);
</script>
</body>
</html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
</head>
<body>
<div id="datauri" style="width:100%;word-break:break-all"></div>
<script type="text/javascript">
function callback(dataUri)
{
    document.getElementById('datauri').innerHTML = dataUri;
}
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>").DataURI(callback);
</script>
</body>
</html>

Metody GrabzIt

Aby rozpocząć, musisz wybrać jedną z następujących trzech metod, aby wskazać, co chcesz przekonwertować.

Następnie wybierz jedną lub więcej z tych metod, aby określić sposób utworzenia przechwytywania.

Ta biblioteka kodów JavaScript jest całkowicie open source! Jeśli chcesz wyświetlić lub poprawić kod źródłowy, możesz go znaleźć GitHub.