为什么使用Chartjs导出到图像时背景是黑色的

6l7fqoea  于 2023-01-20  发布在  Chart.js
关注(0)|答案(2)|浏览(243)

我有一个问题,当我试图导出图表到一个图像的backgound是黑色的,这是代码
可变帆布=ctx;变量canvasImg =画布.到数据URL(“图像/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');
wb1gzix0

wb1gzix01#

我试图发送图表作为图像从Angular 2+(画布元素)到 Spring Boot 渲染图像到PDF。我遇到了黑色背景的问题。收集有关这个问题的信息后。我决定在一个评论中统一解决方案,以便在下次找到解决方案。

<canvas #canvas"> </canvas>

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

我渲染图表到画布,并获得画布元素在.ts文件为PNG格式,并发送PNG到后端。

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

zzwlnbp82#

这比简单地使用什么图像格式要复杂一些,你需要显式地将画布背景设置为白色,但是具体什么时候做可能比较棘手,请看我在a similar question中的回答。

相关问题