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

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

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

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