¿Cómo puedo eliminar la opacidad de las imágenes descargadas usando la función toBase64Image() en Chart.js? Si es posible, guárdelo en JPG en lugar de PNG. Este es el código:
const myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } }, animation: { onComplete: function() { image = graficoConsumo.toBase64Image(); } } } }); document.getElementById('btn-download-chart').onclick = function() { // Trigger the download var a = document.createElement('a'); a.href = image; a.download = 'myChart.png'; a.click(); }No, por defecto, los lienzos no tienen fondo, por lo que siempre será transparente. Para solucionar esto, puede escribir un pequeño complemento personalizado que dibuje un fondo blanco antes de que chart.js dibuje sus cosas en él:
Chart.register({ id: 'customBackground', beforeDraw: (chart, args, opts) => { const ctx = chart.canvas.getContext('2d'); ctx.save(); ctx.globalCompositeOperation = 'destination-over'; ctx.fillStyle = 'white'; ctx.fillRect(0, 0, chart.width, chart.height); ctx.restore(); } }) const options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderColor: 'orange' }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderColor: 'pink' } ] }, options: {}, } const ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options); body { background-color: black; } <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.js"></script> </body>