Webをキャプチャして変換するツール

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

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

スタイル画像

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

<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を使用してスクリーンショット画像を取得し、その高さを表示します。

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

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

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

<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 関数。 この関数は、特定のエラーコードが返された場合、エラーメッセージを変更します。

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