Estilo Screenshots com JavaScript

A API JavaScript do GrabzIt permite que todos os elementos HTML gerados sejam estilizados com CSS.

Imagens de estilo

As capturas de tela de imagem podem ser estilizadas usando o displayid e displayclass parâmetros. Esses parâmetros adicionam dinamicamente o atributo id ou class respectivley ao objeto de imagem. Abaixo de um CSS A classe é atribuída à imagem da captura de tela.

URL para imagem
HTML para imagem

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

O CSS pode ser especificado para estilizar a imagem, como mostrado abaixo.

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

Um benefício adicional do uso dessas opções também permite que você use JavaScript para manipular a imagem da captura de tela. Abaixo, o ID especificado é atribuído à captura de tela da imagem gerada e, em seguida, o terminar A função é chamada assim que a captura de tela é carregada. Essa função usa o ID especificado para obter a imagem da captura de tela e exibe sua altura.

URL para imagem
HTML para imagem

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

Mensagens de erro de estilo

As mensagens de erro podem ser estilizadas usando o errorid e errorclass parâmetros. Esses parâmetros adicionam dinamicamente o atributo id ou class respectivamente à mensagem de erro <span> , além de remover o estilo de erro padrão.

URL para imagem
HTML para imagem

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

A mensagem de erro pode ser estilizada, como mostrado abaixo.

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

Obviamente, se isso for usado em combinação com o onerror evento, a mensagem de erro também pode ser manipulada com JavaScript. Abaixo de um errorid é especificado para que a extensão da mensagem de erro possa ser referenciada no onerror função. Essa função altera a mensagem de erro se um determinado código de erro for retornado.

URL para imagem
HTML para imagem

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