Wykonuj zrzuty ekranu z JavaScript

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:

Pobierz za darmo klucz aplikacji.
Pobierz za darmo Biblioteka JavaScript i wypróbuj aplikacja demo.
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.

URL do obrazu
HTML do obrazu

<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.

URL do obrazu
HTML do obrazu

<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.

URL do pliku PDF
HTML do PDF
URL do DOCX
HTML do DOCX

<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.

URL do obrazu
HTML do obrazu

<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.

URL do obrazu
HTML do obrazu

<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ć.

ConvertURL([url to capture], [options]) - konwertuje adres URL, domyślnie zrzut ekranu JPG. Słownik JSON zawierający parametry jest opcjonalne.
ConvertHTML([html to convert], [options]) - konwertuje HTML, domyślnie into obraz JPG. Słownik JSON zawierający parametry jest opcjonalne.
ConvertPage([options]) - przechwytuje bieżącą stronę użytkownika, domyślnie into obraz JPG. Słownik JSON zawierający parametry jest opcjonalne.

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

UseSSL() - siłą zrobić żądania za pomocą SSL.
Encrypt() - automatycznie szyfruje przechwycenie kluczem bezpiecznym kryptograficznie.
AddPostVariable(name, value) - określa parametr HTTP Post i opcjonalnie wartość, tę metodę można wywołać wiele razy, aby dodać wiele parametrów. Użycie tej metody zmusi GrabzIt do wykonać post HTTP.
AddTemplateVariable(name, value) - definiuje a szablon niestandardowy parametr i wartość, tę metodę można wywołać wiele razy, aby dodać wiele parametrów.
AddTo([element | element id]) - wstawia zdjęcie into określony element.
Create() - wstawia zrzut into początek znacznika body lub jeśli nie jest obecny węzeł główny dokumentu HTML.
CreateInvisible() - przechwytywanie zostało utworzone, ale nie jest wyświetlane na stronie internetowej.
DataURI([callback function], [decrypt]) - zwraca identyfikator URI base64 przechwytywania w jednym parametrze funkcji wywołania zwrotnego. Jeśli parametr deszyfrowania jest prawdziwy, automatycznie odszyfruje wszelkie zaszyfrowane 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.