将 flot 图表保存为图片。

Question

您好，我正在尝试将Flot图形保存为图片（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" } } );

我该如何保存这个图表？感谢您的帮助。

- user1874941

Answer 1

您需要获取 flot 在您的 div 中创建的画布。如果您查看文档，您会看到有一个.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将显示它是实际的图像。不确定是否有一种好的方法来说服浏览器以友好的名称保存它，或者至少具有正确的扩展名。

- Matt Burland

---

我找不到 .getCanvas() 函数。你能给我它的代码吗？ - user1874941

我执行了 var myCanvas = plot.getCanvas(); myCanvas.toDataURL("image/png"); 但是它没有保存任何图像，也没有出现错误。 - user1874941

.toDataURL并不会直接保存图像，它会对其进行编码，以便您可以将其用作另一个画布或“img”标记的源。然后，您可以保存它，或者像您在问题中建议的那样，使用类似canvas2image的库来为您处理它（canvas2image基本上做了完全相同的事情）。 - Matt Burland

要使用友好的名称保存它，您可以使用我的canvas2image分支 https://github.com/mbochynski/canvas2image。 - mbochynski

Answer 2

由于以下问题，我对这些解决方案都不满意：

1. 我的刻度标签不在画布上
2. 我的轴标签不在画布上
3. 使用canvas2image在Firefox中保存图像对于普通用户来说很困惑

我的解决方案是更改图表的选项，使其重新绘制为仅canvas图表，然后使用canvas-to-blob将此图表转换为blob，然后使用FileSaver将blob保存给用户，最后在保存图像后重新绘制图表。

需要以下JS插件：

• jquery.flot.canvas
• jquery.flot.axislabels
• FileSaver
• canvas-to-blob

代码：

 //set data array, and options 
$('a.download_as_img').click(function(e){
  e.preventDefault();
  saveAsImage(graph_selector, data, options, xaxis,yaxis)
})

function saveAsImage(graph_selector, data_arr, options, xaxis, yaxis){
  var canvas = replotChartAsCanvas(graph_selector, data_arr, options, xaxis, yaxis);
  var title = 'chart';// or some jquery way to get your title or w/e
  canvas.toBlob(function(blob) {
    saveAs(blob, title + ".png");
  });

  //convert back to normal
  var plot = $.plot(graph_selector, data_arr, options);
}

//helper for saveAsImage
// returns canvas
function replotChartAsCanvas(graph_selector, data_arr, options, xaxis, yaxis){
  //change canvas options to true and replot
  var canvas_options = {
    canvas: true,
    axisLabels: {
        show: true
    },
    xaxes: [
    {
        axisLabelUseCanvas: true,
        axisLabel: xaxis
    }
    ],
    yaxes: [
    {
        axisLabelUseCanvas: true,
        position: 'left',
        axisLabel: yaxis
    }
    ]
    }
    var merged_opts = {}
    $.extend(merged_opts, options, canvas_options);  //done this way to ensure canvas_options take priority
    var plot = $.plot(graph_selector, data_arr, merged_opts);
    return plot.getCanvas();
}

也许如果您对上述解决方案有类似的担忧，您可以尝试这个。

- srussking

Answer 3

我已经对代码进行了一些更正。为了将图像保存到本地，您可以使用以下代码。

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

var myCanvas = plot.getCanvas();
var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  /// here is the most important part because if you dont replace you will get a DOM 18 exception.
document.location.href=image;

- user1874941

---

我想在点击按钮后将flot图表下载为png图像，但是使用这个代码我只能下载octet-stream文件。 - Devyani Kotadiya