Rails - 在上传到 s3 之前调整图像大小

Question

我正在使用 s3_direct_upload gem 通过 Rails 将图像上传到 s3。此 gem 基于 this Railscast 并使用 jQuery-file-upload。它运行良好。

我现在想在上传图片之前调整它们的大小。 fork was created 用于实现这一点，但作者提到：

“我不得不注释掉 add 方法，因为它停止了进程队列。我不知道为什么......但是由于我没有同时上传许多文件，看来我无论如何都不需要那个回调。”

我已经能够实现这个分支，但是不再调用进度条和上传事件，所以我尝试自己实现一个分支来实现我的所有功能。

下面的咖啡脚本代码不会抛出任何错误，但它也不会调整大小：

setUploadForm = ->
$uploadForm.fileupload
  disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator && navigator.userAgent)
  imageMaxWidth: settings.image_max_width
  imageMaxHeight: settings.image_max_height
  disableImagePreview: true

所以现在我正在尝试按照作者的建议替换 add 事件，但我正在努力解决逻辑问题。原始代码如下：

  add: (e, data) ->
   file = data.files[0]
   file.unique_id = Math.random().toString(36).substr(2,16)     

  unless settings.before_add and not settings.before_add(file)
      current_files.push data
      if $('#template-upload').length > 0
        data.context = $($.trim(tmpl("template-upload", file)))
        $(data.context).appendTo(settings.progress_bar_target || $uploadForm)
      else if !settings.allow_multiple_files
        data.context = settings.progress_bar_target
      if settings.click_submit_target
        if settings.allow_multiple_files
          forms_for_submit.push data
        else
          forms_for_submit = [data]
      else
        data.submit()

作者将以上内容替换为：

   send: (e, data) ->
    file = data.files[0]
    if settings.before_send
      settings.before_send(file)

如果要允许图像调整大小，我想用send 替换add，但我也想保留上传进度条和上传事件。我尝试用before_send 替换before_add，但它会创建一个无限循环：

unless settings.before_send and not settings.before_send(file)

我的叉子可以找到here

Answer 1

问题出在初始化函数中：

this.initialize = function() {
  $uploadForm.data("key", $uploadForm.find("input[name='key']").val());

  //binded add function here to let the plugin execute it's default add behaviour
  setUploadForm().bind('fileuploadadd' , function(e, data) {
      var file;
      file = data.files[0];
      file.unique_id = Math.random().toString(36).substr(2, 16);
      if (!(settings.before_add && !settings.before_add(file))) {
        current_files.push(data);
        if ($('#template-upload').length > 0) {
          data.context = $($.trim(tmpl("template-upload", file)));
          $(data.context).appendTo(settings.progress_bar_target || $uploadForm);
        } else if (!settings.allow_multiple_files) {
          data.context = settings.progress_bar_target;
        }
        //this part was causing the problem it was adding images for processing which hasn't been processed.
        /*if (settings.click_submit_target) {
          if (settings.allow_multiple_files) {
            return forms_for_submit.push(data);
          } else {
            return forms_for_submit = [data];
          }
        } else {
          return data.submit();
        }*/
      }
    });
  return this;
};

Answer 2

您可以使用 rmagick 宝石。在你的 gemfile 中

gem 'rmagick', '2.13.2'

然后bundle install。

Rmagick gem

您还必须在系统上安装 ImageMagick：

ImageMagick binaries

然后您可以在您的应用中使用它。看到这个 railscast：

Image Manipulation Railscast

相关代码：

require "rmagick"

source = Magick::Image.read("octocat.png").first
source = source.resize_to_fill(70, 70)