वेब पर कब्जा और परिवर्तित करने के लिए उपकरण

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

जावास्क्रिप्ट एपीआई
RSI डायग्नोस्टिक्स पैनल आपके कोड को डीबग करने में आपकी सहायता कर सकता है!

GrabzIt जावास्क्रिप्ट एपीआई का उपयोग छवि, DOCX या पीडीएफ स्क्रीनशॉट, साथ ही साथ डालने का सबसे सरल तरीका है जीआईएफ रूपांतरणों को एनिमेटेड करने के लिए वीडियो और अधिक intओ अपनी वेबसाइट बस जरूरत है GrabzIt जावास्क्रिप्ट पुस्तकालय, जावास्क्रिप्ट कोड और कुछ GrabzIt जादू की एक लाइन!

डिफ़ॉल्ट रूप से एक बार कैप्चर करने के बाद यह आपके सर्वर पर आपके पैकेज द्वारा निर्धारित समय के लिए कैश रहेगा। तब अगर GrabzIt के जावास्क्रिप्ट एपीआई के लिए एक कॉल पहले स्क्रीनशॉट के रूप में उसी पैरामीटर का उपयोग करके किया जाता है जो आपके स्क्रीनशॉट भत्ते का उपयोग करने से अनावश्यक रूप से रोकने के लिए, बदले में वापस आ जाएगा। इस व्यवहार का उपयोग करके अक्षम किया जा सकता है कैश पैरामीटर.

Getting Started

जावास्क्रिप्ट एपीआई के साथ आरंभ करने के लिए इन चरणों का पालन करें:

  1. अपने मुक्त हो जाओ आवेदन कुंजी.
  2. मुफ्त डाउनलोड करें जावास्क्रिप्ट लाइब्रेरी और बाहर की कोशिश करो डेमो ऐप.
  3. नीचे दिए गए अवलोकन को पढ़कर GrabzIt के जावास्क्रिप्ट एपीआई कैसे काम करता है, इसके बारे में मूल बातें जानें।

अन्य लोगों को रोकने के लिए बस आपके जावास्क्रिप्ट कोड की नकल करने और अपने सभी GrabzIt खाते के संसाधनों को चोरी करने के लिए, आपको चाहिए डोमेन को अधिकृत करें अपनी एप्लिकेशन कुंजी का उपयोग कर सकते हैं।

  • चूंकि आपके पास वर्तमान में कोई अधिकृत डोमेन नहीं है, इसलिए यह जावास्क्रिप्ट एपीआई आपके लिए काम नहीं करेगा! कृपया अपना डोमेन जोड़ें!

सबसे सरल उदाहरण

आरंभ करने के लिए डाउनलोड करें GrabzIt जावास्क्रिप्ट पुस्तकालय और शामिल हैं grabzit.min.js वेब पेज में लाइब्रेरी जिसे आप कैप्चर करना चाहते हैं या सीडीएन संस्करण के संदर्भ में शामिल करना चाहते हैं grabzit.min.js पुस्तकालय जैसा कि नीचे दिखाया गया है। फिर अपने वेब पेज के बॉडी टैग में स्क्रीनशॉट जोड़ने के लिए नीचे दिए गए कोड को शामिल करें। आपको प्रतिस्थापित करने की आवश्यकता होगी APPLICATION KEY आपके साथ आवेदन कुंजी और प्रतिस्थापित करें https://www.tesla.com उस वेबसाइट के साथ जिसका आप स्क्रीनशॉट लेना चाहते हैं।

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

फिर बस थोड़ी देर प्रतीक्षा करें और वेब पेज को पुनः लोड करने की आवश्यकता के बिना, छवि स्वचालित रूप से पृष्ठ के शीर्ष पर दिखाई देगी। हालांकि यह छवि ब्राउज़र में उत्पन्न होती है, फिर भी आप उपयोग कर सकते हैं इन तकनीकों के लिए save अपने सर्वर पर कब्जा कर लेता है यदि आप चाहते हैं।

यदि आप GrabzIt को ES6 मॉड्यूल के रूप में उपयोग करना चाहते हैं तो इसके बजाय आप इसका उपयोग कर सकते हैं तकनीक, के अलावा कैसे GrabzIt अपने जावास्क्रिप्ट में शामिल किया गया है यह ठीक उसी तरह से यहां विस्तृत रूप में काम करेगा।

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

