Controlling DPI of image output using render()

6.5k Views Asked by At

Using phantomjs, is there a way to control the DPI setting used when rasterizing an image of the web content using the page.render(filename) method?

I can't find anything that would control this via the interface api, but didn't know if someone has already figured out a way to do this.

Our business-case looks like this:

Custom HTML content created via a web application is fed to our rasterize.js phantom process and is queried for a specific tag to set the client rectangle. This client rectangle is rendered to a PNG of the HTML that can then be used as an image elsewhere.

We want the resolution of the resulting PNG to be something higher than the default, due to aliasing on the text at some odd font sizes/bold combinations.

2

There are 2 best solutions below

0
On

I may be mixing up DPI with something else, but have you looked into the zoomFactor option? Setting that on the page object will cause the rendered image to zoomed.

0
On

This fork allows setting the dpi https://github.com/martonw/phantomjs/tree/issue-%2313553

You can set then the dpi with page.dpi = 72

console.log('Loading a web page');  
var page = require('webpage').create();
var url = 'http://phantomjs.org/';
page.open(url, function (status) {
  //Page is loaded!
  page.dpi=300; // this is where you actually set the DPI
  page.render("test.pdf");
  phantom.exit();
});