如何使對應的PhantomJS屏幕截圖與實際的網頁一致？

我正在使用PhantomJS從我的網頁截圖。該代碼只是如何使對應的PhantomJS屏幕截圖與實際的網頁一致？

var page = require('webpage').create(); 
page.open('Target_Zone_Selection.html', function() { 
    page.viewportSize = {width: 1024, height: 800}; 
    page.render('test.png'); 
    phantom.exit(); 
});

一切工作正常，但我想要做的，然後是讓符合實際的網頁截圖（上精確的取景框大小瀏覽器中可以看到）。我的最終目標是獲得鼠標位置並在屏幕截圖上對應此位置。

還有一個問題：網頁大小與來自PhantomJS的呈現不同。我嘗試了幾種解決方案，通過DOM並採取每個偏移位置來查找屏幕截圖的維度，但始終存在問題。此方法適用於寬度，但不適用於高度。

有人可以描述一種方法來使網頁和屏幕截圖相對應嗎？非常感謝！

更新：問題被發現：我的網頁包含畫布，按鈕，文本形式和一些HTML。使用PhantomJS渲染後，不會給出相同大小的唯一元素是按鈕...並且瀏覽器之間按鈕的渲染也不同...

任何有關預測按鈕渲染大小的建議嗎？

來源

2013-04-18 goodblues

您是否在談論移動設備的視口標籤？像PhantomJS這樣的「桌面」瀏覽器不支持視口。您需要查看支持移動瀏覽器的工具或服務（例如https://browshot.com/）

來源

2013-04-18 21:14:16 Julien

不，我正在討論從整個網頁截取屏幕截圖（例如，在桌面瀏覽器上看到的），並使此截圖對應於實際的網頁尺寸。目標是在屏幕截圖上顯示鼠標位置（在實際網頁中）。要做到這一點，我需要使尺寸一致。無論如何謝謝你的提議。 – goodblues

如何使對應的PhantomJS屏幕截圖與實際的網頁一致？

回答

相關問題