帆布的黑色背景到PDF转换

Question

我在页面中有条形图和饼图，它们是使用flotr.js生成的，而flotr.js又是由canvas生成的。我想将这个画布转换成PDF，我能够转换它，但下载后PDF的背景变黑了

以下是代码。

$('#pdfoption').click(function(){
    var dataURL = $('#typehighlightWidget #id001 .flotr-canvas').get(0);
    console.log(dataURL);
    var doc = new jsPDF();
    doc.setFontSize(33);
    doc.setFillColor(255, 255,255,255);
    //doc.rect(10, 10, 150, 160, "F");
    doc.addImage(dataURL, 'png', 10, 10, 150, 100);
    doc.save('sample.pdf');
})

这是使用flotr.js生成的图表

这是生成的PDF

Answer 1

1. 当我将HTMLCanvasElement.toDataURL（）中的数据用于doc.addImage时，文件大小为〜20Mb，背景颜色为白色。 2）当我将数据用作.addImage的自身HTMLCanvasElement时，文件大小为〜500K！但是背景色是黑色的，就像这个主题有问题一样。解决方案：在第二种情况下使用白色背景色： https://github.com/chartjs/Chart.js/issues/2830#issuecomment-227867969

Chart.plugins.register({
  beforeDraw: function(chartInstance) {
    var ctx = chartInstance.chart.ctx;
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, chartInstance.chart.width, chartInstance.chart.height);
  }
});