diff --git a/README.md b/README.md index 01e8def..c0020c9 100644 --- a/README.md +++ b/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 diff --git a/lib/assets/javascripts/papercrop.js b/lib/assets/javascripts/papercrop.js index 5ed01c8..c2b3b1e 100644 --- a/lib/assets/javascripts/papercrop.js +++ b/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)); diff --git a/lib/papercrop/model_extension.rb b/lib/papercrop/model_extension.rb index 4991c30..df5a7a9 100644 --- a/lib/papercrop/model_extension.rb +++ b/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