Tools zum Erfassen und Konvertieren des Webs

Machen Sie Website-Screenshots mit JavaScript

JavaScript-API
Das Diagnosetafel kann Ihnen helfen, Ihren Code zu debuggen!

Die Verwendung der GrabzIt-JavaScript-API ist die einfachste Möglichkeit, Bild-, DOCX- oder PDF-Screenshots zu erstellen Video zu animierten GIF-Konvertierungen und vieles mehr into Ihre Website. Benötigen Sie nur die GrabzIt JavaScript Bibliothek, eine Zeile JavaScript-Code und etwas GrabzIt-Magie!

Sobald ein Capture erstellt wurde, wird es standardmäßig für die von Ihrem Paket festgelegte Zeit auf unseren Servern zwischengespeichert. Wenn Sie dann die JavaScript-API von GrabzIt mit denselben Parametern aufrufen wie bei einem zuvor zwischengespeicherten Screenshot, der stattdessen zurückgegeben wird, um zu vermeiden, dass Sie unnötigerweise die zulässige Anzahl an Screenshots verwenden. Dieses Verhalten kann mithilfe von deaktiviert werden Cache-Parameter.

Erste Schritte

Führen Sie die folgenden Schritte aus, um mit der Javascript-API zu beginnen:

  1. Holen Sie sich kostenlos Anwendungsschlüssel.
  2. Laden Sie die kostenlose JavaScript-Bibliothek und probier das aus Demo-App.
  3. In der folgenden Übersicht erfahren Sie, wie die JavaScript-API von GrabzIt funktioniert.

Um zu verhindern, dass andere Benutzer nur Ihren JavaScript-Code kopieren und alle Ressourcen Ihres GrabzIt-Kontos stehlen, müssen Sie dies tun autorisiere welche domains kann Ihren Anwendungsschlüssel verwenden.

Das einfachste Beispiel

Um loszulegen, laden Sie die GrabzIt JavaScript Bibliothek und umfassen die grabzit.min.js Bibliothek auf der Webseite, auf der das Capture angezeigt werden soll, oder mit einem Verweis auf die CDN-Version von grabzit.min.js Bibliothek wie unten gezeigt. Fügen Sie dann den folgenden Code hinzu, um einen Screenshot zum Body-Tag Ihrer Webseite hinzuzufügen. Sie müssen die ersetzen APPLICATION KEY mit Ihrem Anwendungsschlüssel und ersetzen https://www.tesla.com mit der Website, von der Sie einen Screenshot machen möchten.

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

Warten Sie dann einfach einen Moment und das Bild wird automatisch oben auf der Seite angezeigt, ohne dass die Webseite neu geladen werden muss. Auch wenn dieses Bild im Browser generiert wird, können Sie es dennoch verwenden diese Techniken zu save erfasst auf Ihrem eigenen Server wenn Sie wünschen.

Wenn Sie GrabzIt stattdessen als ES6-Modul verwenden möchten, können Sie dies verwenden Technik, abgesehen davon, wie GrabzIt in Ihrem JavaScript enthalten ist, funktioniert es genauso wie hier beschrieben.

Anpassen Ihrer Screenshots

Während der Anwendungsschlüssel und die URL- oder HTML-Parameter erforderlich sind, alle anderen Parameter sind optional. Ein Parameter wird hinzugefügt, indem der Parameter mit seinem Wert als JSON-Wörterbuch im folgenden Format für jeden optionalen Parameter angehängt wird, den Sie benötigen.

Wenn Sie beispielsweise einen Screenshot mit einer Breite von 400px und einer Höhe von 400px im PNG-Format haben und 10 Sekunden warten möchten, bevor der Screenshot aufgenommen wurde, würden Sie Folgendes tun.

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

Da die JavaScript-API einfachen Zugriff auf das HTML einer Webseite hat, eignet sie sich auch ideal zum Erfassen dynamischer Webseiteninhalt oder Inhalt hinter einem Login.

Erstellen von PDFs und mehr

Wenn Sie eine andere Art der Erfassung erstellen möchten, z. B. eine PDF-, DOCX-, CSV-, JSON- oder Excel-Tabelle, geben Sie einfach das gewünschte Format an. Es wird automatisch erstellt. In den folgenden Beispielen erstellen wir beispielsweise DOCX- und PDF-Dokumente aus URLs bzw. HTML-Dateien, die dann automatisch in den Browser des Benutzers heruntergeladen werden.

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

Es ist wichtig, sich daran zu erinnern Parameter herunterladen kann zum automatischen Herunterladen aller Arten von Captures verwendet werden, z. B. DOCX, PDF, PNG, JPG oder CSV.

Screenshots zu Elementen hinzufügen

Das AddTo Die folgende Methode akzeptiert die ID eines Elements oder eines DOM-Elements als Position im HTML-Dokument, zu der das Bild oder die PDF-Aufnahme hinzugefügt werden soll. Im folgenden Beispiel wird der Screenshot dem hinzugefügt insertCode Div.

Schließlich übergeben Sie alle erforderlichen Parameter als JSON-Wörterbuch zum ConvertURL or ConvertHTML Methoden. Im folgenden Beispiel wurde die Verzögerung auf 1000ms und das Format auf PNG eingestellt. Wenn Sie jedoch keine weiteren zusätzlichen Optionen benötigen, müssen Sie diesen Parameter überhaupt nicht angeben.

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

Konvertieren von Captures in einen Daten-URI

Das DataURI Die folgende Methode akzeptiert eine Rückruffunktion. Dieser Funktion wird dann der Base64-Daten-URI des Screenshots oder Captures übergeben, sobald dieses gerendert wurde, sodass Ihre JavaScript-Anwendung die Erfassung noch besser steuern kann.

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

GrabzIt-Methoden

Um zu beginnen, müssen Sie eine der folgenden drei Methoden auswählen, um anzugeben, was Sie konvertieren möchten.

Wählen Sie dann eine oder mehrere dieser Methoden aus, um anzugeben, wie das Capture erstellt werden soll.

Diese JavaScript-Codebibliothek ist vollständig Open Source! Wenn Sie den Quellcode anzeigen oder verbessern möchten, finden Sie ihn auf GitHub.