使用jcrop paperclip将裁剪的图像存储到aws s3的问题

时间:2017-05-30 19:38:47

标签: amazon-s3 paperclip jcrop

我正在关注 railscast #182进行图片裁剪和上传。 我使用aws s3来存储图像。根据文档,一切正常。我上传图像,它保存到s3,然后我裁剪并提交。我看到裁剪后s3桶中没有更新,图像仍然没有被删除。 我花了很多天才找到解决方案,但没有一个完全解决问题。 与railscast doc相比,我对代码做了一些改动。

 #crop.html.erb
  <br><br>
<% content_for (:head) do %>
<%= stylesheet_link_tag "jquery.Jcrop" %>
<%= javascript_include_tag "jquery.Jcrop.min" %>
<script type="text/javascript" charset="utf-8">
  $(function() {
    $('#cropbox').Jcrop({
      onChange: update_crop,
      onSelect: update_crop,
      setSelect: [0, 0, 500, 500],
      aspectRatio: 1
    });
  });

function update_crop(coords) {
  var ratio = <%= current_user.avatar_geometry(:original).width %> / <%= current_user.avatar_geometry(:large).width %>;
  $('#crop_x').val(Math.floor(coords.x * ratio));
  $('#crop_y').val(Math.floor(coords.y * ratio));
  $('#crop_w').val(Math.floor(coords.w * ratio));
  $('#crop_h').val(Math.floor(coords.h * ratio));
}
</script>
<% end %>

  <div class="">
    <%= image_tag current_user.avatar.url(:large), :id => "cropbox" %>
  </div>


<%= form_for(current_user, as: :user, url: registration_path(:user), html: { method: :put, class: "form floating-label" }) do |form| %>
  <% for attribute in [:crop_x, :crop_y, :crop_w, :crop_h] %>
    <%= form.hidden_field attribute, :id => attribute %>
  <% end %>
<br>
  <div class="input-field">
    <%= form.label :current_password %> <br />
    <%= form.password_field :current_password, autocomplete: "off",:placeholder => " we need your current password to confirm your changes" %>
  </div>

  <p><%= form.submit "Crop" %></p>

<% end %>

布局

    #application.html.erb
<head>
      <title>MY TITLE</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
      <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
      <%= csrf_meta_tags %>
      <%= yield(:head)%>
    </head>

用户模型

class User < ActiveRecord::Base
  require "#{Rails.root}/lib/paperclip_processors/cropper.rb"
  if Rails.env == "production"
        S3_CREDENTIALS = {bucket: ENV.fetch('S3_BUCKET_NAME'),
                          access_key_id: ENV.fetch('AWS_ACCESS_KEY_ID'),
                          secret_access_key: ENV.fetch('AWS_SECRET_ACCESS_KEY'),
                          s3_region: ENV.fetch('AWS_REGION')}

  else
        S3_CREDENTIALS = {bucket: ENV.fetch('S3_BUCKET_NAME'),
                          access_key_id: ENV.fetch('AWS_ACCESS_KEY_ID'),
                          secret_access_key: ENV.fetch('AWS_SECRET_ACCESS_KEY'),
                          s3_region: ENV.fetch('AWS_REGION')}
  end

  has_attached_file :avatar,
                    styles:{large: "500x500>", medium: "300x300#", thumb: "100x100#" },
                    :processors => [:cropper],
                    default_url: "MY DEFAULT URL",
                    storage:          :s3,
                    s3_credentials:   S3_CREDENTIALS

 validates_attachment_content_type :avatar, :content_type => /\Aimage\/.*\Z/

  attr_accessor :crop_x, :crop_y, :crop_w, :crop_h
  after_update :reprocess_avatar, :if => :cropping?

  def cropping?
   !crop_x.blank? && !crop_y.blank? && !crop_w.blank? && !crop_h.blank?
  end

  def avatar_geometry(style = :original)
    @geometry ||= {}
    avatar_path = (avatar.options[:storage] == :s3) ? avatar.url(style) : avatar.path(style)
    @geometry[style] ||= Paperclip::Geometry.from_file(avatar_path)
end

private
  def reprocess_avatar
   avatar.reprocess!
  end

LIB / paperclip_processors / cropper.rb

module Paperclip
  class Cropper < Thumbnail
    def transformation_command
      if crop_command
        crop_command + super.join(' ').sub(/ -crop \S+/, '').split(' ') # super returns     an array like this: ["-resize", "100x", "-crop", "100x100+0+0", "+repage"]
      else
        super
      end
    end

    def crop_command
      target = @attachment.instance
      if target.cropping?
        ["-crop", "#{target.crop_w}x#{target.crop_h}+#{target.crop_x}+#{target.crop_y}"]
      end
    end
  end
end

的Gemfile

gem "paperclip", "~> 4.3"
gem 'aws-sdk','< 2.0'
gem 'materialize-sass'
gem 'devise'

Thanx提前

0 个答案:

没有答案