Paperclipでキャンバスを保存する方法

Question

私は2つのアプローチで作業していますが、というのは、キャンバスをPaperclipで保存することだけです。次いで

まずBase64でのアプローチ

キャンバスとAjaxと

$(document).on('click', '#save_canvas', function() { 
     var base64Data = canvas.toDataURL() 

     $.ajax({ 
     type: "POST", 
     url:  "pictures/", 
     data: { base64: base64Data }, 
     success: function(post){ console.log('success') }, 
     error: function(post){ console.log(this) } 
     }) 
    }) 

アクセスparamsはparamsはするBASE64を追加[：BASE64] VIをPaperclip.adapters_io

def create 
    @picture = Picture.new(picture_params) 
    # ... 

    image = Paperclip.io_adapters.for(params[:base64]) 
    image.original_filename = "canvas.png" 

    @picture.image = image 

    @picture.save 
    redirect_to @picture 
    end 

これが唯一のparamsでbase64を含め、他のすべての必要なのparamsが不足しているので、私は、これが開始する、動作していないと思います。

---

第二のアプローチ

キャンバスをBase64にし、手動で（ちょうどそれが動作し、そこから作業を続けるために）コンソールからデータをコピーし、フォームに貼り付けフィールド。

= link_to " Base64", "#", remote: true, onclick: "console.log(canvas.toDataURL('png'))" 
= form_for @picture, html: { multipart: true } do |form| 
    = form.text_field :base64 
    = form.submit 

アクセスのparams [：絵] [：BASE64] Paperclip.adapters_io

を経由してこのアプローチで

def create 
    @picture = Picture.new(picture_params) 

    image = Paperclip.io_adapters.for(params[:picture][:base64]) 
    image.original_filename = "canvas.png" 

    @picture.image = image 

    @picture.save 
    redirect_to @picture 
    end 

、私はキャンバスを保存することができます。しかし、私は2つの問題が見つかりました：

1）私はコピー/貼り付けの手順を排除する必要があります。
2）キャンバスは、100万文字以上の非常に長い文字列を生成することがあります（それは狂っています）。フォームフィールドではこのような巨大な長さが許されません。

これは、ペーパークリップ4.3を使用してのRails 4.2プロジェクトであり、Herokuの上でホストされます。
ありがとうございます！

Answer 1

最初のアプローチは良いものでなければなりません。作成された文字列は、MIMEタイプを開始位置に置き、paperclipはbase64文字列を処理できます。私たちのプロジェクトの一つで

例（うまく機能）

#in our coffeescript (own ajax method, no jquery, but same behavior) 
ajax("images", 
    method: "post", 
    data: {image: @state.src} 
).then((result) => 
    console.log "yey" 
) 

#In the image_controller, to add an uploaded picture 
def create 
    current_user.photos.new picture: params[:image] 
end 

当社のペーパークリップのバージョンは4.3.3です。イメージのsrc属性にプレビューを表示できるのであれば、出力（base64）はCanvas#toDataUrlとまったく同じ形式で、キャンバスではなくHtml5 File APIで使用します。