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

GrabzIt's Free JavaScript Screenshot and HTML Conversion API

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

Using the GrabzIt JavaScript Screenshot API is the simplest way of putting image, DOCX or PDF screenshots. As well as अ‍ॅनिमेटेड GIF रूपांतरांवर व्हिडिओ आणि अधिक intओ आपली वेबसाइट फक्त आवश्यक GrabzIt जावास्क्रिप्ट लायब्ररी, जावास्क्रिप्ट कोडची ओळ आणि काही GrabzIt जादू!

Our servers will cache a capture for the time determined by your package. If you make a call to GrabzIt's JavaScript API using the same parameters as the previously cached screenshot. The system will return the cached screenshot instead to prevent using your capture allowance. You can disable this behaviour by using the कॅशे पॅरामीटर.

प्रारंभ करणे

Follow these steps to start using the JavaScript API:

  1. आपले विनामूल्य मिळवा अनुप्रयोग की.
  2. विनामूल्य डाउनलोड करा जावास्क्रिप्ट लायब्ररी आणि वापरून पहा डेमो अ‍ॅप.
  3. Learn the basics about how GrabzIt's JavaScript API works by reading the below overview.

To prevent other people just copying your JavaScript code and stealing all your GrabzIt account resources. You must कोणती डोमेन प्राधिकृत करा आपल्या अनुप्रयोग की वापरू शकता.

  • आपल्याकडे सध्या कोणतेही अधिकृत डोमेन नसल्यामुळे हे जावास्क्रिप्ट API आपल्यासाठी कार्य करणार नाही! कृपया तुमचे डोमेन जोडा!

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

प्रारंभ करण्यासाठी, डाउनलोड करा GrabzIt जावास्क्रिप्ट लायब्ररी आणि समाविष्ट grabzit.min.js library in the web page you want the capture to appear in. Or include a reference to the CDN version of the grabzit.min.js library as shown below.

Then include the below code to add a screenshot to the body tag of your web page. You will need to replace the APPLICATION KEY आपल्यासह अनुप्रयोग की आणि पुनर्स्थित करा https://www.tesla.com with the website you want to capture screenshots of.

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

Then simply wait a short while. The image will automatically appear at the top of the page, without the need to reload the webpage. Even thought the browser generates this image you can still use हे तंत्र save आपल्या स्वत: च्या सर्व्हरवर कॅप्चर करते.

To use GrabzIt as an ES6 module instead you can use this तंत्र. Other than how you include the JavaScript in your website it will work in exactly the same way as detailed here.

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

You always need the Application Key and the URL or HTML parameters, however all other पॅरामिटर्स are optional. To use optional parameters, add the parameter and its value as a JSON dictionary item.

For instance, to take a PNG screenshot with a width of 400px, a height of 400px and a 10 second wait, you would do the following.

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

As the JavaScript API can access a web page's HTML easily. This makes it ideal for capturing डायनॅमिक वेबपृष्ठ सामग्री. As well as accessing content लॉगिन मागे.

पीडीएफ आणि बरेच काही तयार करत आहे

To create another type of capture such as a PDF, DOCX, CSV, JSON or Excel Spreadsheet. Just specify the desired format type, and the system will automatically create it. For instance in the below examples we are creating DOCX and PDF documents from URL's and HTML respectively. The users' browser automatically downloads these files.

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

Note that you can use the पॅरामीटर डाउनलोड करा to automatically download any type of capture e.g. DOCX, PDF, PNG, JPG or CSV.

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

अगोदर निर्देश केलेल्या बाबीसंबंधी बोलताना AddTo method below accepts the id of a DOM element within the web page to add the image or PDF capture to. In the example below, the code will add the screenshot to the insertCode Div

शेवटी कोणतीही आवश्यक पास करा पॅरामिटर्स एक JSON शब्दकोष म्हणून ConvertURL or ConvertHTML methods. In the example below, we set the delay to 1000ms and the format to PNG. The options parameter is optional, so if you do not require any additional options do not set it.

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

Converting Captures to a data URL

अगोदर निर्देश केलेल्या बाबीसंबंधी बोलताना DataURI method below accepts a callback function. This function will receive a base64 data URL of the rendered screenshot or capture. Allowing your JavaScript application even more control over the capture.

<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 पद्धती

Choose one of the following three methods to indicate what you want to convert.

Then choose one or more of these methods to specify how you want to create the capture.

This JavaScript code library is completely open source! To view or improve the source code you can find it on GitHub.