CODEWITHSUNDEEP
htmlphantomjs
Gibson
Gibson

Reputation: 2085

PhantomJS rendering incorrect PNG rendering

I'm rendering a webpage into a PNG with dimensions of 7642px by 3815px.

Misteriously, when rendered, the outputted image has a bit more pixels (PhantomJS is adding some margins, don't know why.)

I've tried specifying the method page.paperSize but it doesn't do anything:

"use strict";

var page = require('webpage').create();
var system = require('system');

var orderId = system.args[1];
var output = "/Users/mac/Desktop" + orderId + ".png"

var url = 'http://localhost:3000/?id=' + orderId

page.viewportSize = { width: 3000, height: 3000 };

page.paperSize = {
    width: '7642px',
    height: '3815px',
    margin: '0px'
};

page.open(url, function (status) {
    if (status !== 'success') {
        console.log('Ha habido un error');
        phantom.exit(1);
    } else {
        window.setTimeout(function () {
            page.render(output, { format: 'png', quality: '100' });
            phantom.exit();
        }, 5000);
    }
});

Any ideas please?

Thanks!

Upvotes: 0

Views: 50

Answers (1)

Gibson
Gibson

Reputation: 2085

Finally I found this workaround and works:

page.zoomFactor = 1;
page.open(url, function (status) {
    page.evaluate(function(w, h) {
      document.body.style.width = w + "px";
      document.body.style.height = h + "px";
    }, width, height);
    page.clipRect = {top: 0, left: 0, width: width, height: height};     
    if (status !== 'success') {
        console.log('Ha habido un error');
        phantom.exit(1);
    } else {
        window.setTimeout(function () {
            page.render(output, { format: 'png', quality: '100' });
            phantom.exit();
        }, 5000);
    }
});

Upvotes: 0

Related Questions