8

您好我正在尝试将浮点图保存为图像（png/jpeg ..）。我研究了他们建议使用 canvas.toDataURL("image/png"); 的其他问题。或画布2图像。但是，我将 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" } } );

我怎样才能保存这个图表？谢谢你的帮助。

4

3 回答 3

7

您需要获取 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/pngmime 类型替换为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将显示它是实际图像。不确定是否有一种好方法可以说服浏览器使用友好名称保存它，或者至少使用正确的扩展名。

于 2013-03-25T14:08:03.643 回答
3

由于以下问题，我对这些解决方案中的任何一个都不满意：

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

我对这个问题的解决方案是更改图表的选项以重新绘制为仅画布图表，然后使用 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();
}

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

于 2016-06-09T20:09:25.290 回答
2

我在代码上做了一些更正。为了在本地保存图表，您可以使用下面的代码。

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;
于 2013-03-28T14:26:53.883 回答