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>

Answer 2

尝试使用与纸张DPI相关的纸张的较高DPI设置缩放系数：

page.zoomFactor = 300 / 96;   // or use / 72

必须在定义页面大小后设置。

你也可以看看这个答案：
的 Poor quality of png images drawn into html canvas

Answer 3

对于Phantom 2，我使用大画布渲染图表以获得分辨率，然后将其转换为png，最后销毁并删除旧画布并将其替换为具有响应式CSS类的图像。除了Chart.js选项之外，调整画布宽度和高度上的旋钮将为您提供完美的渲染。我们能够通过该方法（替代SVG渲染）和文件大小来提高渲染速度。

HTML：

<div class="container">
  <!-- generated images -->
  <img id="someIdImage" class="img-responsive"></img>

  <!-- temporary canvas -->
  <canvas id="someId" width="2000" height="600"></canvas>    
</div>

使用Javascript：

/**
 * _plot() plot with Chart.js
 *
 * @param {Function} callback
 */
 function _plot(callback) {
  var config = {}; // some Chart.js config
  var id = 'someId';
  var el = document.querySelector('#' + id);
  var el2d = el.getContext('2d');

  // plot instance
  var instance = new Chart(el2d, config);

  // generate and append image
  document.querySelector('#' + id + 'Image').setAttribute('src', el.toDataURL('image/png'));

  // destroy instance
  instance.destroy();
  el.parentElement.removeChild(el);

  // callback
  if (callback) {
    callback();
  }
}

Answer 4

Chart.js 现在具有参数“devicePixelRatio”。这允许您直接在 Chart.js 中提高分辨率。（正常 96dpi。目标 300dpi；300/96 = 3.125）

options:{
      devicePixelRatio: 3
}

文档：https://www.chartjs.org/docs/3.0.2/configuration/device-pixel-ratio.html

Answer 5

I can confirm that the @DevTrong response is working with Phantomjs 2.1.1

the only difference is that i set in my settings file:

    page.viewportSize = { width: 3600, height: 1600 };
    page.zoomFactor = 4;


Note: Its very important to set in you html this part:

<//script>
  window.devicePixelRatio = 4;
<//script> (fix the script tag)

PhantomJS渲染模糊的Chart.js画布

5 个答案: