Question

我正在编写一个Rails应用程序，用于从网络摄像头捕获图像，将其覆盖在/ public中的图像上，然后通过回形针将结果上传到Amazon S3。我写了一些Javascript来将网络摄像头图像作为数据uri但我不知道如何将其发送到我的服务器来处理它并通过回形针将结果上传到S3。

我查看了https://gist.github.com/WizardOfOgz/1012107，How to save a raw_data photo using paperclip，并阅读了回形针源代码，但我仍然无法弄明白。

Answer 1

我最终发送了一个AJAX请求，我的模型的图像属性设置为数据uri。 Paperclip会自动检测到它是一个数据uri并正确处理它。我写了一个自定义回形针处理器来进行图像编辑，并在S3上提供编辑过的图像。

Answer 2

我自己也遇到了这个问题。我提出的解决方案适用于现代浏览器（IE9 + / chrome / FF / Safari）。不确定这是否是你可以忍受的东西。如果是这样的话：

1）您必须将dataURI发布到您的服务器。我不认为可以通过标准表单提交，但您可以使用通过XHR发送的HTML5 FormData来实现。查看此SO条目，了解使用jQuery异步发布表单的基础知识：How can I upload files asynchronously?

或者，如果你碰巧像我一样使用Angular，你可以使用angular-file-upload库https://github.com/danialfarid/angular-file-upload

按照该帖子中的说明创建了一个formData对象后，您可以将dataURI添加到其中：

var formData = new FormData($('form')[0]);
formData.uploadImage = yourDataURI;
$.ajax({ // ... set up your ajax post as described in https://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery
});

2）一旦发布数据uri，服务器端就很容易了。 Paperclip支持开箱即用的数据uris，只需将回形针附件设置为等于您的数据uri即可。如果您有一个名为ImagePost的ActiveRecord对象，并且带有名为overlayed_image的回形针附件属性，您的控制器可能如下所示：

def update
  image_post = ImagePost.find(params[:id])
  if params['uploadImage']
    image_post.overlayed_image = params[:uploadImage]
  end
  # rest of your controller code goes here
end

如何处理图像数据uri并通过回形针上传到S3？

2 个答案: