Как я могу обработать URI данных изображения и загрузить его на S3 через скрепку?

Я пишу приложение Rails, которое захватывает изображение с веб-камеры, накладывает его на изображение в /public и загружает результат в Amazon S3 через скрепку. Я написал некоторый Javascript, чтобы получить изображение с веб-камеры в виде URI данных, но я не знаю, как отправить его на свой сервер, чтобы обработать и загрузить результат на S3 через скрепку.

Я просмотрел https://gist.github.com/WizardOfOgz/1012107, Как сохранить фотографию raw_data с помощью скрепки и прочитать исходный код скрепки, но я до сих пор не смог понять это.


ruby-on-rails paperclip data-uri
person user2422889    schedule 18.06.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

В итоге я отправил запрос AJAX с атрибутом изображения моей модели, установленным в uri данных. Paperclip автоматически определяет, что это uri данных, и обрабатывает его соответствующим образом. Я написал собственный обработчик скрепок для редактирования изображения и сделал отредактированное изображение доступным на S3.

person user2422889    schedule 07.07.2014

arrow_upward
0
arrow_downward

Я сам столкнулся с этой проблемой. Решение, которое я придумал, работает для современных браузеров (IE9+/chrome/FF/Safari). Не уверен, что с этим можно жить. Если так:

1) Вы должны отправить dataURI на свой сервер. Я не думаю, что это возможно с помощью стандартной отправки формы, но вы можете сделать это с помощью HTML5 FormData, отправленного через XHR. Ознакомьтесь с этой записью SO, посвященной основам асинхронной публикации формы с использованием jQuery: Как я могу загружать файлы асинхронно?

В качестве альтернативы, если вы, как и я, используете 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 поддерживает URI данных из коробки, просто установите вложение скрепки, равное URI ваших данных. Если бы у вас был объект ActiveRecord с именем ImagePost, со свойством вложения скрепки с именем 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
person igmcdowell    schedule 03.07.2014