将chart.js导出为固定大小的图表

Question

我正在尝试从使用chart.js绘制的图表中获取图像（例如png）。想法是将该图像发送到后端，然后将其包含在较大的报告中。

从图表的画布中生成图像非常容易-我可以做类似的事情

var canvas = document.getElementById('canvasIwantToRenderForTheBackend');
canvas.toDataURL("image/png");
// or
canvas.getImageData();

我的问题是，这将使图表图像在用户创建报表的那一刻看起来像它的样子。

我需要创建一个固定大小的画布，在其中绘制图表，然后将该画布导出到图像中-基本上我不希望图像被挤压，只是因为用户使浏览器窗口变小并且看起来被挤压了在浏览器中（chartjs尝试使图表在它所压缩的框架内看起来“不错”）。我也不希望用户看到的画布变大或做奇怪的事情。

p.s .：我尝试制作未附加到DOM的画布副本，调整其大小，然后从中生成图像-但以某种方式只是空图像。实际上，我试图在浏览器控制台中操纵画布的宽度，然后图表消失

pps：请注意，我不想调整图像的大小-我可以做到，我想在chartjs绘制图表的地方调整画布的大小，因为根据画布的大小，图表看起来有所不同-我想要的图像我可以独立于用户现在看到的内容。

Answer 1

我正在使用的解决方案是在DOM中创建固定大小的画布，但是我将其放置在可见屏幕之外。

基本上，我将要用于渲染的画布放在下面的div中

<div style="position: absolute; left: -2000px">
 <canvas id="canvasIwantToRenderForTheBackend" <!-- here go all the attrs I want to use for this canvas--> ></canvas>
</div>

通过这种方式，chartjs被迫将图表实际渲染到该画布中。