將flot圖保存爲圖像

嗨我試圖將flot圖保存爲圖像（png/jpeg ..）。我研究了他們建議使用canvas.toDataURL（「image/png」）的其他問題;或canvas2image。不過，我正在使用div作爲flot，如下所示。將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" } });

如何保存此圖？謝謝你的幫助。

來源

2013-03-25 user1874941

您需要獲取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啞劇鍵入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-25 14:08:03

我找不到.getCanvas（）函數。你可以給它的代碼嗎？ – user1874941 2013-03-25 14:15:24

@ user1874941：我更新了我的答案 – 2013-03-25 14:21:44

我做了var myCanvas = plot.getCanvas（）; myCanvas.toDataURL（「image/png」）;但它不保存任何圖像。也沒有錯誤。 – user1874941 2013-03-25 14:39:16

我在代碼中做了一些更正。爲了在本地保存圖形，你可以使用下面的代碼。

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-28 14:26:53 user1874941

我想下載flot圖表作爲PNG圖像後單擊按鈕，但通過thi代碼我能夠下載八位字節流文件 – 2018-01-31 11:12:48

我卻高興不起來與任何這些解決方案由於以下問題：

我的刻度標記不在畫布上
我的軸標籤都沒有在畫布上
使用canvas2image保存的Firefox對於普通用戶來說是個迷惑

我對此問題的解決方法是更改圖表的選項可以重新繪製爲僅限於畫布的圖表，然後使用畫布到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-09 20:09:25 srussking

將flot圖保存爲圖像

回答

相關問題