javascript - 将浮点图另存为图像

Question

您好，我正在尝试将浮点图保存为图像 (png/jpeg..)。我研究了他们建议使用的其他问题 canvas.toDataURL("image/png");或 canvas2image。但是，我将 div 用于 flot，如下所示。

<div id="graph"> <div id="graphc" style="width: 600px;height:153px; top: 560px; left:120px; auto;"> </div> </div>

plot= $.plot($("#graph #graphc"),
           [ {data: data5 ],
           xaxis: { mode: "time",minTickSize: [10, "second"],
            timeformat: "%0H:%0M" } } );

如何保存此图表？谢谢你的帮助。

Answer 1

您需要获取 flot 在您的 div 中创建的 Canvas 。如果您查看 docs你会看到有一个 .getCanvas() 函数。或者您可以使用 jQuery 在您的 div 中选择一个 Canvas 。

一旦有了 Canvas ，就可以使用 .toDataURL 或任何其他技术。

所以你有这个:

plot= $.plot($("#graph #graphc"),
       [ {data: data5 ],
       xaxis: { mode: "time",minTickSize: [10, "second"],
        timeformat: "%0H:%0M" } } );

然后你应该能够做到这一点:

var myCanvas = plot.getCanvas();

要实际下载文件，您需要使用 .toDataURL()，然后将 image/png mime 类型替换为 image/octet-stream 然后将您的 document.location.href 设置为您的字符串:

var image = myCanvas.toDataURL();
image = image.replace("image/png","image/octet-stream");
document.location.href=image;

或者您可以使用 canvas2image 为您完成所有这些工作。

编辑:唯一的问题是，至少在 FireFox 中，图像将以随机名称和 .part 扩展名保存。将其更改为 .png 将显示它是实际图像。不确定是否有一种好方法可以说服浏览器使用友好的名称或至少一个具有正确扩展名的名称来保存它。