Инструменты для захвата и конвертирования Интернета

Стиль Скриншоты с JavaScriptJavaScript API

JavaScript API GrabzIt позволяет стилизовать все сгенерированные элементы HTML с помощью CSS.

Стиль изображения

Скриншоты изображений можно стилизовать с помощью displayid и displayclass параметры. Эти параметры динамически добавляют атрибут id или class respectivley, к объекту изображения. Ниже CSS класс присваивается скриншоту изображения.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/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@3.3.7/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 для стилизации изображения, как показано ниже.

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

Дополнительное преимущество использования этих параметров также позволяет использовать JavaScript для управления изображением скриншота. Ниже указанного идентификатора присваивается сгенерированный снимок экрана, а затем указанный onfinish Функция вызывается после загрузки скриншота. Затем эта функция использует указанный идентификатор для получения снимка экрана и отображает его высоту.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/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@3.3.7/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>

Сообщения об ошибках стиля

Сообщения об ошибках можно стилизовать с помощью errorid и errorclass параметры. Эти параметры динамически добавляют атрибут id или class соответственно к сообщению об ошибке <span> элемент, дополнительно удаляя стиль ошибки по умолчанию.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/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@3.3.7/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>

Сообщение об ошибке затем можно оформить, как показано ниже.

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

Конечно, если это используется в сочетании с OnError событие, то сообщение об ошибке также можно манипулировать с помощью JavaScript. Ниже errorid указывается для того, чтобы на область сообщения об ошибке можно было ссылаться в onerror функция. Затем эта функция изменяет сообщение об ошибке, если возвращается определенный код ошибки.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/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@3.3.7/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>