Angular12+Chart.js使用toDataURL导出图表出现方格背景怎么解决

问题描述 #

使用Angular 12结合Chart.js绘制图表，调用toDataUrl()方法下载图表时，导出的图片背景为透明方格样式。即使在canvas标签的行内样式中设置了白色背景，导出时依然不生效。

原有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 canvas : any = document.getElementById("voznje");
  var ctx = canvas.getContext("2d");
  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();
}

原有HTML模板代码 #

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

根因说明 #

通过CSS为canvas设置的背景属于DOM元素的页面样式，不会被写入canvas的实际像素内容中。调用toDataURL导出时仅会读取canvas内部绘制的像素数据，因此会保留默认的透明背景，透明背景在图片查看工具中通常显示为灰白方格样式。

解决方法 #

在调用toDataURL导出前，手动在canvas现有绘制内容的底层填充白色背景即可，调整后的导出方法代码如下：

Skini(){
  var canvas : any = document.getElementById("voznje");
  var ctx = canvas.getContext("2d");
  // 将绘制层级设置为现有内容下方
  ctx.globalCompositeOperation = 'destination-over'
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  var dataURL = canvas.toDataURL("image/png", 1.0);
  var link = document.createElement('a');
  link.download = "my-chart.png";
  link.href = dataURL;
  link.click();
}

内容的提问来源于stack exchange，提问作者ice_wolf