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

Question

我正在使用 PhantomJs 截取 HTML 页面的屏幕截图。我已经将质量参数设置为 100，但图像质量仍然太低。有什么方法可以提高图像质量吗？还是有其他更好的工具可以完成这项工作？

Answer 1

您可以更改视口(viewport)大小，即分辨率，例如:

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

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