使用JavaScript拍攝網站截圖

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

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

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

入門

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

免費獲得應用程序密鑰.
免費下載 JavaScript庫並嘗試演示應用.
閱讀以下概述，了解有關GrabzIt的JavaScript API如何工作的基礎知識。

為了防止其他人復制您的JavaScript代碼並竊取所有GrabzIt帳戶資源，您必須授權哪些域可以使用您的應用程序密鑰。

最簡單的例子

要開始下載 GrabzIt JavaScript庫並包括 grabzit.min.js 您想要捕獲顯示的網頁中的庫或包含對CDN版本的引用 grabzit.min.js 庫如下所示。然後包括以下代碼，以將屏幕快照添加到網頁的body標籤。您將需要更換 APPLICATION KEY 與您的應用密鑰並更換 https://www.tesla.com 與您要為其截屏的網站。

圖片網址
HTML到圖像

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.5.1/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.5.1/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秒鐘，則可以執行以下操作。

圖片網址
HTML到圖像

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.5.1/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.5.1/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文檔，然後將它們自動下載到用戶瀏覽器。

網址到PDF
HTML轉PDF
DOCX的URL
HTML到DOCX

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.5.1/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.5.1/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.5.1/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.5.1/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到圖像

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.5.1/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.5.1/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到圖像

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