toDataURL() 为下载的图表提供方格背景

Question

您好，我正在尝试保存图表图像。我正在使用 Angular12，Chart.js 来绘制图表。当我使用 toDataUrl() 下载它时，图像中的背景是方格的 [ https://i.stack.imgur.com/WYmBf.png ]

这是我在 ts 文件中的代码

public barChartLabels: Label[] = ['Pon', 'Uto', 'Sri', 'Cet', 'Pet', 'Sub', 'Ned'];
  public barChartType: ChartType = 'bar';
  public barChartLegend = true;
  public barChartPlugins = [];
  public colors: Colors[] = [
    {
      backgroundColor:     
        'rgb(0, 102, 255)'
      
    }
  ];

  public barChartData: ChartDataSets[] = [
    { data: [], label: 'Series A' }
  ];
  data1: Array<number> =[0, 0, 0, 0, 0, 0, 0]
  


Skini(){
  //var image = document.getElementById("voznje")!.toBase64Image();
  var canvas : any = document.getElementById("voznje");
  var ctx = canvas.getContext("2d");
  //var image = ctx.toDataURL("image/jpeg");
  var dataURL = canvas.toDataURL("image/png", 1.0);
  console.log(dataURL)
  var link = document.createElement('a');
  link.download = "my-chart.png";
  link.href = dataURL;
  link.click();
  //window.open(dataURL);
    //console.log("Link",dataURL)
  
}

这是在html

  <canvas id="voznje"
        style="background-color: white"
         baseChart 
          [datasets]="barChartData"
          [labels]="barChartLabels"
          [options]="barChartOptions"
          [plugins]="barChartPlugins"
          [legend]="barChartLegend"
          [chartType]="barChartType"
          [colors]="colors">
        </canvas>

我想要正常的背景。提前谢谢你

解决了。代码现在看起来像这样。就像评论中的人说的，我需要给 canvas 背景上色。

Skini(){
  //var image = document.getElementById("voznje")!.toBase64Image();
  var canvas : any = document.getElementById("voznje");
  var ctx = canvas.getContext("2d");
  //var image = ctx.toDataURL("image/jpeg");
  ctx.globalCompositeOperation = 'destination-over'
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  var dataURL = canvas.toDataURL("image/png", 1.0);
  //console.log(dataURL)
  var link = document.createElement('a');
  link.download = "my-chart.png";
  link.href = dataURL;
  link.click();
  //window.open(dataURL);
    //console.log("Link",dataURL)
  
}

Answer 1

发生这种情况是因为它被转换为 PNG，所以它没有背景，如果您想为图表设置背景，您将需要使用自定义插件在 canvas 在 chart.js 之前使用自定义插件呈现，如下所述：https://www.chartjs.org/docs/master/configuration/canvas-background.html

toDataURL() 为下载的图表提供方格背景

toDataURL() gives checkered background to downloaded chart

html

charts

canvas

chart.js

angular