捕獲和轉換Web的工具

如何使用JavaScript拍攝用戶網頁的屏幕截圖

您是否曾經想過要為使用者網頁進行螢幕截圖? 也許是為了更容易修復錯誤或用戶 int介面改進? 那麼你可以與 GrabzIt 的 JavaScript API.

要捕獲使用者頁面,您必須使用 ConvertPage 方法。 這會將使用者頁面的內容傳送給我們進行轉換 intoa 圖像、PDF、DOCX 或我們支援的任何其他內容。 重要的是要記住,任何資源(例如 CSS 或圖像)都無法加載,除非在螢幕截圖中,除非它們是公開可用的。 然而,通常情況就是這樣。

下面的簡單範例展示了使用 GrabzIt 庫對使用者網頁進行螢幕截圖是多麼容易。 只需將程式碼放在要捕獲的頁面底部即可。

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.5.2/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertPage().Create();
</script>

請注意,您可以透過任何 參數 允許透過 JavaScript API ConvertPage 方法,進一步自訂您的螢幕截圖。 例如,在下面的範例中,我們使螢幕截圖與使用者網頁的寬度相同,同時捕捉其完整高度。

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.5.2/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertPage({
   "bwidth":document.documentElement.clientWidth,
   "bheight": -1, 
   "height": -1,
   "width": -1
}).Create();
</script>

然而,上面的範例是有限的,因為您需要在某種事件上觸發網頁的捕獲,而不是僅在加載網頁時捕獲頁面。 例如,兩種潛在的替代方案是透過點擊按鈕或定期捕獲網頁 int帶定時器的ervals。

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.5.2/grabzit.min.js"></script>
<script>
setTimeout(function(){
   GrabzIt("Sign in to view your Application Key").ConvertPage({
      "bwidth":document.documentElement.clientWidth,
      "bheight": -1, 
      "height": -1,
      "width": -1
   }).CreateInvisible();
}, 30000);
</script>

在上面的範例中,我們每 30 秒自動建立一次使用者網頁螢幕截圖。 但不是將螢幕截圖添加到用戶網頁或下載它,而是 Create 前面範例中使用的方法就可以,取決於格式。 這 CreateInvisible 使用方法,不會將結果傳回給使用者。

然後,您可以 save JavaScript 螢幕截圖 使用以下方法之一。 用於將結果匯出到 Amazon、Dropbox、FTP 或更多的匯出參數。 或者您可以使用完成事件來呼叫 Web 服務 save 結果,或 DataURI 將結果發佈到 Web 服務的方法。

顯然,不言而喻,您可能需要通知用戶您正在這樣做。

您可以開始免費截圖當前網頁,方法是 創建一個帳戶 並複製上面的程式碼 intoa 您想要捕獲的網頁。 請記住,為了確保其他人不會使用您的帳戶,您必須 授權您的域名 在它在您的網站上運行之前。