title: I can not get image cropping to work: Jcrop, paperclip, and rails3
body: <p>I went through the railscast walk-through <a href="http://railscasts.com/episodes/182-cropping-images?autoplay=true" rel="nofollow">http://railscasts.com/episodes/182-cropping-images?autoplay=true</a> . I am able to upload an image using Paperclip and select my crop area. The problem is that when I click submit the image is not cropped. I don't think the image is being reprocessed. I am using all the code from the rails cast. I just changed the variable names to fit my project(@product instead of @user, image instead of avatar etc... )</p>
  
  <p>Here is my products model</p>
  
  <pre><code>class Product &lt; ActiveRecord::Base
      default_scope :order =&gt; 'title'
      validates :title, :description, :presence =&gt; true
      validates :price, :numericality =&gt; {:greater_than_or_equal_to =&gt; 0.01}
      validates :title, :uniqueness =&gt; true
      has_attached_file :image, :styles =&gt; { :small =&gt; "100x100#", :large =&gt; "500x500&gt;" }, :processors =&gt; [:cropper]
      attr_accessor :crop_x, :crop_y, :crop_w, :crop_h
      after_update :reprocess_image, :if =&gt; :cropping?
  
      def cropping?
      !crop_x.blank? &amp;&amp; !crop_y.blank? &amp;&amp; !crop_w.blank? &amp;&amp; !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
  </code></pre>
  
  <p>Here is my crop.html.erb file. The controller redirects to this page after I submit a new product form with an attached image.</p>
  
  <pre><code>&lt;% content_for(:head) do%&gt;
  &lt;%= javascript_include_tag "jcrop/jquery.Jcrop.min", "jcrop/jquery.Jcrop" %&gt;
  
  &lt;script type="text/javascript"&gt;
      $(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 * &lt;%= @product.image_geometry(:large).width %&gt;) + 'px',
      height: Math.round(ry * &lt;%= @product.image_geometry(:large).height %&gt;) + 'px',
      marginLeft: '-' + Math.round(rx * coords.x) + 'px',
      marginTop: '-' + Math.round(ry * coords.y) + 'px'
    });
    var ratio = &lt;%= @product.image_geometry(:original).width %&gt; / &lt;%= @product.image_geometry(:large).width %&gt;;
    $("#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));
  }
  &lt;/script&gt;
  
  &lt;% end %&gt;
  
  &lt;%= image_tag @product.image.url(:large), :id =&gt; "crop_box" %&gt;
  
  &lt;h4&gt;Preview:&lt;/h4&gt;
  &lt;div style="width:100px; height:100px; overflow:hidden"&gt;
    &lt;%= image_tag @product.image.url(:large), :id =&gt; "preview" %&gt;
  &lt;/div&gt;
  
  &lt;% form_for @product do |f| %&gt;
    &lt;% for attribute in [:crop_x, :crop_y, :crop_w, :crop_h] %&gt;
      &lt;%= f.text_field attribute, :id =&gt; attribute %&gt;
    &lt;% end %&gt;
    &lt;p&gt;&lt;%= f.submit "Crop" %&gt;&lt;/p&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>This next piece of code is the paperclip processor from the railscast video. It is supposed to be the code that processes the actual cropping based on the crop selection. </p>
  
  <pre><code>module Paperclip
    class Cropper &lt; 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
  </code></pre>
  
  <p>Not sure what is going wrong. I am sure I am missing something though. I would really appreciate if someone who is more familiar with image cropping than myself could help me out here. </p>