我之前在Windows上用PhantomJS渲染页面时，也遇到过图片和字体模糊的问题，试了几个参数调整的方法，亲测有效，给你说说具体怎么弄：

• 调整视口大小与缩放因子
  PhantomJS默认的视口是800x600，这种低分辨率渲染出来的内容，放大后自然会模糊。你可以把视口设置为更高的分辨率，再配合缩放因子让内容适配，提升整体清晰度：

  var page = require('webpage').create();
  page.viewportSize = { width: 1920, height: 1080 }; // 设置为高清分辨率
  page.zoomFactor = 2; // 放大2倍渲染，细节更清晰
  page.open('webpage.html', function () {
      page.render('webpage.png');
      phantom.exit();
  });
  

• 适配高DPI屏幕
  如果你的Windows系统是高分辨率显示器，PhantomJS默认的设备像素比可能没有适配，导致渲染内容模糊。手动设置devicePixelRatio可以解决这个问题：

  var page = require('webpage').create();
  page.viewportSize = { width: 1920, height: 1080 };
  page.devicePixelRatio = 2; // 匹配高分屏的像素比例
  page.open('webpage.html', function () {
      page.render('webpage.png');
      phantom.exit();
  });
  

• 指定最高渲染质量
  调用render方法时，传入质量配置参数，确保输出的图像是最高质量（PNG格式本身是无损的，但这个参数能进一步优化渲染细节）：

  var page = require('webpage').create();
  page.viewportSize = { width: 1920, height: 1080 };
  page.open('webpage.html', function () {
      page.render('webpage.png', { quality: 100 }); // 设置为最高质量
      phantom.exit();
  });
  

你可以把这几个方法结合起来使用，比如同时设置大视口、设备像素比和缩放因子，一般就能解决大部分模糊问题。另外，建议确认你使用的是PhantomJS的最新稳定版，旧版本可能存在渲染相关的bug。

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