Question

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

第一种方法

Canvas到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参数并且缺少所有其他必需的参数。

第二种方法

Canvas到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万个字符的非常长的字符串（这很疯狂），并且表单字段不允许这么大的长度。

这是一个使用Paperclip 4.3的Rails 4.2项目，将在Heroku上托管。
谢谢！

Answer 1

第一种方法应该是好方法。创建的字符串将mime类型设置为start，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。我们将它与Html5 File API一起使用，而不是画布，但输出（base64）与Canvas#toDataUrl的格式完全相同，只要我们可以在图像的src属性中显示预览。

如何通过Paperclip保存画布

1 个答案: