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

जावास्क्रिप्टसह वेबसाइट स्क्रीनशॉट घ्याजावास्क्रिप्ट API

अगोदर निर्देश केलेल्या बाबीसंबंधी बोलताना निदान पॅनेल आपला कोड डीबग करण्यात मदत करू शकेल!

GrabzIt जावास्क्रिप्ट एपीआय वापरणे प्रतिमा, डीओसीएक्स किंवा पीडीएफ स्क्रीनशॉट्स ठेवण्याचा सोपा मार्ग आहे, तसेच अ‍ॅनिमेटेड GIF रूपांतरांवर व्हिडिओ आणि अधिक intओ आपली वेबसाइट फक्त आवश्यक GrabzIt जावास्क्रिप्ट लायब्ररी, जावास्क्रिप्ट कोडची ओळ आणि काही GrabzIt जादू!

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

प्रारंभ करणे

जावास्क्रिप्ट एपीआय सह प्रारंभ करण्यासाठी या चरणांचे अनुसरण करा:

  1. आपले विनामूल्य मिळवा अनुप्रयोग की.
  2. विनामूल्य डाउनलोड करा जावास्क्रिप्ट लायब्ररी आणि वापरून पहा डेमो अ‍ॅप.
  3. खाली विहंगावलोकन वाचून ग्रॅबझिटची जावास्क्रिप्ट एपीआय कार्य कसे करते याबद्दल मूलभूत माहिती मिळवा.

इतर लोकांना फक्त आपला जावास्क्रिप्ट कोड कॉपी करणे आणि आपले सर्व GrabzIt खाते संसाधने चोरण्यासाठी प्रतिबंधित करण्यासाठी आपण आवश्यक कोणती डोमेन प्राधिकृत करा आपल्या अनुप्रयोग की वापरू शकता.

सर्वात सोपा उदाहरण

प्रारंभ करण्यासाठी डाउनलोड करा GrabzIt जावास्क्रिप्ट लायब्ररी आणि समाविष्ट grabzit.min.js वेबपृष्ठावरील लायब्ररी आपल्याला कॅप्चर दिसावी किंवा च्या सीडीएन आवृत्तीचा संदर्भ समाविष्ट करायचा आहे grabzit.min.js खाली दर्शविल्याप्रमाणे लायब्ररी. नंतर आपल्या वेब पृष्ठाच्या मुख्य टॅगमध्ये स्क्रीनशॉट जोडण्यासाठी खालील कोड समाविष्ट करा. आपल्याला त्यास पुनर्स्थित करणे आवश्यक आहे APPLICATION KEY आपल्यासह अनुप्रयोग की आणि पुनर्स्थित करा https://www.tesla.com वेबसाइटसह आपण त्याचा स्क्रीनशॉट घेऊ इच्छित आहात.

<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").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>").Create();
</script>

मग थोड्या वेळासाठी थांबा आणि वेबपृष्ठ रीलोड न करता प्रतिमा पृष्ठाच्या शीर्षस्थानी स्वयंचलितपणे दिसून येईल. जरी ही प्रतिमा ब्राउझरमध्ये व्युत्पन्न झाली तरीही आपण वापरू शकता हे तंत्र save आपल्या स्वत: च्या सर्व्हरवर कॅप्चर करते तुमची इच्छा असल्यास.

आपण त्याऐवजी ES6 मॉड्यूल म्हणून ग्रॅबझीट वापरू इच्छित असल्यास आपण हे वापरू शकता तंत्र, आपल्या जावास्क्रिप्टमध्ये ग्रॅबझीटचा समावेश कसा आहे याव्यतिरिक्त ते येथे तपशीलवार ज्या पद्धतीने कार्य करेल.

आपले स्क्रीनशॉट सानुकूलित करीत आहे

अ‍ॅप्लिकेशन की आणि URL किंवा HTML पॅरामीटर्स आवश्यक असताना, इतर सर्व पॅरामिटर्स पर्यायी आहेत. आपल्यास आवश्यक असलेल्या प्रत्येक पर्यायी पॅरामीटरसाठी खालील स्वरूपात एक JSON शब्दकोष म्हणून त्याचे मूल्य असलेले पॅरामीटर जोडून पॅरामीटर जोडला जातो.

उदाहरणार्थ जर आपल्याला पीएनजी स्वरूपात 400px रुंदी आणि 400px उंचीसह स्क्रीनशॉट घ्यायचा असेल आणि स्क्रीनशॉट घेण्यापूर्वी 10 सेकंद प्रतीक्षा करायची असेल तर आपण पुढील गोष्टी कराल.

<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", 
{"width": 400, "height": 400, "format": "png", "delay", 10000}).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>",
{"width": 400, "height": 400, "format": "png", "delay", 10000}).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").ConvertURL("https://www.tesla.com", 
{"format": "pdf", "download": 1}).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>",
{"format": "pdf", "download": 1}).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").ConvertURL("https://www.tesla.com", 
{"format": "docx", "download": 1}).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>",
{"format": "docx", "download": 1}).Create();
</script>

हे लक्षात ठेवणे आवश्यक आहे पॅरामीटर डाउनलोड करा डीओसीएक्स, पीडीएफ, पीएनजी, जेपीजी किंवा सीएसव्ही सारख्या कोणत्याही प्रकारचे कॅप्चर स्वयंचलितपणे डाउनलोड करण्यासाठी वापरले जाऊ शकते.

घटकांमध्ये स्क्रीनशॉट जोडणे

अगोदर निर्देश केलेल्या बाबीसंबंधी बोलताना AddTo प्रतिमा किंवा पीडीएफ कॅप्चर जोडण्यासाठी खालील पद्धत एचडीएमएल दस्तऐवजामधील एक घटक किंवा डीओएम घटकाची आयडी स्वीकारते. खाली दिलेल्या उदाहरणात स्क्रीनशॉट ला जोडला जाईल insertCode Div

शेवटी कोणतीही आवश्यक पास करा पॅरामिटर्स एक JSON शब्दकोष म्हणून ConvertURL or ConvertHTML पद्धती. खाली दिलेल्या उदाहरणात विलंब 1000ms वर सेट केले गेले आहे आणि पीएनजीचे स्वरूप. तथापि आपल्याला इतर कोणत्याही अतिरिक्त पर्यायांची आवश्यकता नसल्यास आपल्याला हे पॅरामीटर निर्दिष्ट करण्याची आवश्यकता नाही.

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/grabzit.min.js"></script>
</head>
<body>
<div id="insertCode"></div>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.yahoo.com", {"delay": 1000, "format": "png"}).AddTo("insertCode");
</script>
</body>
</html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/grabzit.min.js"></script>
</head>
<body>
<div id="insertCode"></div>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>", 
{"delay": 1000, "format": "png"}).AddTo("insertCode");
</script>
</body>
</html>

कॅप्चरला यूआरआय डेटामध्ये रुपांतरित करीत आहे

अगोदर निर्देश केलेल्या बाबीसंबंधी बोलताना DataURI खाली दिलेली पद्धत कॉलबॅक फंक्शन स्वीकारते, नंतर आपल्या जावास्क्रिप्ट अनुप्रयोगास कॅप्चरवर अधिक नियंत्रण ठेवण्याची परवानगी दिली गेल्यावर हे फंक्शन नंतर स्क्रीनशॉटचा बेसएक्सएनयूएमएक्स डेटा यूआरआय पाठविला जाईल किंवा कॅप्चर करेल.

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/grabzit.min.js"></script>
</head>
<body>
<div id="datauri" style="width:100%;word-break:break-all"></div>
<script type="text/javascript">
function callback(dataUri)
{
    document.getElementById('datauri').innerHTML = dataUri;
}
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.yahoo.com").DataURI(callback);
</script>
</body>
</html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/grabzit.min.js"></script>
</head>
<body>
<div id="datauri" style="width:100%;word-break:break-all"></div>
<script type="text/javascript">
function callback(dataUri)
{
    document.getElementById('datauri').innerHTML = dataUri;
}
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>").DataURI(callback);
</script>
</body>
</html>

GrabzIt पद्धती

प्रारंभ करण्यासाठी आपण काय रूपांतरित करू इच्छिता हे दर्शविण्यासाठी आपण खालील तीन पद्धतींपैकी एक निवडणे आवश्यक आहे.

नंतर आपल्याला कॅप्चर कसे तयार करायचे आहे हे निर्दिष्ट करण्यासाठी यापैकी एक किंवा अधिक पद्धती निवडा.

  • UseSSL() - सक्तीने बनवा एसएसएल वापरून विनंत्या.
  • Encrypt() - क्रिप्टोग्राफिकरित्या सुरक्षित की सह कॅप्चर स्वयंचलितपणे कूटबद्ध करा.
  • AddPostVariable(name, value) - एचटीटीपी पोस्ट पॅरामीटर आणि वैकल्पिक मूल्य परिभाषित करते, एकाधिक पॅरामीटर्स जोडण्यासाठी या पद्धतीस एकाधिक वेळा म्हटले जाऊ शकते. ही पद्धत वापरल्याने ग्रॅबझिटला सक्ती होईल एक HTTP पोस्ट सुरू.
  • AddTemplateVariable(name, value) - व्याख्या सानुकूल टेम्पलेट मापदंड आणि मूल्य या पद्धतीस एकाधिक पॅरामीटर्स जोडण्यासाठी एकाधिक वेळा म्हटले जाऊ शकते.
  • AddTo([element | element id]) - एक कॅप्चर घाला into निर्दिष्ट घटक.
  • Create() - कॅप्चर घाला into बॉडी टॅगची सुरूवात किंवा ती एचटीएमएल दस्तऐवजाचे मूळ नोड नसल्यास.
  • CreateInvisible() - कॅप्चर तयार केले परंतु वेब पृष्ठावर दर्शविलेले नाही.
  • DataURI([callback function], [decrypt]) - कॉलबॅक फंक्शनच्या सिंगल पॅरामीटरमध्ये कॅप्चरचा बेसएक्सएनयूएमएक्स डेटा यूआरआय परत करतो. डिक्रिप्ट पॅरामीटर सत्य असल्यास ते कोणत्याही एनक्रिप्टेड कॅप्चरना स्वयंचलितपणे डिक्रिप्ट करेल.

ही जावास्क्रिप्ट कोड लायब्ररी पूर्णपणे मुक्त स्रोत आहे! आपण स्त्रोत कोड पाहू किंवा सुधारित करू इच्छित असल्यास आपण त्यावर शोधू शकता GitHub.