Chart.js Chartjs+；jsPDF=模糊图像

我在将图表导出为PDF时遇到一些问题

我有这个部门

    <div id="chart-area">
    <button type="button" id="btnPrint_" onClick="Print1()">Print</button>
    <?php echo '<h2 id="title">'.$_SESSION['team_name'].'</h2>'; ?>
        <canvas id="myChart" width="800" height="400"></canvas>
        <div id="legend"></div>
    </div>

问题是我的图表在pdf文件中完全模糊

你知道怎么解决这个问题吗

这是我第一次使用ChartJS和jsPDF，所以我可能做错了什么

---

谢谢

分辨率来自画布大小。增加画布（宽度和高度）越多，下载PDF时的分辨率就越好

但是，您可能不想将画布大小增加太多，因此，您可以使用的一个技巧是创建一个具有更高宽度和高度的隐藏画布，使用它打印图表并创建PDF，从而获得更好的PDF质量

这里有一个小提琴演示了这一点，其中一个选项是下载从原始画布/图表创建的PDF，另一个选项是从隐藏的画布/图表下载新的PDF。在比较这两个结果时，您可以看到质量是如何大大提高的

我不认为这是最好的解决方案，但是，这是我唯一能提高PDF图表文件质量的方法。我目前正在研究这两个库，特别是jsPDF在创建文档时如何处理

w

和

h

参数

---

此外，Chart.js确实附带了一个内置函数，可以从图表中提取图像（

.toBase64Image（）

），但是，当我进行测试时，质量似乎更差。

我一直在从事一个项目，试图用chartjs生成图形，然后使用Chrome的打印到PDF功能打印它们，我发现chartjs图看起来很糟糕。在阅读了stackoverflow和github上的各种线程之后，我开发了一个对我来说足够好的解决方案

在我的特殊情况下，我需要一个固定大小的图表，我不能让它们响应，因为我需要它们正确地适应打印页面。我使用样式标记设置大小：

我发现，如果在图表中设置responsive:false，然后使用这样的样式标记，Chartjs将不会影响图表的大小。使用任何其他方法，如设置宽度或高度（而不是样式宽度或高度）或使用css类，都无法正确设置它。只有当我为此设置元素的内联样式标记时，Chartjs似乎才起作用

无论如何，对于我来说，获得更好的PDF输出的诀窍是让Chartjs呈现一个更大的图表，然后将其缩小到一个更小的大小，这样它就可以正确地显示在我的页面上

比如说，出于某种原因，我们想要一个300x300像素的图表，当我们将它打印到PDF时，它看起来很差。我们需要让ChartJ将此图表绘制成更大的图表，然后将其调整为300x300。在我自己的项目中，我让Chartjs将其绘制为2倍大。因此，对于本例，我将创建一个画布元素，其大小为600x600，如下所示：

<canvas style="width: 600px; height: 600px;" class="graph" />

同时，我有一个高度和宽度设置为300px的“graph”css类。但是，由于内联样式，图表将不会以300px的速度呈现

然后，您可以按照通常的方式制作图表，但在制作图表的代码行之后，立即从图表中删除内联样式标记。我发现当你这样做的时候，chartjs会把图表画得更大 600x600大小，但随后图表立即调整为300x300。下面是代码的示例：

var ctx=canvas.getContext（'2d'）；var mychart=新图表（ctx，{…）。。。。 }); canvas.removeAttribute（“样式”）

canvas.removeAttribute删除内联样式标记，因此css类 生效并立即使画布以较小的大小重新渲染。没有闪光或任何迹象表明发生了这种情况，但我发现您得到的图表质量要高得多

这还有一个问题。例如，您必须为更大的600x600尺寸设计图表，以使其看起来正确。当你以更大的尺寸绘制图表时，线条和字体不会调整大小，所以所有的东西看起来都很小。我必须手动将图表设置为更大的尺寸来设计它，并首先为图表找出好的字体和线条尺寸，然后在这里执行调整大小的技巧

---

我还发现，简单地使用较小的图表并制作较粗的线条或较大的字体，似乎与先调整所有内容的大小，然后将其呈现为较小的大小没有相同的效果。

因为一些版本的chart.js具有参数devicePixelRatio。 默认情况下，画布由监视器以DPI编号呈现，因此96或视网膜-不适合打印输出，但非常适合屏幕

如果增加此值，将创建更多像素。展开该值，以便可以将具有打印质量的图表导出为Base64图像。该值不影响图表在监视器上的显示

在我的例子中，我将该值设置为1.5

options:{
      devicePixelRatio: 1.5
}

文件：

---

非常好用…

我知道已经有一段时间了，但是你有没有试过输出PNG文件而不是JPEG文件？我质疑用于生成JPEG文件的压缩方案，以及它们失去图形内置透明度的事实。@Ecksters，我可能在大多数情况下使用png，它工作得很好。另外，正如您所提到的，它将保持图形的透明度。

<canvas style="width: 600px; height: 600px;" class="graph" />

options:{
      devicePixelRatio: 1.5
}