使用PhantomJS的多個HTML頁面的屏幕截圖

Question

因此，正如大家在這個github問題中提到的那樣，phantomJS中的視口大小函數並不像很多人期望的那樣。

我正在嘗試為iPad安裝網絡應用程序的屏幕截圖。 該網站有一個position:fixed; 頁腳和標題。 當我拍攝截圖時，我只希望能夠在您第一次加載頁面時看到屏幕上可以看到的內容，因此我使用以下代碼將頁面剪切為我想要的大小。

page.clipRect = { top: 0, left: 0, width: 1024, height: 768 };

因為網站有一個position: fixed; 頁眉和頁腳，當我這樣做並截取屏幕截圖時，頁面上的內容強制滾動時頁腳丟失。 （它位於頁面底部）

在回復中，一種解決方案是將您想要截取屏幕的頁面加載到具有您偏好的高度和寬度的對象中，然后再截取該對象的屏幕截圖。

所有代碼片段都實現了這一點，假設您有一個想要截取屏幕截圖的網址。 我想截取多個html文件的截圖。 我根本不熟悉Javascript，我真的很難將這些解決方案合並到我的代碼中。

---

該解決方案采用單個網頁，並使用json文件將其轉換為多個不同大小的圖像。

雖然這個解決方案更符合我正在尋找的方面，但又是一個網頁。 請注意，iframe不起作用，iframe代碼需要替換為具有數據屬性且具有要加載的html頁面值的對象。

最終的解決方案比其他解決方案更完整，但同樣只是一個URL

---

我過去一直在使用以下代碼，它與基於特定尺寸構建的網絡應用程序完美配合，但是這個版本的構建略有不同，這就是為什么屏幕截圖是一場噩夢。

var system = require('system');
var dest = system.args[1];
var files = system.args[2].split(',');

function takeScreenshot(destName, index) {
    var page = require('webpage').create();

    // Open the target HTML file
    page.open(dest+'/'+destName+'/'+destName+'.html', function(status) {

        // Only capture 1024x768 area 
        page.clipRect = { top: 0, left: 0, width: 1024, height: 768 };

        // Save as PNG
        page.render(dest+'/'+destName+'/'+destName+'-full.png');

        // Send output to be caught by progress bar
        console.log('OK');

        // If the lop has finished exit, otherwise clean memory
        if(files.length == 0) {
        phantom.exit();
        } else {
            page.close();
            takeScreenshot(files.shift());
        }
    });

}

takeScreenshot(files.shift());

dest變量是屏幕截圖的目的地。

files是一個文件數組，我想截取它的截圖。

Answer 1

將最終解決方案與現有代碼結合起來應該很容易。 我們的想法是將實際代碼移動到一個函數中，並在完成上一個函數后使用新URL調用該函數。 當您查看“最終解決方案”時，我們用當前頁面完成的點用phantom.exit();表示phantom.exit(); 。 從那里你可以觸發更多的截圖。

這是完整的腳本，從DEfusion版本修改：

var args = require('system').args,
    resourceWait  = 300,
    maxRenderWait = 10000,
    mode          = args[3] || 'iframe',
    dest          = args[1],
    files         = args[2].split(','),
    page          = require('webpage').create(),
    count         = 0,
    forcedRenderTimeout,
    renderTimeout;

page.viewportSize = { width: 1024, height : 768 };

function doRender() {
    page.render(filename);
    next();
}

page.onResourceRequested = function (req) {
    count += 1;
    clearTimeout(renderTimeout);
};

page.onResourceReceived = function (res) {
    if (!res.stage || res.stage === 'end') {
        count -= 1;
        if (count === 0) {
            clearTimeout(forcedRenderTimeout);
            renderTimeout = setTimeout(doRender, resourceWait);
        }
    }
};

page.onConsoleMessage = function (msg) {
    console.log("from page: " + msg);
};

function evaluateJsWithArgs(func) {
    var args = [].slice.call(arguments, 1);
    var fn = "function() { return (" + func.toString() + ").apply(this, " + JSON.stringify(args) + "); }";
    return page.evaluate(fn);
};

function next(error){
    if (!error) {
        if (files.length == 0){
            phantom.exit();
        } else {
            takeScreenshot(files.shift());
        }
    }
}

function takeScreenshot(file){
    var url = dest+'/'+file+'/'+file+'.html';
    filename = dest+'/'+file+'/'+file+'-full.png';
    if(mode == 'iframe') {
        // use iFrame
        page.open('about:blank', function (status) {
            if (status !== "success") {
                console.log('Unable to load url');
                next(true);
            } else {
                page.includeJs(
                    "https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js",
                    function() {
                        evaluateJsWithArgs(
                            function(url, w, h) {
                                $('body')
                                    .css({margin: 0, padding: 0})
                                    .append('<object data="' + url + '" width="'+ w + '" height="' + h + '" id="screen-frame" />');
                                $('#screen-frame')
                                    .width(w)
                                    .height(h);
                            },
                            url,
                            page.viewportSize.width,
                            page.viewportSize.height
                        );
                    }
                );

                forcedRenderTimeout = setTimeout(function () {
                    doRender();
                }, maxRenderWait);
            }
        });
    } else {
        // resize body
        page.open(url, function(status) {
            if (status !== "success") {
                console.log('Unable to load url');
                next(true);
            } else {
                page.includeJs(
                    "https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js",
                    function() {
                        evaluateJsWithArgs(
                            function(w,h) {
                               $('body, html').css({
                                    width: w + 'px',
                                    height: h + 'px',
                                    overflow: 'hidden'
                               });
                            },
                            page.viewportSize.width,
                            page.viewportSize.height
                        );

                        forcedRenderTimeout = setTimeout(function () {
                            doRender();
                        }, maxRenderWait);
                    }
                );
            }
        });
    }
}

takeScreenshot(files.shift());