首頁(yè) 猿問如何將iframe捕獲為圖像

如何將iframe捕獲為圖像

JavaScript

牧羊人nacy 2021-03-29 17:14:50

我的網(wǎng)頁(yè)中有一個(gè)iframe，可以動(dòng)態(tài)加載網(wǎng)站。有什么方法可以僅捕獲iframe并將其另存為圖像嗎？如果不可能，是否可以使用JavaScript截取整個(gè)頁(yè)面的屏幕截圖？

查看完整描述

1 回答

幕布斯7119047

TA貢獻(xiàn)1794條經(jīng)驗(yàn) 獲得超8個(gè)贊

網(wǎng)頁(yè)由于其性質(zhì)而不是最好的“截屏”內(nèi)容。它們可以包括異步元素，框架或類似的東西，它們通常是響應(yīng)式的等等。

為了您的目的，最好的方法是使用外部api或外部服務(wù)，我認(rèn)為嘗試使用JS并不是一個(gè)好主意。

你應(yīng)該嘗試url2png

或者使用html canvas來(lái)做到這一點(diǎn)

查看html2canvas項(xiàng)目。他們的方法是在畫布內(nèi)創(chuàng)建頁(yè)面的表示形式。他們沒有制作實(shí)際的屏幕截圖，而是根據(jù)頁(yè)面上的內(nèi)容和加載的樣式表進(jìn)行構(gòu)建。它可以用于整個(gè)身體或僅用于特定元素。

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

html2canvas(document.body, {

onrendered: function(canvas) {

document.body.appendChild(canvas);

}

});

您可以相對(duì)輕松地使其適應(yīng)您的代碼。

看看他們的演示。單擊任何按鈕，然后滾動(dòng)到頁(yè)面底部。

反對(duì) 回復(fù) 2021-04-08

關(guān)注

舉報(bào)

0/150

提交

取消

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)