Outils pour capturer et convertir le Web

Prendre des captures d'écran de sites Web avec JavaScript

JavaScript API
En XNUMX, le panneau de diagnostic peut vous aider à déboguer votre code!

L’utilisation de l’API JavaScript de GrabzIt est le moyen le plus simple de placer des captures d’écran au format DOCX ou PDF, ainsi Conversion de vidéos en GIF animés et plus encore into votre site web. Ne nécessitant que le Bibliothèque JavaScript GrabzIt, une ligne de code JavaScript et de la magie GrabzIt!

Par défaut, une fois la capture créée, elle restera mise en cache sur nos serveurs pendant la durée déterminée par votre paquet. Ensuite, si un appel à l'API JavaScript de GrabzIt est effectué à l'aide des mêmes paramètres qu'une capture d'écran précédemment mise en cache qui sera renvoyée à la place, afin d'éviter d'utiliser inutilement votre allocation de capture d'écran. Ce comportement peut être désactivé en utilisant le paramètre de cache.

Commencer

Pour commencer à utiliser l'API Javascript, procédez comme suit:

  1. Obtenez votre libre clé d'application.
  2. Téléchargez gratuitement Bibliothèque JavaScript et essayer le application de démonstration.
  3. Découvrez les bases du fonctionnement de l'API JavaScript de GrabzIt en lisant l'aperçu ci-dessous.

Pour empêcher les autres utilisateurs de simplement copier votre code JavaScript et de voler toutes les ressources de votre compte GrabzIt, vous devez autoriser quels domaines pouvez utiliser votre clé d'application.

  • Comme vous n'avez actuellement aucun domaine autorisé, cette API JavaScript ne fonctionnera pas pour vous! S'il vous plaît ajoutez votre domaine!

L'exemple le plus simple

Pour commencer, téléchargez le Bibliothèque JavaScript GrabzIt et inclure le grabzit.min.js dans la page Web où vous souhaitez que la capture apparaisse ou incluez une référence à la version CDN de la grabzit.min.js bibliothèque comme indiqué ci-dessous. Ensuite, incluez le code ci-dessous pour ajouter une capture d'écran à la balise body de votre page Web. Vous devrez remplacer le APPLICATION KEY avec votre Clé d'application et remplacer https://www.tesla.com avec le site Web que vous voulez prendre une capture d'écran de.

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

Ensuite, attendez simplement quelques instants et l’image apparaîtra automatiquement en haut de la page, sans avoir à recharger la page Web. Même si cette image est générée dans le navigateur, vous pouvez toujours utiliser ces techniques pour save capture sur votre propre serveur si vous le souhaitez.

Si vous souhaitez utiliser GrabzIt en tant que module ES6, vous pouvez utiliser cette technique, mis à part la manière dont Grabz est inclus dans votre code JavaScript, il fonctionnera exactement de la même manière que celle décrite ici.

Personnaliser vos captures d'écran

Bien que la clé d’application et les paramètres URL ou HTML soient requis, tous les autres paramètres sont facultatifs. Un paramètre est ajouté en ajoutant le paramètre avec sa valeur en tant que dictionnaire JSON au format suivant pour chaque paramètre facultatif requis.

Par exemple, si vous souhaitez avoir une capture d'écran d'une largeur de 400 pixels et d'une hauteur de 400 pixels, au format PNG et que vous souhaitez attendre 10 secondes avant que la capture d'écran ne soit prise, procédez comme suit.

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

Comme l’API JavaScript permet d’accéder facilement au code HTML d’une page Web, elle est également idéale pour la capture. contenu de page Web dynamique ou contenu derrière un login.

Création de PDF et plus

Pour créer un autre type de capture tel qu'un fichier PDF, DOCX, CSV, JSON ou une feuille de calcul Excel, spécifiez simplement le format souhaité et il sera automatiquement créé. Par exemple, dans les exemples ci-dessous, nous créons des documents DOCX et PDF à partir d'URL et de HTML, respectivement, ceux-ci sont automatiquement téléchargés dans le navigateur de l'utilisateur.

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

Il est important de se rappeler que cette paramètre de téléchargement peut être utilisé pour télécharger automatiquement tout type de capture, comme un fichier DOCX, PDF, PNG, JPG ou CSV.

Ajout de captures d'écran aux éléments

En XNUMX, le AddTo La méthode ci-dessous accepte l'id d'un élément ou d'un élément DOM en tant qu'emplacement dans le document HTML auquel ajouter l'image ou la capture PDF. Dans l'exemple ci-dessous, la capture d'écran sera ajoutée à la insertCode div.

Enfin passer tout requis paramètres comme un dictionnaire JSON à la ConvertURL or ConvertHTML méthodes. Dans l'exemple ci-dessous, le délai a été défini sur 1000ms et le format sur PNG. Toutefois, si vous n'avez pas besoin d'autres options supplémentaires, vous n'avez pas besoin de spécifier ce paramètre.

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

Conversion de captures en un URI de données

En XNUMX, le DataURI Si la méthode ci-dessous accepte une fonction de rappel, cette fonction recevra ensuite l’URI de données base64 de la capture ou de la capture une fois rendue, ce qui permettra à votre application JavaScript d’avoir encore plus de contrôle sur la capture.

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

Méthodes GrabzIt

Pour commencer, vous devez choisir l’une des trois méthodes suivantes pour indiquer ce que vous voulez convertir.

Choisissez ensuite une ou plusieurs de ces méthodes pour spécifier le mode de création de la capture.

Cette bibliothèque de code JavaScript est complètement open source! Si vous voulez voir ou améliorer le code source, vous pouvez le trouver sur GitHub.