将flot图保存为图像 [英] Save flot graph as image

问题描述

您好，我正在尝试将flot图保存为图片（png / jpeg ..）。我研究了他们建议使用canvas.toDataURL（image / png）的其他问题;或canvas2image。不过，我正在使用div作为flot，如下所示。

 < div id =graph> < div id =graphcstyle =width：600px; height：153px; top：560px; left：120px; auto;> < / DIV> < / DIV> 
 $ b $ plot = $ .plot（$（＃graph #graphc），
 [{data：data5]，
 xaxis：{mode：time，minTickSize： [10，second]，
 timeformat：％0H：％0M}}）; 
  

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

解决方案

您需要获得flot在您的div中创建的画布。如果您查看文档，您会看到有一个。 getCanvas（）函数。或者您可以使用jQuery在您的div中选择一个画布。

一旦您拥有画布，您可以使用 .toDataURL


所以你有这个：



  plot = $ .plot（$（＃graph #graphc），
 [{data：data5]，
 xaxis：{mode：time，minTickSize：[10，second ]，
 timeformat：％0H：％0M}}）; 
  

然后您应该可以这样做：

  var myCanvas = plot.getCanvas（）; 
  

要实际下载文件，您需要使用 .toDataURL（） ，然后用 image / octet-stream 替换 image / png mime类型，然后设置您的 document.location.href 添加到您的字符串中：



  var image = myCanvas.toDataURL（）; 
 image = image.replace（image / png，image / octet-stream）; 
 document.location.href = image; 
  

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

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

Hi I am trying to save flot graph as image (png/jpeg..). I look into other questions they advice to use canvas.toDataURL("image/png"); or canvas2image. However I am using div for flot as follows.

<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" } } );

How can I save this graph? Thanks for your help.

解决方案

You need to get the canvas that flot creates within your div. If you look at the docs you'll see there is a .getCanvas() function. Or you could probably use jQuery to select a canvas inside your div.

Once you have the canvas, you can use .toDataURL or any other technique.

So you have this:

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

And then you should be able to do this:

var myCanvas = plot.getCanvas();

To actually download a file, you would need to use .toDataURL(), then replace image/png mime type with image/octet-stream and then set your document.location.href to your string:

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

Or you can use canvas2image to do all of this for you.

Edit: The only problem with this is, in FireFox at least, the image will be saved with a random looking name and a .part extension. Changing it to .png will reveal that it is the actual image. Not sure if there's a good way to convince the browser to save it with a friendly name, or at least one with the correct extension.

这篇关于将flot图保存为图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！