વેબને કેપ્ચર અને કન્વર્ટ કરવા માટેનાં સાધનો

જાવાસ્ક્રિપ્ટ સાથે પ્રકાર સ્ક્રિનશોટ

જાવાસ્ક્રિપ્ટ એપીઆઇ

GrabzIt ની જાવાસ્ક્રિપ્ટ API બધા પેદા HTML તત્વોને CSS સાથે રીતની કરવાની મંજૂરી આપે છે.

શૈલી છબીઓ

ઇમેજ સ્ક્રીનશોટ ની મદદથી સ્ટાઇલ કરી શકાય છે displayid અને displayclass પરિમાણો. આ પરિમાણો ગતિશીલ રૂપે ઇમેજ toબ્જેક્ટમાં 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", 
    {"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>

સીએસએસ પછી નીચે બતાવ્યા પ્રમાણે, છબીને સ્ટાઇલ કરવા માટે સ્પષ્ટ કરી શકાય છે.

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

આ વિકલ્પોનો ઉપયોગ કરવાનો એક વધારાનો ફાયદો તમને સ્ક્રીનશોટ ઇમેજની ચાલાકી માટે જાવાસ્ક્રિપ્ટનો ઉપયોગ કરવાની પણ મંજૂરી આપે છે. નિર્દિષ્ટ ID ની નીચે જનરેટ કરેલા ઇમેજ સ્ક્રીનશshotટને સોંપેલ છે અને પછી ઉલ્લેખિત onfinish એકવાર સ્ક્રીનશોટ લોડ થયા પછી ફંક્શન કહેવામાં આવે છે. આ ફંક્શન પછી સ્ક્રીનશોટ ઇમેજ મેળવવા માટે ઉલ્લેખિત આઈડીનો ઉપયોગ કરે છે અને તેની heightંચાઈ દર્શાવે છે.

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

પ્રકાર ભૂલ સંદેશા

ભૂલ સંદેશાઓનો ઉપયોગ કરીને સ્ટાઇલ કરી શકાય છે errorid અને errorclass પરિમાણો. આ પરિમાણો ગતિશીલ રીતે ભૂલ સંદેશામાં અનુક્રમે ID અથવા વર્ગ લક્ષણ ઉમેરશે <span> તત્વ, જ્યારે ડિફ defaultલ્ટ ભૂલ શૈલીને દૂર કરતી વખતે.

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

અલબત્ત જો આ સાથે સંયોજનમાં વપરાય છે ઓનરરર ઇવેન્ટ પછી એરર મેસેજ જાવાસ્ક્રિપ્ટ દ્વારા પણ ચાલાકીથી ભરી શકાય છે. નીચે એ 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>