使用 render() 控制图像输出的 DPI答案

【问题标题】：Controlling DPI of image output using render()使用 render() 控制图像输出的 DPI
【发布时间】：2012-06-07 16:51:10
【问题描述】：

使用phantomjs，有没有办法控制使用page.render(filename) 方法光栅化网页内容图像时使用的 DPI 设置？

我找不到任何可以通过the interface api 控制它的东西，但不知道是否有人已经想出了办法。

我们的业务案例如下所示：

通过 Web 应用程序创建的自定义 HTML 内容被馈送到我们的 rasterize.js 幻像进程，并被查询特定标签以设置客户端矩形。此客户端矩形被渲染为 HTML 的 PNG，然后可以在其他地方用作图像。

我们希望生成的 PNG 的分辨率高于默认值，因为在某些奇怪的字体大小/粗体组合中文本会出现锯齿。

【问题讨论】：

PNG 中记录的分辨率在显示时通常会被忽略。当您在编辑器中打开它时，它看起来还可以吗？
不，这就是问题所在。他们将 PNG 包含在 PDF 中，据说可以保持分辨率，并且会产生“难以阅读的文本”
啊，您发现了一种不忽略分辨率的情况。您可能需要 96 的分辨率。
是的，但是在 phantom JS 中是否可以指定 render() 它的分辨率？ FWIW，他们要求 300 DPI，因为它是印刷品。

标签： dpi phantomjs rasterizing

【解决方案1】：

我可能将 DPI 与其他内容混为一谈，但您是否查看过 zoomFactor 选项？在页面对象上设置它会导致渲染的图像缩放。

【讨论】：

【解决方案2】：

这个 fork 允许设置 dpi https://github.com/martonw/phantomjs/tree/issue-%2313553

然后你可以用page.dpi = 72设置dpi

console.log('Loading a web page');  
var page = require('webpage').create();
var url = 'http://phantomjs.org/';
page.open(url, function (status) {
  //Page is loaded!
  page.dpi=300; // this is where you actually set the DPI
  page.render("test.pdf");
  phantom.exit();
});

【讨论】：