Chartjs + jsPDF =模糊图像

Question

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

我有这个div

    <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>

我正在使用ChartJS创建我的图表

$( document ).ready(function(){
    var helpers = Chart.helpers;
    var canvas = document.getElementById('myChart');
    var data = {
        labels: unique_dates,
        datasets: [
            {
                label: "Ticket Count",
                fillColor: "rgba(107, 110, 111, 0.6)",
                strokeColor: "rgba(107, 110, 111, 0.6)",
                highlightFill: "rgba(107, 110, 111, 0.6)",
                highlightStroke: "rgba(151,137,200,1)",
                data: ticket_count
            },
            {
                label: "Subsidy Count",
                fillColor: "rgba(8, 126, 210,0.5)",
                strokeColor: "rgba(8, 126, 210,0.8)",
                highlightFill: "rgba(220,220,220,0.75)",
                highlightStroke: "rgba(220,220,220,1)",
                data: subsidy_count
            }
        ]
    }


  var bar = new Chart(canvas.getContext('2d')).Bar(data, {
  tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>kb",
  animation: true,
});
// 
var legendHolder = document.createElement('div');
legendHolder.innerHTML = bar.generateLegend();

document.getElementById('legend').appendChild(legendHolder.firstChild); 

});

当我点击btnPrint_按钮时,我想将我的图表导出为PDF

像这样

function Print1() {
            var title = $("#title").text();
            var doc = new jsPDF('l', 'mm',[210, 297]);
           html2canvas($("#myChart"), {
                onrendered: function(canvas) {         
                    var imgData = canvas.toDataURL('image/png',1.0);                  
                    doc.text(130,15,title+" GT Log");
                    doc.addImage(imgData, 'PNG',20,30,0,130); 
                    doc.addHTML(canvas);
                    doc.save(title+'gt_log.pdf');             
                    }       
            });

}

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

知道如何解决这个问题吗？

这是我第一次使用ChartJS和jsPDF,所以我可能做错了.

谢谢!

Answer 1

分辨率来自Canvas大小.增加画布(宽度和高度)越多,下载PDF时的分辨率就越高.

但是,您可能不希望过多地增加画布大小,因此,您可以使用的一个技巧是创建一个具有更高宽度和高度的隐藏画布,使用它来打印图表并创建PDF,获取更好的PDF质量.

这是一个演示这个的小提琴,可以选择下载从原始画布/图表创建的PDF,以及从隐藏的画布/图表下载新PDF的另一个选项.比较两种结果时,您可以看到质量如何提高.

https://jsfiddle.net/crabbly/kL68ey5z/

我不认为这是最好的解决方案,但是,这是我提高PDF图表文件质量的唯一方法.我正在玩两个库,特别是jsPDF 在创建文档时如何处理w和h参数.

此外,Chart.js确实带有一个内置函数来从图表中提取图像(.toBase64Image()),但是,当我测试时质量似乎更差.

Answer 2

由于 Chart.js 的一些版本具有参数 devicePixelRatio。默认情况下，画布按显示器的 DPI 数字渲染，因此 96 或 Retina - 不适合打印输出，但非常适合屏幕。

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

就我而言，我将该值设置为 1.5。

options:{
      devicePixelRatio: 1.5
}

文档： https: //www.chartjs.org/docs/3.0.2/configuration/device-pixel-ratio.html 效果非常好...