使用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 與您要為其截屏的網站。
grabzit.min.js
APPLICATION KEY
<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 在您自己的服務器上捕獲 如果你希望。
如果要將GrabzIt用作ES6模塊,則可以使用此 技術,除了GrabzIt如何包含在JavaScript中之外,它的工作方式與此處詳述的完全相同。
儘管需要應用程序密鑰和URL或HTML參數,但所有其他 參數 是可選的。 對於所需的每個可選參數,通過以以下格式將參數的值附加為JSON字典的形式添加參數。
例如,如果您想要一個寬度為400px,高度為400px的屏幕截圖(採用PNG格式),並希望在截屏之前等待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>
由於JavaScript API可以輕鬆訪問網頁的HTML,因此它也是捕獲網頁的理想選擇 動態網頁內容 或內容 登錄背後.
要創建其他類型的捕獲,例如PDF,DOCX,CSV,JSON或Excel電子表格,只需指定所需的格式,即可自動創建它。 例如,在下面的示例中,我們分別從URL和HTML創建DOCX和PDF文檔,然後將它們自動下載到用戶瀏覽器。
<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>
重要的是要記住 下載參數 可用於自動下載任何類型的捕獲文件,例如DOCX,PDF,PNG,JPG或CSV。
AddTo 下面的方法接受元素或DOM元素的ID作為HTML文檔中的位置,以向其中添加圖像或PDF捕獲。 在下面的示例中,屏幕截圖將添加到 insertCode DIV。
AddTo
insertCode
最後通過所有必需的 參數 作為JSON字典 ConvertURL or ConvertHTML 方法。 在下面的示例中,延遲設置為1000ms,格式設置為PNG。 但是,如果不需要任何其他選項,則完全不需要指定此參數。
ConvertURL
ConvertHTML
<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 下面的方法接受一個回調函數,一旦呈現,屏幕快照或捕獲的base64數據URI將被傳遞給此函數,從而使您的JavaScript應用程序可以進一步控制捕獲。
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>
首先,您必須選擇以下三種方法之一來指示要轉換的內容。
然後選擇這些方法中的一種或多種,以指定要如何創建捕獲。
這個JavaScript代碼庫是完全開源的! 如果您想查看或改進源代碼,可以在 GitHub上.