JavaScript를 사용한 스타일 스크린 샷

GrabzIt의 JavaScript API를 사용하면 생성 된 모든 HTML 요소를 CSS로 스타일링 할 수 있습니다.

스타일 이미지

이미지 스크린 샷은 displayid 와 displayclass 매개 변수. 이 매개 변수는 id 또는 class 속성 respectivley를 이미지 오브젝트에 동적으로 추가합니다. 아래 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>

물론 이것이 오류 이벤트가 발생하면 오류 메시지를 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>