Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

359
Views
toDataURL() da un fondo a cuadros al gráfico descargado

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) }
over 4 years ago · Santiago Trujillo
1 answers
Answer question

0

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

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!