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

前端之家收集整理的这篇文章主要介绍了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>

猜你在找的JavaScript相关文章