通过Rails将以base64编码的image/octet-stream图片保存为图片文件

Question

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

好的，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标头，但我对此一无所知。希望您能帮忙。

- Haris Krajina

---

我知道原因（可能）。但不知道答案。我正在努力解决同样的问题。问题在于canvg函数的返回值是完整的img元素，而不仅仅是图片数据。 - user2115855

表单不应该有 enctype="multipart/form-data"。 - Mike Szyndel

不需要使用enctype="multipart/form-data"，数据作为文本字段值发送而不是文件上传。 - Deepak Kumar

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

顺便说一句，我还将http://www.battlehorse.net/page/topics/charts/save_google_charts_as_image.html转换为使用jQuery，这使得维护更容易。如果您熟悉jQuery，请参见http://jsfiddle.net/kdeepak/3KTbJ/7/并使用此版本。

- Deepak Kumar