3

我正在使用canvg库将谷歌图表保存为图像。可以在此页面上找到有关此过程的更多信息。

好的，所以 JS 框架为我提供了图像的编码数据，我使用触发下载的表单和隐藏字段发布该数据。

代码

<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 回答