如何提升PhantomJS中PDF光栅化的质量？

我之前也碰到过PhantomJS渲染网页时图表和图像出现噪点、像素化的问题，折腾了好一阵子才找到几个有效的解决思路，分享给你：

1. 调整Viewport尺寸与缩放因子 #

PhantomJS默认的视口尺寸很小，直接渲染放大成PDF自然会模糊。你可以先设置一个高分辨率的视口，再配合缩放因子提升渲染精度：

// 设置高分辨率视口
page.viewportSize = { width: 1920, height: 1080 };
// 缩放2倍，让渲染的元素更清晰
page.zoomFactor = 2;

这个方法本质是让PhantomJS先渲染一个大尺寸的页面，再缩小到PDF的纸张尺寸，相当于提升了光栅化的分辨率。

2. 优化ChartJS的渲染配置 #

ChartJS的canvas渲染默认是适配当前屏幕的DPI，在PhantomJS的无头环境下可能会用低DPI渲染。你可以在初始化图表时强制设置更高的devicePixelRatio：

var ctx = document.getElementById('yourChartId').getContext('2d');
var chart = new Chart(ctx, {
    type: 'bar', // 你的图表类型
    data: yourChartData,
    options: {
        devicePixelRatio: 2, // 设为2或更高，提升图表渲染精度
        responsive: true,
        maintainAspectRatio: true
    }
});

这样ChartJS会生成更高分辨率的canvas，导出到PDF时就不会像素化了。

3. 配置PDF输出的缩放参数 #

在设置page.paperSize时，直接指定zoom参数也能提升PDF的输出质量：

page.paperSize = {
    format: 'A4',
    orientation: 'portrait',
    margin: '1cm',
    zoom: 2 // 缩放渲染内容，提升清晰度
};

4. 确保图表完全渲染后再生成PDF #

PhantomJS可能会在ChartJS的动画还没完成、图表还没完全渲染好的时候就执行了render()，导致图表模糊。你可以通过延迟或者监听ChartJS的事件来等待渲染完成：

// 方法1：延迟一段时间再渲染（根据你的图表动画时长调整）
setTimeout(function() {
    page.render('output.pdf');
    phantom.exit();
}, 2000);

// 方法2：监听ChartJS的animationComplete事件（需要在页面脚本中触发）
page.evaluate(function() {
    window.chartRendered = false;
    var chart = new Chart(ctx, {
        // ... 图表配置
        options: {
            animation: {
                onComplete: function() {
                    window.chartRendered = true;
                }
            }
        }
    });
});

// 轮询等待渲染完成
function checkRenderComplete() {
    var rendered = page.evaluate(function() {
        return window.chartRendered;
    });
    if (rendered) {
        page.render('output.pdf');
        phantom.exit();
    } else {
        setTimeout(checkRenderComplete, 500);
    }
}
checkRenderComplete();

为什么之前的DPI设置没用？ #

PhantomJS的dpi属性其实并不是真正控制光栅化分辨率的有效参数，官方文档里对这个属性的支持也比较模糊。它的渲染精度主要由视口尺寸、缩放因子以及内容本身的渲染分辨率（比如ChartJS的devicePixelRatio）决定，所以你之前尝试的page.dpi和page.property('dpi', 200)没有效果是正常的。

内容的提问来源于stack exchange，提问作者adelriosantiago