Question

我正在使用canvg库将Google图表保存为图片。有关此过程的更多信息，请参阅此page。

好的，所以JS框架为我提供了图像的编码数据，并使用表单和隐藏字段对数据进行POST，从而触发下载。

HTML CODE

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

  $('#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标题，但我对此的知识不存在。希望你能帮忙。

Answer 1

假设页面正在向服务器提交正确的数据，控制器代码应如下所示：

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数据时没有其他错误是值得的。请通过将隐藏字段更改为文本字段来检查它是否获得了正确的数据。

BTW，我还将http://www.battlehorse.net/page/topics/charts/save_google_charts_as_image.html转换为使用jQuery，这使得维护更容易。如果您对jQuery感到满意，请参阅http://jsfiddle.net/kdeepak/3KTbJ/7/并使用此版本。

保存图像/八位字节流，base64通过Rails编码为图像文件

1 个答案: