2

Railscast ウォークスルーhttp://railscasts.com/episodes/182-cropping-images?autoplay=trueを実行しました。Paperclip を使用して画像をアップロードし、トリミング領域を選択できます。問題は、送信をクリックしても画像がトリミングされないことです。画像が再処理されているとは思わない。Railsキャストのすべてのコードを使用しています。プロジェクトに合わせて変数名を変更しました(@userの代わりに@product、アバターの代わりに画像など...)

これが私の製品モデルです

class Product < ActiveRecord::Base
    default_scope :order => 'title'
    validates :title, :description, :presence => true
    validates :price, :numericality => {:greater_than_or_equal_to => 0.01}
    validates :title, :uniqueness => true
    has_attached_file :image, :styles => { :small => "100x100#", :large => "500x500>" }, :processors => [:cropper]
    attr_accessor :crop_x, :crop_y, :crop_w, :crop_h
    after_update :reprocess_image, :if => :cropping?

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

  def image_geometry(style = :original)
    @geometry ||= {}
    @geometry[style] ||= Paperclip::Geometry.from_file(image.path(style))
  end

  private

  def reprocess_image
    image.reprocess!
  end



end

これが私のcrop.html.erbファイルです。画像が添付された新しい製品フォームを送信すると、コントローラーはこのページにリダイレクトします。

<% content_for(:head) do%>
<%= javascript_include_tag "jcrop/jquery.Jcrop.min", "jcrop/jquery.Jcrop" %>

<script type="text/javascript">
    $(document).ready(function(){
        $('#crop_box').Jcrop({
            aspectRatio: 3/2,
            onSelect: update_crop,
            onChange: update_crop,
            setSelect: [0, 0, 500, 500],
        }); 
    });


function update_crop(coords) {
  var rx = 100/coords.w;
  var ry = 100/coords.h;
  $('#preview').css({
    width: Math.round(rx * <%= @product.image_geometry(:large).width %>) + 'px',
    height: Math.round(ry * <%= @product.image_geometry(:large).height %>) + 'px',
    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
    marginTop: '-' + Math.round(ry * coords.y) + 'px'
  });
  var ratio = <%= @product.image_geometry(:original).width %> / <%= @product.image_geometry(:large).width %>;
  $("#crop_x").val(Math.round(coords.x * ratio));
  $("#crop_y").val(Math.round(coords.y * ratio));
  $("#crop_w").val(Math.round(coords.w * ratio));
  $("#crop_h").val(Math.round(coords.h * ratio));
}
</script>

<% end %>

<%= image_tag @product.image.url(:large), :id => "crop_box" %>

<h4>Preview:</h4>
<div style="width:100px; height:100px; overflow:hidden">
  <%= image_tag @product.image.url(:large), :id => "preview" %>
</div>

<% form_for @product do |f| %>
  <% for attribute in [:crop_x, :crop_y, :crop_w, :crop_h] %>
    <%= f.text_field attribute, :id => attribute %>
  <% end %>
  <p><%= f.submit "Crop" %></p>
<% end %>

この次のコードは、railscast ビデオのペーパークリップ プロセッサです。トリミングの選択に基づいて実際のトリミングを処理するコードであると想定されています。

module Paperclip
  class Cropper < Thumbnail
    def transformation_command
      if crop_command
        crop_command + super.sub(/ -crop \S+/, '')
      else
        super
      end
    end

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

何が問題なのかわからない。私は何かが欠けていると確信しています。私よりも画像のトリミングに詳しい人がここで私を助けてくれたら本当にありがたいです.

4

0 に答える 0