I've got a problem where I can't seem to set the viewport for PhantomJS from within Node.js, using Phantom-Proxy as the module I'm using to bridge the two.
I've successfully got it all taking screengrabs of Web pages but like I've said above, I just can't set the viewport size.
In the Phantom-Proxy docs it says I should set the viewport property like:
//set viewport size for browser window
proxy.page.set('viewportSize',
{ width:320, height:480 }, function (result) {
console.log(result.toString().cyan);
worldCallback.call(self);
});
So in my code, I've tried setting the viewport above the lines that actually take the screengrab:
module.exports = function (app, phantom) {
app.get('/url/:url/:width?/:height?', function (req, res) {
phantom.create({"debug": true}, function (proxy) {
var page = proxy.page;
page.set('viewportSize', { width: 320, height: 480 }, function (result) {
console.log(result);
});
page.open(req.params.url, function () {
page.waitForSelector('body', function () {
page.renderBase64('PNG', function (img) {
res.set('Content-Type', 'image/png');
res.end(new Buffer(img, 'base64'), 'binary');
});
});
});
});
});
};
Though I didn't think this would work, so I tried putting the page.open inside page.set's callback and it got ignored, and also tried putting page.set inside page.open's callback and then page.waitForSelectorinside that.
The viewport still seems to be ignored though!
Any help would be greatly appreciated with this! Thank you all
Turns out it was working all along.
Basically, although the viewport was set correctly, that does not mean the Web page will necessarily be the width and height of the viewport (unless for example; the body had a width of 100%).
The Web page would scroll within the viewport, so the whole page is still rendered.