javascript – PhantomJS渲染模糊的Chart.js画布

我试图通过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
});

解决方法

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

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

并添加您的html头模板

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