I'm working with Chart.js and want to convert a line chart to a PNG. The problem is that the image always downloads with a transparent background, which is not what I need. I tried many options, nothing really worked.

And suggestions?

解决方案

Here's one way to get a fully-opaque version of your ChartJS:

Wait until the chart is fully animated out and complete. You can do this by adding the onAnimationComplete property to the chart.

In the onAnimationComplete function:

Create an in-memory temporary canvas of equal size as your chart.

Fill the temp canvas with white

drawImage the ChartJS canvas over the white-filled temp canvas

Create an image from the temp canvas.

Here's how that might be done:

var ctx = document.getElementById("canvas").getContext("2d");

window.myLine = new Chart(ctx).Line(lineChartData, {

responsive: true,

onAnimationComplete:function(){

var tcanvas=document.createElement('canvas');

var tctx=tcanvas.getContext('2d');

tcanvas.width=ctx.canvas.width;

tcanvas.height=ctx.canvas.height;

tctx.fillStyle='white';

tctx.fillRect(0,0,tcanvas.width,tcanvas.height);

tctx.drawImage(canvas,0,0);

var img=new Image();

img.οnlοad=function(){

document.body.appendChild(img);

}

img.src=tcanvas.toDataURL();

}

});

Here's example code and a Demo:

var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

var randomColorFactor = function(){ return Math.round(Math.random()*255)};

var lineChartData = {

labels : ["January","February","March","April","May","June","July"],

datasets : [

{

label: "My First dataset",

fillColor : "rgba(220,220,220,0.2)",

strokeColor : "rgba(220,220,220,1)",

pointColor : "rgba(220,220,220,1)",

pointStrokeColor : "#fff",

pointHighlightFill : "#fff",

pointHighlightStroke : "rgba(220,220,220,1)",

data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]

},

{

label: "My Second dataset",

fillColor : "rgba(151,187,205,0.2)",

strokeColor : "rgba(151,187,205,1)",

pointColor : "rgba(151,187,205,1)",

pointStrokeColor : "#fff",

pointHighlightFill : "#fff",

pointHighlightStroke : "rgba(151,187,205,1)",

data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]

}

]

}

var ctx = document.getElementById("canvas").getContext("2d");

window.myLine = new Chart(ctx).Line(lineChartData, {

responsive: true,

onAnimationComplete:function(){

var tcanvas=document.createElement('canvas');

var tctx=tcanvas.getContext('2d');

tcanvas.width=ctx.canvas.width;

tcanvas.height=ctx.canvas.height;

tctx.fillStyle='white';

tctx.fillRect(0,0,tcanvas.width,tcanvas.height);

tctx.drawImage(canvas,0,0);

var img=new Image();

img.οnlοad=function(){

document.body.appendChild(img);

}

img.src=tcanvas.toDataURL();

}

});

ChartJS line chart

Fully opaque chart as image