CODEWITHSUNDEEP
javascriptchart.js
WILSON CHACÓN
WILSON CHACÓN

Reputation: 31

why is the background black when with Chartjs export to a image

I have a problem when i try to export the chart to an image. The backgound is black and this is the code:

var canvas=ctx;
var canvasImg = canvas.toDataURL("image/png", 1.0);

//creates PDF from img
var doc = new jsPDF('landscape');
doc.setFontSize(20);
doc.text(15, 15, "Cool Chart");
doc.addImage(canvasImg, 'JPEG', 10, 10, 280, 150 );
doc.save('canvas.pdf');

Upvotes: 3

Views: 4053

Answers (2)

Anne Gunn
Anne Gunn

Reputation: 2447

This is a bit more complicated than simply what image format is being used. You need to explicitly set the canvas background to white. But exactly when to do this can be tricky. Please see my answer in a similar question.

Upvotes: 1

whitefang
whitefang

Reputation: 1081

I tried to send chart as image from Angular 2+ (canvas element) to spring boot for render image to PDF. I encountered blacked background problem. After collecting information about this problem. I decided to unite solution in the one comment to find solution easily at next time.

 <canvas #canvas"> </canvas>

 @ViewChild('canvas', { static: false }) canvas: ElementRef<HTMLCanvasElement>;

I rendered chart to canvas and get canvas element at .ts file as PNG format and send PNG to backend.

const base64Canvas = this.canvas.nativeElement.toDataURL("image/png").split(';base64,')[1];

Upvotes: 0

Related Questions