From b001c1521b7c5f6fbb8abd9c15bdbfc74693b7cb Mon Sep 17 00:00:00 2001 From: davidmccoy Date: Thu, 19 May 2016 14:43:58 -0500 Subject: [PATCH 1/6] fixed javascript bug that prevented papercrop from cropping images that were smaller than the preview image correctly --- lib/assets/javascripts/papercrop.js | 50 ++++++++++++++++------------- 1 file changed, 28 insertions(+), 22 deletions(-) diff --git a/lib/assets/javascripts/papercrop.js b/lib/assets/javascripts/papercrop.js index 5ed01c8..555e70f 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)); +}(jQuery)); \ No newline at end of file From a1c22bc30e1b43f44e5676122c0b1856d0460eac Mon Sep 17 00:00:00 2001 From: davidmccoy Date: Thu, 19 May 2016 14:56:27 -0500 Subject: [PATCH 2/6] stopped papercrop from automatically adding itself as a processor for every style --- lib/papercrop/model_extension.rb | 5 ----- 1 file changed, 5 deletions(-) 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 From 8c2552ab0855fea1b5387e8af6226f104e519869 Mon Sep 17 00:00:00 2001 From: davidmccoy Date: Mon, 23 May 2016 16:39:29 -0500 Subject: [PATCH 3/6] updated readme to reflect the new requirement to explicitly declare papercrop as a processor --- README.md | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) 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 From af4b5f5cb0495b9d6f7f0738ced4cdb8d5131ddc Mon Sep 17 00:00:00 2001 From: davidmccoy Date: Fri, 14 Oct 2016 20:05:08 -0500 Subject: [PATCH 4/6] crop h/w bug fix --- lib/assets/javascripts/papercrop.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/assets/javascripts/papercrop.js b/lib/assets/javascripts/papercrop.js index 555e70f..cb0447f 100644 --- a/lib/assets/javascripts/papercrop.js +++ b/lib/assets/javascripts/papercrop.js @@ -31,8 +31,8 @@ ry = preview_width / coords.h; $("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", + width : "100%", + height : "auto", marginLeft : "-" + Math.round(rx * coords.x * ratio) + "px", marginTop : "-" + Math.round((ry * coords.y * ratio) / aspect) + "px" }); From 1fa71fde2f3e46d3b4b3a577dbb841d65f9e78dc Mon Sep 17 00:00:00 2001 From: davidmccoy Date: Fri, 14 Oct 2016 20:09:53 -0500 Subject: [PATCH 5/6] crop h/w bug unfix --- lib/assets/javascripts/papercrop.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/assets/javascripts/papercrop.js b/lib/assets/javascripts/papercrop.js index cb0447f..555e70f 100644 --- a/lib/assets/javascripts/papercrop.js +++ b/lib/assets/javascripts/papercrop.js @@ -31,8 +31,8 @@ ry = preview_width / coords.h; $("img#" + attachment + "_crop_preview").css({ - width : "100%", - height : "auto", + 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 * ratio) + "px", marginTop : "-" + Math.round((ry * coords.y * ratio) / aspect) + "px" }); From 809564747e8f4fba083fca5fec735299b61d0e89 Mon Sep 17 00:00:00 2001 From: davidmccoy Date: Mon, 24 Oct 2016 19:51:21 -0500 Subject: [PATCH 6/6] fixed image resize bug when images are smaller than the cropbox --- lib/assets/javascripts/papercrop.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/assets/javascripts/papercrop.js b/lib/assets/javascripts/papercrop.js index 555e70f..c2b3b1e 100644 --- a/lib/assets/javascripts/papercrop.js +++ b/lib/assets/javascripts/papercrop.js @@ -14,7 +14,7 @@ width = $(this).width(), boxWidth = $("input[id$='_" + attachment + "_box_w']").val(); - if (boxWidth > width) { + if (boxWidth < width) { boxWidth = width; $("input[id$='_" + attachment + "_box_w']").val(boxWidth); ratio = $('input[id$="_' + attachment + '_original_w"]').val() / width; @@ -58,4 +58,4 @@ $(document).ready(init_papercrop); -}(jQuery)); \ No newline at end of file +}(jQuery));