Web Yakalama ve Dönüştürme Araçları

JavaScript ile Stil Ekran Görüntüleri

JavaScript API'sı

GrabzIt'ın JavaScript API'si, oluşturulan tüm HTML öğelerinin CSS ile stillendirilmesine izin verir.

Tarz Görüntüler

Görüntü ekran görüntüleri displayid ve displayclass parametreleri. Bu parametreler dinamik olarak, image nesnesine id veya class niteliğini respectivley ekleyin. Altında CSS Ekran görüntüsü görüntüsüne sınıf atanır.

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

CSS daha sonra aşağıda gösterildiği gibi görüntüye stil vermek için belirtilebilir.

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

Bu seçenekleri kullanmanın bir başka avantajı da ekran görüntüsünü değiştirmek için JavaScript kullanmanıza izin verir. Belirtilen kimliğin altında oluşturulan görüntü ekran görüntüsüne atanır ve ardından belirtilen onfinish Ekran görüntüsü yüklendiğinde işlev çağrılır. Bu işlev daha sonra ekran görüntüsünü almak için belirtilen kimliği kullanır ve yüksekliğini gösterir.

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

Stil Hata Mesajları

Hata mesajları kullanılarak errorid ve errorclass parametreleri. Bu parametreler, sırasıyla id veya class niteliğini hata iletisine dinamik olarak ekler <span> ek olarak, varsayılan hata stilini de silerken.

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

Hata mesajı aşağıda gösterildiği gibi şekillendirilebilir.

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

Elbette bu, onerror olay sonra hata mesajı da JavaScript ile manipüle edilebilir. Altında errorid hata mesajı yayılımına başvuruda bulunabilmesi için onerror işlevi. Bu işlev daha sonra belirli bir hata kodu döndürüldüğünde hata mesajını değiştirir.

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