वेब कॅप्चर आणि रूपांतरित करण्यासाठी साधने

जावास्क्रिप्ट सह शैली स्क्रीनशॉटजावास्क्रिप्ट API

ग्रॅबझिटची जावास्क्रिप्ट एपीआय सर्व व्युत्पन्न एचटीएमएल घटकांना सीएसएससह स्टाईल करण्याची परवानगी देते.

शैली प्रतिमा

प्रतिमा स्क्रीनशॉट्स वापरुन स्टाईल केले जाऊ शकतात displayid आणि displayclass मापदंड. हे पॅरामीटर्स प्रतिमा ऑब्जेक्टमध्ये आयडी किंवा क्लास एट्रिब्यूट रेस्पेटीव्हली गतिकरित्या जोडतात. खाली ए 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>

सीएसएस नंतर खाली दर्शविल्यानुसार प्रतिमेच्या शैलीसाठी निर्दिष्ट केले जाऊ शकते.

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

या पर्यायांचा वापर करण्याचा अतिरिक्त फायदा आपल्याला स्क्रीनशॉट प्रतिमा हाताळण्यासाठी जावास्क्रिप्ट वापरण्याची परवानगी देखील देतो. निर्दिष्ट आयडीच्या खाली व्युत्पन्न प्रतिमा स्क्रीनशॉट आणि नंतर निर्दिष्ट निर्दिष्ट केली जाते onfinish एकदा स्क्रीनशॉट लोड झाल्यानंतर कार्य म्हणतात. हे फंक्शन नंतर स्क्रीनशॉट प्रतिमा मिळविण्यासाठी निर्दिष्ट आयडी वापरते आणि त्याची उंची प्रदर्शित करते.

<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 मापदंड. हे पॅरामीटर्स गतिकरित्या त्रुटी संदेशामध्ये अनुक्रमे आयडी किंवा वर्ग विशेषता जोडतात <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 इव्हेंट नंतर एरर मेसेज जावास्क्रिप्टद्वारे हाताळला जाऊ शकतो. खाली ए 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>