Tools zum Erfassen und Konvertieren des Webs

Machen Sie Website-Screenshots mit JavaScriptJavaScript-API

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

Mehr Informationen

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@3.4.7/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@3.4.7/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 m├Âchten und 10 Sekunden warten m├Âchten, bevor der Screenshot aufgenommen wird, gehen Sie wie folgt vor.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.7/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@3.4.7/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@3.4.7/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@3.4.7/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@3.4.7/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@3.4.7/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

Der 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@3.4.7/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@3.4.7/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

Der 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@3.4.7/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@3.4.7/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.

  • ConvertURL([url to capture], [options]) - Konvertiert eine URL, standardm├Ą├čig einen JPG-Screenshot. Das JSON-W├Ârterbuch mit dem Parameter es ist optional.
  • ConvertHTML([html to convert], [options]) - konvertiert HTML, standardm├Ą├čig into ein JPG-Bild. Das JSON-W├Ârterbuch mit dem Parameter es ist optional.
  • ConvertPage([options]) - erfasst die aktuelle Seite des Benutzers, standardm├Ą├čig into ein JPG-Bild. Das JSON-W├Ârterbuch mit dem Parameter es ist optional.

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

  • UseSSL() - Mit Gewalt machen Anfragen mit SSL.
  • Encrypt() - Verschl├╝sseln Sie ein Capture automatisch mit einem kryptografisch sicheren Schl├╝ssel.
  • AddPostVariable(name, value) - Definiert einen HTTP-Post-Parameter und optional einen Wert. Diese Methode kann mehrmals aufgerufen werden, um mehrere Parameter hinzuzuf├╝gen. Mit dieser Methode wird GrabzIt auf erzwungen F├╝hren Sie einen HTTP-Post durch.
  • AddTemplateVariable(name, value) - definiert a benutzerdefinierte Vorlage Parameter und Wert, diese Methode kann mehrmals aufgerufen werden, um mehrere Parameter hinzuzuf├╝gen.
  • AddTo([element | element id]) - F├╝gt ein Capture ein into das angegebene Element.
  • Create() - f├╝gt das Capture ein into den Anfang des Body-Tags oder, falls dieser nicht vorhanden ist, den Wurzelknoten des HTML-Dokuments.
  • CreateInvisible() - Das Capture wird erstellt, aber nicht auf der Webseite angezeigt.
  • DataURI([callback function], [decrypt]) - gibt den base64-Daten-URI des Captures im Einzelparameter der Callback-Funktion zur├╝ck. Wenn der Parameter decrypt true ist, werden alle verschl├╝sselten Captures automatisch entschl├╝sselt.

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