如何將iframe捕獲為圖像

Question

我的網頁中有一個iframe ，可以動態加載網站。 有什么方法可以僅捕獲iframe並將其另存為圖像嗎？ 如果不可能，是否可以使用JavaScript截取整個頁面的屏幕截圖？

Answer 1

由於網頁的性質，它們並不是最好的“屏幕快照”； 它們可以包括異步元素，框架或類似的東西，它們通常是響應式的等等。

為了您的目的，最好的方法是使用外部api或外部服務，我認為嘗試使用JS並不是一個好主意。

你應該嘗試url2png

或者使用html canvas執行此操作

查看html2canvas項目。 他們的方法是在畫布內創建頁面的表示形式。 他們沒有制作實際的屏幕截圖，而是根據頁面上的內容和加載的樣式表進行構建。 它可以用於整個身體或僅用於特定元素。

它也真的很容易使用。 這是一個例子：

 html2canvas(document.body, { onrendered: function(canvas) { document.body.appendChild(canvas); } }); 

您可以相對輕松地使其適應您的代碼。

看看他們的演示。 單擊任何按鈕，然后滾動到頁面底部。

Answer 2

為了能夠在iframe中使用html2canvas，您可能需要將其注入，然后從iframe上下文內部執行它。 以下內容可以幫助您實現這一目標： 將JavaScript函數注入iframe