Narzędzia do przechwytywania i konwertowania Internetu

Stylowe zrzuty ekranu z JavaScript

JavaScript API

JavaScript API GrabzIt pozwala stylizować wszystkie wygenerowane elementy HTML za pomocą CSS.

Obrazy w stylu

Zrzuty ekranów obrazów można projektować za pomocą displayid i displayclass parametry Te parametry dynamicznie dodają odpowiednio atrybut id lub class do obiektu obrazu. Poniżej CSS klasa jest przypisana do obrazu zrzutu ekranu.

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

Następnie można określić styl CSS, aby nadać styl obrazowi, jak pokazano poniżej.

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

Dodatkową zaletą korzystania z tych opcji jest także możliwość użycia JavaScript do manipulacji obrazem zrzutu ekranu. Poniżej określonego identyfikatora przypisany jest zrzut ekranu wygenerowanego obrazu, a następnie określony onfinish funkcja jest wywoływana po załadowaniu zrzutu ekranu. Ta funkcja używa określonego identyfikatora, aby uzyskać zrzut ekranu i wyświetla jego wysokość.

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

Komunikaty o błędach stylu

Komunikaty o błędach można nadawać styl za pomocą errorid i errorclass parametry Te parametry dynamicznie dodają odpowiednio atrybut id lub class do komunikatu o błędzie <span> element, jednocześnie usuwając domyślny styl błędu.

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

Komunikat o błędzie można następnie nadać styl, jak pokazano poniżej.

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

Oczywiście, jeśli jest to używane w połączeniu z onerror zdarzenie, wówczas komunikat o błędzie może być również zmieniany za pomocą JavaScript. Poniżej errorid jest określony, aby można było odwoływać się do zakresu komunikatów o błędach w pliku onerror funkcjonować. Ta funkcja następnie zmienia komunikat o błędzie, jeśli zostanie zwrócony określony kod błędu.

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