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

Question

我正在使用s3_direct_upload gem通过Rails将图像上传到s3。这个宝石是基于this Railscast和使用jQuery-file-upload。它运作良好。

我现在想在上传图片之前调整图片大小。一个fork was created一种方式来实现这一点，但笔者提到：

“我不得不注释掉add方法，因为它会暂停处理队列，我不知道为什么......但因为我不是同时上传很多文件，但似乎我并不需要这种回调。“

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

下CoffeeScript的代码不会引发任何错误，但它不会做调整任一：

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_add与before_send但它创建了一个无限循环：

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宝石。在你的宝石文件中

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)