jquery - 画布到 PDF 转换的黑色背景

Question

我在页面中有条形图和饼图，它们是使用 flotr.js 生成的，而 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 时，文件大小约为 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);
  }
});