javascript - 使用 phantomjs 获取非常高质量的屏幕截图

Question

我正在尝试使用这个 phantomjs 脚本获得非常高质量的屏幕截图。但是我得到的屏幕截图并不是那么好。它不是那么清楚。屏幕截图的清晰度很糟糕。我如何获得非常高质量的屏幕截图？任何人都可以帮助我!!....

这就是我的代码的样子......

var page = require('webpage').create();
page.viewportSize = { width: 1920, height: 1200 };
page.zoomfactor = 1;
page.open('myurl', function(status) {

    if (status !== 'success') {
        console.log('Unable to load the address!');
        phantom.exit();
    } else {
        window.setTimeout(function () {
            console.log('Load the address!');
            page.dpi = 300;
            page.render('d:/screenshots/Newpdf.png',{format: 'png', quality: '100'});
            phantom.exit();
        }, 300000); // Change timeout as required to allow sufficient time 
    }

  //phantom.exit();
});

Answer 1

也许您必须更具体地说明“清晰度很差”。我假设背景图像看起来很模糊。在这种情况下:背景图像是 this one :

• 它是一个 *.jpg，是一个 Lossy compression并且已经有可见的人工制品。 Phantom 无法神奇地提高 JPEG 的质量。
• 它只有 1920x1200 - 因此，如果您的屏幕截图比这更大，就会变得模糊。 Phantom 无法神奇地提高放大图像的质量 - 尽管您似乎并没有尝试这样做

同样的问题可能适用于 the logo - 由于大规模缩小(原始 1890x827，但显示为 ~153.73x84 - 其中像素宽度的分数可能是另一个问题)，这可能具有模糊和/或严重的抗锯齿边缘。

解决方案:使用与您网站上显示的尺寸完全一致的图像，并在 Photoshop/Gimp/Whatever 中预先优化图像。避免缩放。避免有损压缩。尽量避免 %-sizes 这可能会导致图像使用小数像素。