Controlling DPI of image output using render()

Question

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.

Lewls

The resolution recorded in a PNG is generally ignored when displaying it. Does it look OK when you open it in an editor? – Godown

no, and that's the issue. They are including the PNG inside a PDF, which is supposedly maintaining resolution, and it's producing "hard-to-read text" – Lewls

Ah, you've found the one situation where resolution isn't ignored. You probably want a resolution of 96. – Godown

yes, but is it possible within phantom JS to specify what resolution at which to render() it? FWIW, they are requesting 300 DPI, since its meant to be a printed item. – Lewls

Answer 1

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.

Ideologist

Answer 2

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();
});

Charactery