捕獲和轉換Web的工具

使用JavaScript拍攝網站截圖JavaScript API

診斷面板 可以幫助您調試代碼!

使用GrabzIt JavaScript API是放置圖像,DOCX或PDF屏幕截圖以及 視頻到GIF動畫的轉換 多 into您的網站。 只需要 GrabzIt JavaScript庫,一行JavaScript代碼和一些GrabzIt魔術!

默認情況下,一旦創建捕獲,它將在您的軟件包確定的時間內保留在我們的服務器上的緩存。 然後,如果使用與先前緩存的屏幕截圖相同的參數調用GrabzIt的JavaScript API,則會替換該參數,以防止不必要地使用屏幕截圖餘量。 可以通過使用 緩存參數.

入門

要開始使用Javascript API,請按照以下步驟操作:

  1. 免費獲得 應用程序密鑰.
  2. 免費下載 JavaScript庫 並嘗試 演示應用.
  3. 閱讀以下概述,了解有關GrabzIt的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@3.4.7/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.7/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.7/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.7/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等

要創建其他類型的捕獲,例如PDF,DOCX,CSV,JSON或Excel電子表格,只需指定所需的格式,即可自動創建它。 例如,在下面的示例中,我們分別從URL和HTML創建DOCX和PDF文檔,然後將它們自動下載到用戶瀏覽器。

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

DataURI 下面的方法接受一個回調函數,一旦呈現,屏幕快照或捕獲的base64數據URI將被傳遞給此函數,從而使您的JavaScript應用程序可以進一步控制捕獲。

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

首先,您必須選擇以下三種方法之一來指示要轉換的內容。

  • ConvertURL([url to capture], [options]) -轉換網址,默認情況下轉換為JPG屏幕截圖。 JSON字典,其中包含 參數 是可選的。
  • ConvertHTML([html to convert], [options]) - 轉換HTML, 默認 intoa JPG圖像。 JSON字典,其中包含 參數 是可選的。
  • ConvertPage([options]) - 捕獲用戶的當前頁面, 默認 intoa JPG圖像。 JSON字典,其中包含 參數 是可選的。

然後選擇這些方法中的一種或多種,以指定要如何創建捕獲。

  • UseSSL() -強行製造 使用SSL的請求.
  • Encrypt() -使用加密安全密鑰自動加密捕獲內容。
  • AddPostVariable(name, value) -定義HTTP Post參數和可選值,可以多次調用此方法以添加多個參數。 使用此方法將強制GrabzIt 執行HTTP發布.
  • AddTemplateVariable(name, value) -定義一個 自定義模板 參數和值,可以多次調用此方法以添加多個參數。
  • AddTo([element | element id]) -插入捕獲 into指定的元素。
  • Create() -插入捕獲 into body標籤的開頭,或者如果不存在,則為HTML文檔的根節點。
  • CreateInvisible() -捕獲已創建,但未顯示在網頁上。
  • DataURI([callback function], [decrypt]) -在回調函數的單個參數中返回捕獲的base64數據URI。 如果解密參數為true,它將自動解密所有加密的捕獲。

這個JavaScript代碼庫是完全開源的! 如果您想查看或改進源代碼,可以在 GitHub上.