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

【问题标题】：toDataURL() gives checkered background to downloaded charttoDataURL() 为下载的图表提供方格背景
【发布时间】：2021-11-04 16:58:54
【问题描述】：

您好，我正在尝试保存图表的保存图像。我使用 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>

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

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

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

【问题讨论】：

标签： html angular canvas charts chart.js

【解决方案1】：

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

【讨论】：