Tools om het web vast te leggen en te converteren

Hoe maak je een screenshot van de webpagina van je gebruiker in JavaScript

Heeft u ooit een screenshot willen maken van de webpagina van een gebruiker? Misschien om eenvoudiger bugfixing of gebruiker mogelijk te maken interface verbeteringen? Nou, dat kan met De JavaScript-API van GrabzIt.

Om een ​​gebruikerspagina vast te leggen, moet u de ConvertPage methode. Hierdoor wordt de inhoud van de gebruikerspagina naar ons verzonden om te worden geconverteerd intoa afbeelding, PDF, DOCX of iets anders dat we ondersteunen. Het is belangrijk om te onthouden dat bronnen zoals CSS of afbeeldingen alleen in de schermafbeelding kunnen worden geladen, tenzij ze openbaar beschikbaar zijn. Dit is echter meestal het geval.

Het eenvoudige voorbeeld hieronder laat zien hoe gemakkelijk het is om een ​​screenshot van een gebruikerswebpagina te maken met behulp van de bibliotheek van GrabzIt. Plaats gewoon de code onderaan de pagina die u wilt vastleggen.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.5.2/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertPage().Create();
</script>

Houd er rekening mee dat u er elke kunt passeren parameters staat door de JavaScript-API toe om de ConvertPage methode, om uw screenshot verder aan te passen. In het onderstaande voorbeeld maken we de schermafbeelding bijvoorbeeld even breed als de webpagina van de gebruiker, terwijl de volledige hoogte wordt vastgelegd.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.5.2/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertPage({
   "bwidth":document.documentElement.clientWidth,
   "bheight": -1, 
   "height": -1,
   "width": -1
}).Create();
</script>

De bovenstaande voorbeelden zijn echter beperkt omdat u het vastleggen van een webpagina moet activeren bij een of andere gebeurtenis, in plaats van de pagina alleen vast te leggen wanneer de webpagina is geladen. Twee mogelijke alternatieven zijn bijvoorbeeld om de webpagina vast te leggen met een klik op een knop of regelmatig intervals met een timer.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.5.2/grabzit.min.js"></script>
<script>
setTimeout(function(){
   GrabzIt("Sign in to view your Application Key").ConvertPage({
      "bwidth":document.documentElement.clientWidth,
      "bheight": -1, 
      "height": -1,
      "width": -1
   }).CreateInvisible();
}, 30000);
</script>

In het bovenstaande voorbeeld maken we elke 30 seconden automatisch een screenshot van de webpagina van de gebruiker. Maar in plaats van de schermafbeelding toe te voegen aan de webpagina van de gebruiker of deze te downloaden, zoals de Create De methode die in de voorgaande voorbeelden werd gebruikt, zou volstaan, afhankelijk van het formaat. De CreateInvisible Er wordt een methode gebruikt, die geen resultaat naar de gebruiker retourneert.

U kunt dan save de JavaScript-screenshot met behulp van een van de volgende methoden. De exportparameter om het resultaat te exporteren naar Amazon, Dropbox, FTP of meer. Of u kunt de finishgebeurtenis gebruiken om een ​​webservice aan te roepen save het resultaat, of de DataURI methode om het resultaat naar een webservice te posten.

Het spreekt voor zich dat u uw gebruikers waarschijnlijk moet informeren dat u dit doet.

U kunt gratis beginnen met het maken van screenshots van de huidige webpagina door Een account aanmaken en kopieer de bovenstaande code inteen webpagina die u wilt vastleggen. Houd er rekening mee dat u dit moet doen om ervoor te zorgen dat andere mensen uw account niet gebruiken autoriseer uw domein voordat het op uw website werkt.