3

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');
Cadoiz
  • 1,446
  • 21
  • 31
WILSON CHACÓN
  • 31
  • 2
  • 3

2 Answers2

1

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.

ecraig12345
  • 2,328
  • 1
  • 19
  • 26
Anne Gunn
  • 2,347
  • 1
  • 28
  • 42
  • You could write that as a comment too. For an answer, you could consider adding the relevant code to answer the question here. – Cadoiz Jan 26 '23 at 15:51
0

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];
whitefang
  • 973
  • 8
  • 15
  • Which comment are you rederring to? Are you sure that `#canvas"` is correct like that? It looks like a typo and the syntax highlighting fails. The reader of this answer/comment can also consider [this answer on "How to display base64 encoded image in html"](https://stackoverflow.com/a/41053963/4575793) – Cadoiz Jan 19 '23 at 12:58