How to get high quality html snapshot image by PhantomJs?

Question

I am using PhantomJs to take screenshot of a HTML page. I already set quality parameter to 100, but the quality of image is still too low. Is there any way to improve the image's quality ? Or are there any other better tools can do the job?

Answer 1

You can change the viewport size, i.e. the resolution, for example:

const phantom = require('phantom');   
const address = "https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Hubble2005-01-barred-spiral-galaxy-NGC1300.jpg/1920px-Hubble2005-01-barred-spiral-galaxy-NGC1300.jpg";

phantom.create().then( (ph) => {
  ph.createPage().then( (page) => {
    page.open(address).then( (status) =>  {
      console.log('Opened page: ' + address + ' Status: ' + status);
      page.property('viewportSize', { width: 1920, height: 1096} )
      page.render('test.jpg', {format: 'jpeg', quality: '100'}).then(() => {;
        console.log('Rendered page.');
        ph.exit();
      });
    });
  });
});

This will give you better image quality. The default size is relatively low.