JavaScriptを使用したスクリーンショットのスタイル設定

GrabzItのJavaScript APIを使用すると、生成されたすべてのHTML要素をCSSでスタイル設定できます。

スタイル画像

画像のスクリーンショットは、 displayid と displayclass パラメーター。これらのパラメーターは、idまたはclass属性を動的に画像オブジェクトに追加します。以下 CSS クラスはスクリーンショット画像に割り当てられます。

画像へのURL
HTMLから画像

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

次に、以下に示すように、CSSを指定して画像のスタイルを設定できます。

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

これらのオプションを使用することの追加の利点として、JavaScriptを使用してスクリーンショット画像を操作することもできます。指定されたIDの下に、生成された画像のスクリーンショットが割り当てられ、指定された仕上がりスクリーンショットがロードされると、関数が呼び出されます。この関数は、指定されたIDを使用してスクリーンショット画像を取得し、その高さを表示します。

画像へのURL
HTMLから画像

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

スタイルエラーメッセージ

エラーメッセージは、 errorid と errorclass パラメーター。これらのパラメーターは、idまたはclass属性をエラーメッセージにそれぞれ動的に追加します <span> 要素、さらにデフォルトのエラースタイルを削除します。

画像へのURL
HTMLから画像

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

以下に示すように、エラーメッセージのスタイルを設定できます。

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

もちろん、これと組み合わせて使用する場合 onerror イベントを使用すると、JavaScriptを使用してエラーメッセージを操作することもできます。以下 errorid エラーメッセージスパンを参照できるように指定されています onerror 関数。この関数は、特定のエラーコードが返された場合、エラーメッセージを変更します。

画像へのURL
HTMLから画像

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