javascript - PhantomJS 呈现模糊的 Chart.js Canvas

Question

我正在尝试通过 PhantomJS 2.1.1 呈现报告，其中 HTML 页面包含由 Chart.js 生成的图表。我可以完全控制该页面。生成的 PDF 应该是可打印的 A4。正如您在下面的屏幕截图中所见，图表非常模糊。

有什么方法可以使 Chart.js 或 PhantomJS 以更高的 DPI 呈现图表/页面，以便绘制的 Canvas 看起来漂亮且清晰？

幻影:

page.property('paperSize', {
  format: 'A4',
  orientation: 'portrait',
  border: '2cm'
});

图表.js:

var lineChart = new Chart(ctx).Line(data, {
  animation: false,
  responsive: true,
  pointDot: false,
  scaleShowLabels: true,
  showScale: true,
  showTooltips: false,
  bezierCurve : false,
  scaleShowVerticalLines: false
});

Answer 1

在您的 phantomjs 页面中添加 viewportSize 和 zoomFactor:

await page.property('viewportSize', { height: 1600, width: 3600 });
await page.property('zoomFactor', 4);

并添加到您的 html head 模板中

<script>
  window.devicePixelRatio = 4;
</script>