Fixed image ratio while cropping and required explicitly defined Papercrop as a processor

README.md

@@ -22,11 +22,12 @@ In your application.css
 ### Using Papercrop
 You are a few steps away to start cropping attachments. Let's start with the model, a user with avatar:
 
-    has_attached_file :avatar, :styles => {:thumb => '50x50', :medium => '100x100'}
+    has_attached_file :avatar, :styles => {:thumb => '50x50', :medium => '100x100'}, processors: [:papercrop]
     crop_attached_file :avatar
+
+We include a few styles and add Papercrop to the list of post-processors.
 
-By default, the crop area and the preview box will have an aspect ratio of 1:1. 
-You can modify that by passing a new aspect.
+By default, the crop area and the preview box will have an aspect ratio of 1:1. You can modify that by passing a new aspect.
 
     crop_attached_file :snapshot, :aspect => "16:9"
 
@@ -62,12 +63,6 @@ Regardless the model, you can always redefine/unlock aspect from the helper if y
 
     f.cropbox :snapshot, :width => 500, :aspect => 4..3
 
-**Chaining processors**
-
-Maybe you want to chain some custom processors to do amazing effects like crop+rotate images. Papercrop will add its processor in last place unless you declare it in the attachment definition
-
-    has_attached_file :landscape, :styles => {:big => '2000x1500'}, 
-                                  :processors => [:papercrop, :rotator]
 
 ### Running the Tests
 

lib/assets/javascripts/papercrop.js

@@ -1,22 +1,30 @@
 (function ($) {
-  window.jcrop_api = null;
 
-  window.init_papercrop = function() {
+  var win = window;
+
+  win.jcrop_api = null;
+
+  win.init_papercrop = function() {
     $("div[id$=_cropbox]").each(function() {
 
       var attachment = $(this).attr("id").replace("_cropbox", "");
-      var preview    = !!$("#" + attachment + "_crop_preview").length;
-      var aspect     = $("input#" + attachment + "_aspect").val();
-      var width      = $(this).width();
-
-      if (aspect === 'false') {
-        aspect = false
+        preview    = !!$("#" + attachment + "_crop_preview").length,
+        aspect     = $("input#" + attachment + "_aspect").val(),
+        ratio = 1.0,
+        width      = $(this).width(),
+        boxWidth = $("input[id$='_" + attachment + "_box_w']").val();
+
+      if (boxWidth < width) {
+        boxWidth = width;
+        $("input[id$='_" + attachment + "_box_w']").val(boxWidth);
+        ratio = $('input[id$="_' + attachment + '_original_w"]').val() / width;
       }
 
-      update_crop = function(coords) {
+      var update_crop = function(coords) {
+
         var preview_width, rx, ry;
 
-        if (preview && aspect) {
+        if (preview) {
           preview_width = $("#" + attachment + "_crop_preview_wrapper").width();
 
           rx = preview_width / coords.w;
@@ -25,31 +33,29 @@
           $("img#" + attachment + "_crop_preview").css({
             width      : Math.round(rx * $("input[id$='_" + attachment + "_original_w']").val()) + "px",
             height     : Math.round((ry * $("input[id$='_" + attachment + "_original_h']").val()) / aspect) + "px",
-            marginLeft : "-" + Math.round(rx * coords.x) + "px",
-            marginTop  : "-" + Math.round((ry * coords.y) / aspect) + "px"
+            marginLeft : "-" + Math.round(rx * coords.x * ratio) + "px",
+            marginTop  : "-" + Math.round((ry * coords.y * ratio) / aspect) + "px"
           });
         }
 
-        $("#" + attachment + "_crop_x").val(Math.round(coords.x));
-        $("#" + attachment + "_crop_y").val(Math.round(coords.y));
-        $("#" + attachment + "_crop_w").val(Math.round(coords.w));
-        $("#" + attachment + "_crop_h").val(Math.round(coords.h));
+        $("#" + attachment + "_crop_x").val(Math.round(coords.x * ratio));
+        $("#" + attachment + "_crop_y").val(Math.round(coords.y * ratio));
+        $("#" + attachment + "_crop_w").val(Math.round(coords.w * ratio));
+        $("#" + attachment + "_crop_h").val(Math.round(coords.h * ratio));
       };
 
       $(this).find("img").Jcrop({
         onChange    : update_crop,
         onSelect    : update_crop,
         setSelect   : [0, 0, 250, 250],
-        aspectRatio : aspect === false ? undefined : aspect,
-        boxWidth    : $("input[id$='_" + attachment + "_box_w']").val()
+        aspectRatio : aspect,
+        boxWidth    : boxWidth
       }, function() {
         jcrop_api = this;
       });
     });
   };
 
-  $(document).ready(function() {
-    init_papercrop();
-  });
+  $(document).ready(init_papercrop);
 
 }(jQuery));

lib/papercrop/model_extension.rb

@@ -39,11 +39,6 @@ def crop_attached_file(attachment_name, opts = {})
           definitions = Paperclip::Tasks::Attachments.instance.definitions_for(self)
         end
 
-        processors = definitions[attachment_name][:processors] ||= []
-        unless processors.include? :papercrop
-          processors << :papercrop
-        end
-
         after_update :"reprocess_to_crop_#{attachment_name}_attachment"
       end