8

こんにちは私はフロットグラフを画像（png / jpeg ..）として保存しようとしています。私は彼らがcanvas.toDataURL（ "image / png"）;を使用するようにアドバイスする他の質問を調べます。またはcanvas2image。しかし、私は次のようにflotに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" } } );

このグラフを保存するにはどうすればよいですか？ご協力いただきありがとうございます。

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

実際にファイルをダウンロードするには、を使用し、 mime typeを.toDataURL()に置き換えてから、を文字列に設定する必要があります。image/pngimage/octet-streamdocument.location.href

var image = myCanvas.toDataURL();
image = image.replace("image/png","image/octet-stream");
document.location.href=image;

または、canvas2imageを使用してこれらすべてを実行できます。

編集：これに関する唯一の問題は、少なくともFireFoxでは、画像がランダムに見える名前と.part拡張子で保存されることです。に変更する.pngと、実際の画像であることがわかります。ブラウザにわかりやすい名前で保存するように説得する良い方法があるのか​​、少なくとも1つは正しい拡張子で保存するのかわからない。

于 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 に答える