使用GrabzIt JavaScript API是放置圖像,DOCX或PDF屏幕截圖以及 視頻到GIF動畫的轉換 多 into您的網站。 只需要 GrabzIt JavaScript庫,一行JavaScript代碼和一些GrabzIt魔術!
默認情況下,一旦創建捕獲,它將在您的軟件包確定的時間內保留在我們的服務器上的緩存。 然後,如果使用與先前緩存的屏幕截圖相同的參數調用GrabzIt的JavaScript API,則會替換該參數,以防止不必要地使用屏幕截圖餘量。 可以通過使用 緩存參數.
要開始使用Javascript API,請按照以下步驟操作:
為了防止其他人復制您的JavaScript代碼並竊取所有GrabzIt帳戶資源,您必須 授權哪些域 可以使用您的應用程序密鑰。
要開始下載 GrabzIt JavaScript庫 並包括 grabzit.min.js
您想要捕獲顯示的網頁中的庫或包含對CDN版本的引用 grabzit.min.js
庫如下所示。 然後包括以下代碼,以將屏幕快照添加到網頁的body標籤。 您將需要更換 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如何包含在JavaScript中之外,它的工作方式與此處詳述的完全相同。
儘管需要應用程序密鑰和URL或HTML參數,但所有其他 參數 是可選的。 對於所需的每個可選參數,通過以以下格式將參數的值附加為JSON字典的形式添加參數。
例如,如果您想要一個 PNG 格式的寬 400 像素和高 400 像素的屏幕截圖,並希望在截取屏幕截圖前等待 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>
由於JavaScript API可以輕鬆訪問網頁的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。
AddTo
下面的方法接受元素或DOM元素的ID作為HTML文檔中的位置,以向其中添加圖像或PDF捕獲。 在下面的示例中,屏幕截圖將添加到 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>
DataURI
下面的方法接受一個回調函數,一旦呈現,屏幕快照或捕獲的base64數據URI將被傳遞給此函數,從而使您的JavaScript應用程序可以進一步控制捕獲。
<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>
首先,您必須選擇以下三種方法之一來指示要轉換的內容。
然後選擇這些方法中的一種或多種,以指定要如何創建捕獲。
這個JavaScript代碼庫是完全開源的! 如果您想查看或改進源代碼,可以在 GitHub上.