Hola, estoy tratando de guardar la imagen del gráfico. Estoy usando Angular12, Chart.js para dibujar gráficos. Cuando lo descargo con toDataUrl(), el fondo de la imagen aparece a cuadros [ https://i.stack.imgur.com/WYmBf.png ]
aquí está mi código en el archivo 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) }
y esto es en html
<canvas id="voznje" style="background-color: white" baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [plugins]="barChartPlugins" [legend]="barChartLegend" [chartType]="barChartType" [colors]="colors"> </canvas>
Me gustaría tener un fondo normal. Gracias de antemano
Resuelto. El código ahora se ve así. Como la persona en el comentario dijo que necesitaba dar color al fondo del lienzo.
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) }
Esto sucede porque se transforma en PNG, por lo que no tiene fondo. Si desea tener un fondo para su gráfico, deberá usar un complemento personalizado para dibujar un cuadro blanco grande sobre el lienzo antes de que chart.js se muestre. con un complemento personalizado como se describe aquí: https://www.chartjs.org/docs/master/configuration/canvas-background.html