जबकि एप्लिकेशन कुंजी और URL या HTML पैरामीटर की आवश्यकता होती है, अन्य सभी पैरामीटर वैकल्पिक हैं। एक पैरामीटर को इसके मूल्य के साथ पैरामीटर को जोड़कर जोड़ा जाता है जो आपको आवश्यक हर वैकल्पिक पैरामीटर के लिए निम्न प्रारूप में JSON शब्दकोश के रूप में होता है।

उदाहरण के लिए, यदि आप PNG प्रारूप में 400px की चौड़ाई और 400px की ऊँचाई वाला स्क्रीनशॉट लेना चाहते हैं और स्क्रीनशॉट लेने से पहले 10 सेकंड प्रतीक्षा करना चाहते हैं, तो आप निम्न कार्य करेंगे।

<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", 
{"width": 400, "height": 400, "format": "png", "delay": 10000}).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>",
{"width": 400, "height": 400, "format": "png", "delay": 10000}).Create();
</script>

चूंकि जावास्क्रिप्ट एपीआई वेब पेज के HTML तक आसान पहुंच रखता है इसलिए यह कैप्चरिंग के लिए भी आदर्श है गतिशील वेबपृष्ठ सामग्री या सामग्री एक लॉगिन के पीछे.

पीडीएफ और अधिक बनाना

एक अन्य प्रकार की कैप्चर बनाने के लिए जैसे कि PDF, DOCX, CSV, JSON या Excel स्प्रेडशीट केवल वांछित प्रारूप को निर्दिष्ट करता है और यह स्वचालित रूप से बनाया जाएगा। उदाहरण के लिए नीचे दिए गए उदाहरणों में हम क्रमशः URL और HTML से DOCX और PDF दस्तावेज़ बना रहे हैं, फिर ये स्वचालित रूप से उपयोगकर्ता ब्राउज़र में डाउनलोड हो जाते हैं।

<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", 
{"format": "pdf", "download": 1}).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>",
{"format": "pdf", "download": 1}).Create();
</script>
<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", 
{"format": "docx", "download": 1}).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>",
{"format": "docx", "download": 1}).Create();
</script>

यह याद रखना महत्वपूर्ण है कि यह डाउनलोड पैरामीटर किसी भी प्रकार की कैप्चर को स्वचालित रूप से डाउनलोड करने के लिए इस्तेमाल किया जा सकता है, जैसे कि DOCX, PDF, PNG, JPG या CSV।

तत्वों में स्क्रीनशॉट जोड़ना

RSI AddTo नीचे दी गई विधि छवि या पीडीएफ कैप्चर को जोड़ने के लिए HTML दस्तावेज़ के भीतर स्थान के रूप में एक तत्व या एक डोम तत्व की आईडी को स्वीकार करता है। नीचे दिए गए उदाहरण में स्क्रीनशॉट को जोड़ा जाएगा insertCode div.

अंत में किसी भी आवश्यक पास पैरामीटर JSON शब्दकोश के रूप में ConvertURL or ConvertHTML तरीकों। नीचे दिए गए उदाहरण में देरी को 1000ms और PNG के प्रारूप पर सेट किया गया है। हालाँकि यदि आपको किसी अन्य अतिरिक्त विकल्प की आवश्यकता नहीं है, तो आपको इस पैरामीटर को निर्दिष्ट करने की आवश्यकता नहीं है।

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

एक डेटा URI को कैप्चर करना

RSI DataURI नीचे दी गई विधि कॉलबैक फ़ंक्शन को स्वीकार करती है, यह फ़ंक्शन तब स्क्रीनशॉट के बेसएक्सएनयूएमएक्स डेटा यूआरआई को पारित कर देगा या कैप्चर करने के बाद इसे आपके जावास्क्रिप्ट एप्लिकेशन को कैप्चर पर और भी अधिक नियंत्रण की अनुमति देता है।

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/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@/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 तरीके

आरंभ करने के लिए आपको निम्नलिखित तीन तरीकों में से एक को चुनना होगा जो यह इंगित करने के लिए कि आप क्या बदलना चाहते हैं।

फिर इनमें से एक या अधिक तरीके चुनें, यह निर्दिष्ट करने के लिए कि आप कैप्चर कैसे बनाना चाहते हैं।

यह जावास्क्रिप्ट कोड लाइब्रेरी पूरी तरह से खुला स्रोत है! यदि आप स्रोत कोड देखना या सुधारना चाहते हैं तो आप इसे पा सकते हैं GitHub.