捕獲和轉換Web的工具

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

您是否曾經想過對用戶網頁進行截圖? 也許是為了使錯誤修復或用戶更容易 int改進? 好吧,你可以 GrabzIt的JavaScript API.

要捕獲用戶頁面,您必須使用 ConvertPage 方法。 這會將用戶頁面的內容髮送給我們進行轉換 int圖片,PDF,DOCX或我們支持的其他任何內容。 重要的是要記住,除非在屏幕截圖中顯示,否則任何資源(例如CSS或圖像)都無法加載,除非它們是公開可用的。 但是,通常是這種情況。

下面的簡單示例顯示了使用GrabzIt的庫對用戶網頁進行屏幕截圖是多麼容易。 只需將代碼放在要捕獲的頁面底部即可。

<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").ConvertPage().Create();
</script>

請注意,您可以通過任何 參數 通過JavaScript API允許 ConvertPage 方法,以進一步自定義您的屏幕截圖。 例如,在下面的示例中,我們使屏幕截圖與用戶網頁的寬度相同,同時捕獲其整個高度。

<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").ConvertPage({
   "bwidth":document.documentElement.clientWidth,
   "bheight": -1, 
   "height": -1,
   "width": -1
}).Create();
</script>

但是,上述示例受到限制,因為您將需要在某種事件上觸發捕獲網頁,而不是僅在加載網頁時捕獲網頁。 例如,兩種可能的選擇是單擊按鈕或定期捕獲網頁 int帶有計時器的錯誤。

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.7/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或更多。 或者,您可以使用finish事件來調用Web服務來 save 結果,或者 DataURI 將結果發佈到Web服務的方法。

顯然,不用說您可能需要通知用戶您正在執行此操作。

您可以通過以下方式免費開始截圖當前網頁 創建一個帳戶 並複制上面的代碼 int一個您要捕獲的網頁。 請記住,要確保其他人不使用您的帳戶,您必須 授權您的域名 才能在您的網站上運行。