Question

您好我正在尝试将flot graph保存为图像（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中创建的画布。如果您查看docs，您会看到有一个.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/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将显示它是实际图像。不确定是否有一种好方法可以说服浏览器使用友好名称保存它，或者至少有一个具有正确扩展名的浏览器。

Answer 2

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

我的刻度标签不在画布上
我的轴标签不在画布上
使用canvas2image保存Firefox会让普通用户感到困惑

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

需要以下JS插件：

代码：

 //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();
}

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

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;

将flot图保存为图像

3 个答案: