捕获和转换Web的工具

使用JavaScript样式截图

JavaScript API

GrabzIt的JavaScript API允许使用CSS对所有生成的HTML元素进行样式设置。

样式图片

可以使用 displayiddisplayclass 参数。 这些参数将id或class属性分别添加到图像对象。 下一个 的CSS 类分配给屏幕截图图像。

<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获取屏幕快照图像并显示其高度。

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

样式错误信息

可以使用 erroriderrorclass 参数。 这些参数分别将id或class属性动态添加到错误消息中 <span> 元素,同时删除默认错误样式。

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

当然,如果与 的onerror 事件,则错误消息也可以使用JavaScript处理。 下一个 errorid 已指定,以便可以在 onerror 功能。 如果返回了特定的错误代码,则此函数将更改错误消息。

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