Outils pour capturer et convertir le Web

Style Captures d'écran avec JavaScript

API JavaScript

L'API JavaScript de GrabzIt permet de styler tous les éléments HTML générés avec CSS.

Images de style

Les captures d’image peuvent être stylées à l’aide du displayid et displayclass paramètres. Ces paramètres ajoutent dynamiquement, respectivement, l'identifiant ou l'attribut de classe, à l'objet image. Ci-dessous un CSS La classe est assignée à la capture d'écran.

<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", 
    {"displayclass": "MyClass"}).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>",
    {"displayclass": "MyClass"}).Create();
</script>

CSS peut ensuite être spécifié pour styler l'image, comme indiqué ci-dessous.

<style>
.MyClass
{
    border:1px solid red;
}
</style>

Un avantage supplémentaire de l'utilisation de ces options vous permet également d'utiliser JavaScript pour manipuler l'image de la capture d'écran. Ci-dessous, l'id spécifié est attribué à la capture d'écran de l'image générée, puis le finir La fonction est appelée une fois la capture d’écran chargée. Cette fonction utilise ensuite l'id spécifié pour obtenir l'image de la capture d'écran et affiche sa hauteur.

<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", 
    {"displayid": "myScreenshot", "onfinish": function (id){
        var div = document.getElementById('myScreenshot');
        alert(div.height);
    }}).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>",
    {"displayid": "myScreenshot", "onfinish": function (id){
        var div = document.getElementById('myScreenshot');
        alert(div.height);
    }}).Create();
</script>

Messages d'erreur de style

Les messages d'erreur peuvent être stylés à l'aide du errorid et errorclass paramètres. Ces paramètres ajoutent dynamiquement l’attribut id ou class au message d’erreur. <span> élément, tout en supprimant en outre le style d'erreur par défaut.

<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", 
    {"errorclass": "MyErrorClass"}).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>",
    {"errorclass": "MyErrorClass"}).Create();
</script>

Le message d'erreur peut ensuite être stylé, comme indiqué ci-dessous.

<style>
.MyErrorClass
{
    font-weight:bold;
}
</style>

Bien sûr, si cela est utilisé en combinaison avec le onerror événement, le message d'erreur peut également être manipulé avec JavaScript. Ci-dessous un errorid est spécifié pour que la durée du message d'erreur puisse être référencée dans le onerror une fonction. Cette fonction modifie ensuite le message d'erreur si un certain code d'erreur est renvoyé.

<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", 
    {"errorid": "myErrorMessage", "onerror": function (message, code){
        if (code == 500)
        {
            var span = document.getElementById('myErrorMessage');        
            if (span != null)
            {
                span.innerHTML = "Oops! We will get this sorted!";
            }
        }
    }}).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>",
    {"errorid": "myErrorMessage", "onerror": function (message, code){
        if (code == 500)
        {
            var span = document.getElementById('myErrorMessage');        
            if (span != null)
            {
                span.innerHTML = "Oops! We will get this sorted!";
            }
        }
    }}).Create();
</script>