phantomjs截圖並不縮放到頁面內容

我有幾個客戶端橫幅（例如 - 寬度160像素和高度600像素），但是當我嘗試截取屏幕截圖時，我看到一個結果作爲圖像400x600與白色背景（或黑色當結果文件是JPEG時）和橫幅在左側（約160x600）。我無法硬編碼viewPortSize因爲所有橫幅都不同。是否有可能動態設置viewPortSize或其他東西有像橫幅完全一樣的結果圖片？phantomjs截圖並不縮放到頁面內容

const page = require('webpage').create(); 
const system = require('system'); 
/** 
* FIRST ARG - name of this runner 
* SECOND ARG - input html file 
* THIRD ARG - destination 
*/ 
if (system.args.length !== 3) { 
    console.log('Usage: phantomRunner.js [inputFile] [destination]'); 
    phantom.exit(); 
} 
const inputFile = system.args [1]; 
const outputPath = system.args [2]; 

page.open(inputFile, function (status) { 
    if (status !== 'success') { 
     phantom.exit(1); 
    } else { 
     page.render(outputPath); 
     phantom.exit(); 
    } 
});

我已經嘗試將viewPortSize減小到10x10，但它沒有幫助。

編輯我發現它不可能改變瀏覽器的寬度大小低於360及其問題。

來源

2017-02-08 bearhunterUA

我想在截圖的時候這些橫幅還沒有呈現。你需要在'page.render'之前設置一些延遲 – MysterX

@MysterX nope ...它的加載和我看到的廣告，添加1秒的延遲，但結果相同 – bearhunterUA

有結果圖片就像橫幅？

換句話說，您只想對給定元素進行截圖。這不是一個完整的腳本來做到這一點，而只是重要的一部分。

var banner_id = system.args [1]; 

var b = page.evaluate(function (banner_id) { 
    return document.getElementById(banner_id).getBoundingClientRect(); 
}, banner_id); 

page.clipRect = { 
    top: b.top, 
    left: b.left, 
    width: b.width, 
    height: b.height 
}; 

page.render(system.args [2]);

來源

2017-02-08 17:32:13 Vaviloff

這是一個好主意，但我會注入一些div元素與banner_id在身體和第一個孩子之間做同樣的事情，因爲我不知道橫幅會是什麼。非常感謝，這很有幫助！ – bearhunterUA

phantomjs截圖並不縮放到頁面內容

回答

相關問題