जावास्क्रिप्ट के साथ स्टाइल स्क्रीनशॉट

GrabzIt की जावास्क्रिप्ट एपीआई सभी उत्पन्न HTML तत्वों को CSS के साथ स्टाइल करने की अनुमति देता है।

शैली के चित्र

छवि स्क्रीनशॉट का उपयोग करके स्टाइल किया जा सकता है displayid तथा displayclass मापदंडों। ये पैरामीटर गतिशील रूप से छवि ऑब्जेक्ट में आईडी या वर्ग विशेषता respivley जोड़ते हैं। नीचे एक सीएसएस कक्षा को स्क्रीनशॉट छवि को सौंपा गया है।

छवि के लिए URL
HTML से Image

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.7/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.7/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>

फिर सीएसएस को छवि को निर्दिष्ट करने के लिए निर्दिष्ट किया जा सकता है, जैसा कि नीचे दिखाया गया है।

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

इन विकल्पों का उपयोग करने का एक अतिरिक्त लाभ आपको स्क्रीनशॉट छवि में हेरफेर करने के लिए जावास्क्रिप्ट का उपयोग करने की भी अनुमति देता है। निर्दिष्ट आईडी के नीचे उत्पन्न छवि स्क्रीनशॉट को सौंपा गया है और फिर निर्दिष्ट किया गया है onfinish स्क्रीनशॉट लोड होने के बाद फ़ंक्शन को कहा जाता है। यह फ़ंक्शन स्क्रीनशॉट छवि प्राप्त करने के लिए निर्दिष्ट आईडी का उपयोग करता है और इसकी ऊंचाई प्रदर्शित करता है।

छवि के लिए URL
HTML से Image

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.7/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.7/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 मापदंडों। ये पैरामीटर त्रुटि संदेश में क्रमशः आईडी या वर्ग विशेषता जोड़ते हैं <span> तत्व, जबकि अतिरिक्त रूप से डिफ़ॉल्ट त्रुटि शैली को हटा रहा है।

छवि के लिए URL
HTML से Image

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.7/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.7/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 घटना तब त्रुटि संदेश जावास्क्रिप्ट के साथ भी हेरफेर किया जा सकता है। नीचे एक errorid निर्दिष्ट किया जाता है ताकि त्रुटि संदेश अवधि को संदर्भित किया जा सके onerror समारोह। यह फ़ंक्शन तब त्रुटि संदेश बदलता है यदि एक निश्चित त्रुटि कोड वापस आ जाता है।

छवि के लिए URL
HTML से Image

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.7/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.7/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>