Narzędzia do przechwytywania i konwertowania Internetu

Stylowe zrzuty ekranu z JavaScriptJavaScript 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 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@3.4.8/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.4.8/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@3.4.8/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.4.8/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 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@3.4.8/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.4.8/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@3.4.8/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.4.8/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>