PhantomJS呈现模糊的Chart.js画布

Question

我正在尝试通过PhantomJS 2.1.1呈现报告,其中HTML页面包含Chart.js生成的图表.我完全控制了那个页面.生成的PDF应为可打印的A4.正如您在下面的屏幕截图中看到的,图表非常模糊.

有没有什么办法可以让Chart.js或PhantomJS以更高的DPI渲染图表/页面,这样绘制的画布看起来既美观又锐利？

PhantomJS:

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

chart.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头模板

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