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

GrabzIt का निःशुल्क जावास्क्रिप्ट स्क्रीनशॉट और HTML रूपांतरण एपीआई

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

GrabzIt JavaScript स्क्रीनशॉट API का उपयोग करना छवि, DOCX या PDF स्क्रीनशॉट डालने का सबसे सरल तरीका है। साथ ही जीआईएफ रूपांतरणों को एनिमेटेड करने के लिए वीडियो और अधिक 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 मॉड्यूल के रूप में उपयोग करने के लिए आप इसका उपयोग कर सकते हैं तकनीक. आप अपनी वेबसाइट में जावास्क्रिप्ट को कैसे शामिल करते हैं इसके अलावा यह बिल्कुल उसी तरह से काम करेगा जैसा यहां बताया गया है।

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

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

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

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

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

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

किसी अन्य प्रकार का कैप्चर जैसे PDF, DOCX, CSV, JSON या एक्सेल स्प्रेडशीट बनाने के लिए। बस वांछित प्रारूप प्रकार निर्दिष्ट करें, और सिस्टम स्वचालित रूप से इसे बना देगा। उदाहरण के लिए, नीचे दिए गए उदाहरणों में हम क्रमशः 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 नीचे दी गई विधि छवि या पीडीएफ कैप्चर को जोड़ने के लिए वेब पेज के भीतर एक DOM तत्व की आईडी को स्वीकार करती है। नीचे दिए गए उदाहरण में, कोड स्क्रीनशॉट को इसमें जोड़ देगा insertCode div.

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

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

कैप्चर को डेटा URL में कनवर्ट करना

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

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