使用JavaScript樣式截圖

GrabzIt的JavaScript API允許使用CSS對所有生成的HTML元素進行樣式設置。

樣式圖片

可以使用 displayid 及 displayclass 參數。這些參數將id或class屬性分別添加到圖像對象。下一個的CSS 類分配給屏幕截圖圖像。

圖片網址
HTML到圖像

<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為圖像設置樣式，如下所示。

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

使用這些選項的另一個好處是，您還可以使用JavaScript來操作屏幕截圖圖像。在指定的ID下，將指定的ID分配給生成的圖像屏幕截圖，然後將指定的ID 完成螢幕擷取畫面載入後即會呼叫函式。然後，此函數使用指定的ID獲取屏幕快照圖像並顯示其高度。

圖片網址
HTML到圖像

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

樣式錯誤信息

可以使用 errorid 及 errorclass 參數。這些參數分別將id或class屬性動態添加到錯誤消息中 <span> 元素，同時刪除默認錯誤樣式。

圖片網址
HTML到圖像

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

然後可以設置錯誤消息的樣式，如下所示。

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

當然，如果與錯誤事件，則錯誤消息也可以使用JavaScript處理。下一個 errorid 已指定，以便可以在 onerror 功能。如果返回了特定的錯誤代碼，則此函數將更改錯誤消息。

圖片網址
HTML到圖像

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