如何通过 Paperclip 保存 Canvas

Question

我一直在使用两种方法，但目标只是通过 Paperclip 保存 canvas。

第一种方法

Canvas to Base64 and then add base64 to params with 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) }
      })
    })

Access params[:base64] via 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

首先，我认为这不起作用，因为这仅在参数中包含 base64 并且缺少所有其他必需的参数。

第二种方法

Canvas to Base64 and then manually (just to make it work and keep working from there) copy data from the console and paste it into a form field.

= 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

Access params[:picture][:base64] via 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

通过这种方法，我可以节省canvas。但是我发现了两个问题：

1) 我必须删除 copy/paste 步骤。
2) Canvas 可以生成超过 100 万个字符的非常长的字符串（这太疯狂了）而表单字段不允许这么大的长度。

这是一个使用 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 文件 API 一起使用，而不是 canvas，但输出 (base64) 的格式与 Canvas#toDataUrl 完全相同，只要我们可以在其中显示预览图片的 src 属性。

如何通过 Paperclip 保存 Canvas

How to save a Canvas via Paperclip

javascript

canvas

ruby-on-rails

paperclip