javascript 将浮点图另存为图像

Save flot graph as image

提问by user1874941

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.

嗨，我正在尝试将浮图保存为图像（png/jpeg ..）。我调查了他们建议使用 canvas.toDataURL("image/png"); 的其他问题；或 canvas2image。但是，我使用 div 进行浮点运算，如下所示。

<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.

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

采纳答案by Matt Burland

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

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

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

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

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/pngmime type with image/octet-streamand then set your document.location.hrefto your string:

要实际下载文件，您需要使用.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;

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

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

Edit: The only problem with this is, in FireFox at least, the image will be saved with a random looking name and a .partextension. Changing it to .pngwill 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.

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

回答by srussking

I wasn't happy with any of these solutions due to the following problems:

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

1. My tick labels are not on the canvas
2. My axis labels are not on the canvas
3. Firefox saving with canvas2image is confusing for a normal user

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

My solution to this problem is to change the options for the chart to replot as canvas only chart, then use canvas-to-blob to convert this chart to a blob, then FileSaver to save the blob for the user, finally I replot the chart after saving the image.

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

Requires the following JS plugins:

需要以下JS插件：

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

• jquery.flot.canvas
• jquery.flot.axislabels
• 文件保护程序
• 画布到斑点

Code:

代码：

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

Perhaps if you have similar concerns about the above solution(s), you can try this one.

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

回答by user1874941

I have made some corrections at code. In order to save graph locally you can use the code below.

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

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;