帆布到PDF转换的黑色背景

Question

我在页面中有条形图和饼图，它们是使用flotr.js生成的，而后者又是由画布生成的。我想把这个画布转换成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时，文件大小为20 is，背景色为白色。2)用数据作为HTMLCanvasElement进行.addImage时，文件大小为500 K！但是背景颜色是黑色的，因为在这个话题的问题上。解决方案:为第二例做白色背景色：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);
  }
});