Tools om het web vast te leggen en te converteren

Neem Website Screenshots met JavaScriptJavaScript API

Het diagnostisch paneel kan u helpen bij het debuggen van uw code!

Het gebruik van de GrabzIt JavaScript API is de eenvoudigste manier om afbeeldingen, DOCX- of PDF-schermafbeeldingen te maken, evenals video naar geanimeerde GIF-conversies en meer into uw website. Vereist alleen de GrabzIt JavaScript-bibliotheek, een regel JavaScript-code en wat GrabzIt-magie!

Als een opname eenmaal is gemaakt, blijft deze standaard in de cache op onze servers voor de tijd die wordt bepaald door uw pakket. Als vervolgens een beroep wordt gedaan op de JavaScript-API van GrabzIt met dezelfde parameters als een eerder in het cachegeheugen opgeslagen screenshot die in plaats daarvan wordt geretourneerd, om onnodig gebruik van uw screenshottoelage te voorkomen. Dit gedrag kan worden uitgeschakeld met behulp van de cache parameter.

Ermee beginnen

Volg deze stappen om aan de slag te gaan met de JavaScript-API:

  1. Ontvang uw gratis applicatiesleutel.
  2. Download de gratis JavaScript-bibliotheek en probeer de demo-app.
  3. Ontdek de basisprincipes over hoe de JavaScript-API van GrabzIt werkt door het onderstaande overzicht te lezen.

Om te voorkomen dat anderen alleen uw JavaScript-code kopiëren en al uw GrabzIt-accountbronnen stelen, moet u dat doen autoriseren welke domeinen kan uw applicatiesleutel gebruiken.

Het eenvoudigste voorbeeld

Download om te beginnen de GrabzIt JavaScript-bibliotheek en omvatten de grabzit.min.js bibliotheek op de webpagina waarop u de opname wilt weergeven of een verwijzing naar de CDN-versie van de grabzit.min.js bibliotheek zoals hieronder getoond. Voeg vervolgens de onderstaande code toe om een ​​screenshot toe te voegen aan de body-tag van uw webpagina. U moet de APPLICATION KEY met uw Applicatiesleutel en vervang https://www.tesla.com met de website waarvan u een screenshot wilt maken.

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

Wacht vervolgens even en de afbeelding wordt automatisch boven aan de pagina weergegeven, zonder dat u de webpagina opnieuw hoeft te laden. Hoewel deze afbeelding wordt gegenereerd in de browser, kunt u deze nog steeds gebruiken deze technieken aan save vangt op uw eigen server als je dat wenst.

Als u GrabzIt wilt gebruiken als een ES6-module, kunt u dit gebruiken techniek, anders dan hoe GrabzIt is opgenomen in uw JavaScript, werkt het op precies dezelfde manier als hier wordt beschreven.

Uw schermafbeeldingen aanpassen

Hoewel de applicatiesleutel en de URL- of HTML-parameters vereist zijn, alle andere parameters zijn optioneel. Een parameter wordt toegevoegd door de parameter met de waarde ervan toe te voegen als een JSON-woordenboek in de volgende indeling voor elke optionele parameter die u nodig hebt.

Als u bijvoorbeeld een screenshot met een breedte van 400px en een hoogte van 400px wilde hebben, in een PNG-indeling en 10 seconden wilde wachten voordat de screenshot werd genomen, zou u het volgende doen.

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

Omdat de JavaScript API eenvoudig toegang heeft tot de HTML van een webpagina, is deze ook ideaal voor het vastleggen dynamische webpagina-inhoud of inhoud achter een login.

PDF's en meer maken

Om een ​​ander type opname te maken, zoals een PDF, DOCX, CSV, JSON of Excel-spreadsheet, geeft u gewoon het gewenste formaat op en het wordt automatisch gemaakt. In de onderstaande voorbeelden maken we bijvoorbeeld DOCX- en PDF-documenten van respectievelijk URL's en HTML, deze worden vervolgens automatisch gedownload naar de gebruikersbrowser.

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

Het is belangrijk om te onthouden dat dit download parameter kan worden gebruikt om automatisch elk type opname te downloaden, zoals een DOCX, PDF, PNG, JPG of CSV.

Schermafbeeldingen toevoegen aan elementen

Het AddTo onderstaande methode accepteert de id van een element of een DOM-element als de locatie in het HTML-document waaraan de afbeelding of PDF-opname moet worden toegevoegd. In het onderstaande voorbeeld wordt de screenshot toegevoegd aan de insertCode div.

Eindelijk slagen eventueel vereist parameters als een JSON-woordenboek voor de ConvertURL or ConvertHTML methoden. In het onderstaande voorbeeld is de vertraging ingesteld op 1000ms en het formaat op PNG. Als u echter geen andere aanvullende opties nodig heeft, hoeft u deze parameter helemaal niet op te geven.

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

Captures converteren naar een data-URI

Het DataURI onderstaande methode accepteert een callback-functie, deze functie krijgt dan de base64-gegevens-URI van de screenshot of opname doorgegeven zodra deze is weergegeven, zodat uw JavaScript-toepassing nog meer controle over de opname heeft.

<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

Om te beginnen moet u een van de volgende drie methoden kiezen om aan te geven wat u wilt converteren.

  • ConvertURL([url to capture], [options]) - converteert een URL, standaard een JPG-screenshot. Het JSON-woordenboek met de parameters is optioneel.
  • ConvertHTML([html to convert], [options]) - converteert HTML, standaard intoa JPG afbeelding. Het JSON-woordenboek met de parameters is optioneel.
  • ConvertPage([options]) - legt de huidige pagina van de gebruiker vast, standaard intoa JPG afbeelding. Het JSON-woordenboek met de parameters is optioneel.

Kies vervolgens een of meer van deze methoden om op te geven hoe u de opname wilt maken.

  • UseSSL() - met geweld maken aanvragen met SSL.
  • Encrypt() - codeer automatisch een opname met een cryptografisch beveiligde sleutel.
  • AddPostVariable(name, value) - definieert een HTTP Post-parameter en optioneel waarde, deze methode kan meerdere keren worden aangeroepen om meerdere parameters toe te voegen. Met deze methode wordt GrabzIt gedwongen voer een HTTP-bericht uit.
  • AddTemplateVariable(name, value) - definieert een aangepaste sjabloon parameter en waarde, deze methode kan meerdere keren worden aangeroepen om meerdere parameters toe te voegen.
  • AddTo([element | element id]) - voegt de opname in into het opgegeven element.
  • Create() - voegt de opname in into het begin van de body-tag, of als dat niet het root-knooppunt van het HTML-document is.
  • CreateInvisible() - de opname is gemaakt maar niet op de webpagina weergegeven.
  • DataURI([callback function], [decrypt]) - retourneert de base64 data URI van de opname in de enkele parameter van de callback-functie. Als de parameter decrypt waar is, worden gecodeerde vastleggingen automatisch gedecodeerd.

Deze JavaScript-codebibliotheek is volledig open source! Als u de broncode wilt bekijken of verbeteren, kunt u deze vinden op GitHub.