3

Google グラフを画像として保存するためにcanvgライブラリを使用しています。このプロセスの詳細については、このページを参照してください。

OK、JS フレームワークは画像のエンコードされたデータを提供し、ダウンロードをトリガーするフォームと非表示フィールドを使用してそのデータを POST します。

HTMLコード

<form accept-charset="UTF-8" action="<%= rest_png_path %>" id="png_hidden" method="post">
  <input id="image_data_input" name="image_data" type="hidden" value="" />
  <input id="graph_container_div" type="hidden" value="gauge_div" />
  <input class="btn " name="commit" type="submit" value="Grafik" />
</form>

JS コード

  $('#png_hidden').submit(function() {
    container_div = $('#graph_container_div').val();
    // saveAsImg method - returns image data base64 encoded.
    // in background there is this part of code
    // return imgData.replace("image/png", "image/octet-stream");
    // I tried both version, with replace and without it
    data = saveAsImg(document.getElementById(container_div));
    $('#image_data_input').val(data);
    return true;
  });

最後に、POST リクエストに応答してダウンロードをトリガーするコントローラー コードです。

  def deliver_png
    #send_data ActiveSupport::Base64.decode64(params['image_data']),
    send_data params['image_data'],
      #:type =>'image/png',
      :type =>'image/png',
      :disposition => "attachment; filename=graf.png"
  end

ご覧のとおり、いくつかのヘッダー オプションを試してみました。問題は、ダウンロードされたイメージが破損していることです。HexEditor で開いたところ、PNG ヘッダーがないことがわかりますが、これに関する私の知識は存在しません。お役に立てれば幸いです。

4

1 に答える 1

0

ページが正しいデータをサーバーに送信していると仮定すると、コントローラーのコードは次のようになります。

params['image_data'] =~ /^data:(\w+\/\w+);base64,(.*)/
mime_type= $1
img_base_64= $2

send_data ActiveSupport::Base64.decode64(img_base_64),
      :type =>'image/png',
      :disposition => "attachment; filename=graf.png"

基本的に、MIME タイプと文字列「base64」を含む最初の部分を破棄する必要があります。

Javascript で base64 データを取得する際に他のエラーがないことを確認することは、しばらくの間価値があります。非表示フィールドをテキスト フィールドに変更して、正しいデータが取得されていることを確認してください。

ところで、 http: //www.battlehorse.net/page/topics/charts/save_google_charts_as_image.html も変換して jQuery を使用するようにしました。これにより、保守が容易になります。http://jsfiddle.net/kdeepak/3KTbJ/7/を参照し、jQuery に慣れている場合はこのバージョンを使用してください。

于 2013-07-30T10:15:14.193 に答える