如何通过PhantomJs获得高质量的html快照图像？

Question

我正在使用PhantomJs拍摄HTML页面的屏幕截图。我已经将质量参数设置为100，但是图像质量仍然太低。有什么方法可以改善图像质量？还是有其他更好的工具可以胜任？

Answer 1

您可以更改视口大小，即分辨率，例如：

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

这将为您提供更好的图像质量。默认大小相对较小。