Capturas de pantalla de estilo con JavaScript

La API JavaScript de GrabzIt permite diseñar todos los elementos HTML generados con CSS.

Imágenes de estilo

Las capturas de pantalla de imagen se pueden diseñar usando el displayid y displayclass parámetros Estos parámetros agregan dinámicamente el atributo id o class respectivley al objeto de imagen. Debajo de un CO La clase se asigna a la imagen de captura de pantalla.

URL a imagen
HTML a imagen

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

Luego se puede especificar CSS para dar estilo a la imagen, como se muestra a continuación.

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

Un beneficio adicional de usar estas opciones también le permite usar JavaScript para manipular la imagen de la captura de pantalla. Debajo de la identificación especificada se asigna a la captura de pantalla de imagen generada y luego la especificada acabado Se llama a la función una vez que se carga la captura de pantalla. Esta función luego usa la identificación especificada para obtener la imagen de la captura de pantalla y muestra su altura.

URL a imagen
HTML a imagen

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

Mensajes de error de estilo

Los mensajes de error se pueden diseñar usando el errorid y errorclass parámetros Estos parámetros agregan dinámicamente el atributo id o class respectivamente al mensaje de error <span> elemento, al tiempo que elimina el estilo de error predeterminado.

URL a imagen
HTML a imagen

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

El mensaje de error se puede diseñar, como se muestra a continuación.

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

Por supuesto, si esto se usa en combinación con el onerror evento, entonces el mensaje de error también se puede manipular con JavaScript. Debajo de un errorid se especifica para que se pueda hacer referencia al intervalo de mensaje de error en el onerror función. Esta función luego cambia el mensaje de error si se devuelve un cierto código de error.

URL a imagen
HTML a imagen

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