通過Rails將圖像/八位字節流，base64編碼爲圖像文件

我使用canvg庫將Google圖表保存爲圖像。有關此過程的更多信息，請參閱此page。通過Rails將圖像/八位字節流，base64編碼爲圖像文件

好吧，所以JS框架爲我提供了圖像的編碼數據，並且我使用表單和隱藏域來觸發下載數據。

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標題，但我對此的瞭解並不存在。希望你能幫助。

來源

2013-01-14 Haris Krajina

我知道原因（可能）。但不知道答案。我正在努力解決同樣的問題。事情是canvg函數的返回是一個完整的img元素，不僅是圖片數據。 – 2013-02-27 14:48:40

不應該有'enctype ='multipart/form-data'' –

不需要enctype =「multipart/form-data」，數據作爲文本字段值而不是文件上傳。 –

假設頁面提交正確的數據發送到服務器，控制器代碼應該如下：

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-30 10:15:14

通過Rails將圖像/八位字節流，base64編碼爲圖像文件

回答

相關問題