如何通過回形針保存畫布

Question

我一直在使用兩種方法，但是目標只是通過Paperclip保存畫布。

第一種方法

畫布到Base64，然后使用Ajax將base64添加到params

    $(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) }
      })
    })

通過Paperclip.adapters_io訪問params [：base64]

  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

首先，我認為這是行不通的，因為這僅在參數中包含base64 ，而缺少所有其他必需的參數。

---

第二種方法

畫布到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

通過Paperclip.adapters_io訪問params [：picture] [：base64]

  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

使用這種方法，我可以保存畫布。 但是我發現了兩個問題：

1）我必須消除復制/粘貼步驟。
2）Canvas可以生成超過100萬個字符的非常長的字符串（這很瘋狂），並且form字段不允許這么長的字符串。

這是一個使用Paperclip 4.3的Rails 4.2項目，將托管在Heroku上。
謝謝！

Answer 1

第一種方法應該是好的方法。 創建的字符串使mime類型開始，而回形針可以處理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。 我們將其與Html5 File API（而非canvas）一起使用，但是輸出（base64）的格式與Canvas#toDataUrl ，只要我們可以在圖像的src屬性中顯示預覽即可。