Custom cropping of uploads

[nemo]

Hey all,

First of all, thanks for an awesome plugin. In the list of "it just
works", paperclip is high up in the top regions!

However, I'm kinda stuck trying to implement a custom cropping
thingie. I'm building a CMS, in which users can upload images, with
some default styles. No biggie there. I also want users to be able to
crop the image by dragging some handles[1].
I'm stuck when it comes to the saving part. I thought about making my
attachment model has_many attachments, and create a new attachment
with the cropped image as file, therefore bypassing whatever styles
are defined at class level. I just can't wrap my head around creating
a new attachment with the uploaded file, and hooking it into the
attachment model for the original file.

any ideas?
much appreciated,
bartz

[1] http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/

[jus...@mediaslave.net]

I would be interested about this as well.

> [1]http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-pro...

[OKR]

Yes, I've been trying to figure out how to do this as well, with a
jQuery plugin such as jCrop -> http://deepliquid.com/content/Jcrop.html

I'm somewhat of a newbie about this stuff but it seems like it might
work with a custom style => proc function?

I'm just not sure of how to implement it or get jquery to talk to the
attachment file before it saves/updates.

On Jan 26, 5:27 am, nemo <zuperinfin...@gmail.com> wrote:

> [1]http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-pro...

[chris [at] thewebfellas.com]

we've done this with uvumi crop (http://tools.uvumi.com/crop.html) -
it was pretty straight forward from what i remember - can dig out the
code if it's of use.

[Bart Zonneveld]

On 28 jan 2009, at 21:00, chris [at] thewebfellas.com wrote:

>
> we've done this with uvumi crop (http://tools.uvumi.com/crop.html) -
> it was pretty straight forward from what i remember - can dig out the
> code if it's of use.

Yes please!
I noticed the uvumi crop script uses MooTools, whereas I'd like to
stick to Prototype. So, your code would be of much use to me.

cheers,
bartz

[OKR]

I would also love to see the code if possible, I'm using jquery myself
but I'm sure it would be easy enough to adapt.

Thanks in advance.

On Jan 28, 12:00 pm, "chris [at] thewebfellas.com"

[Bart Zonneveld]

On 30 jan 2009, at 01:03, OKR wrote:

>
> I would also love to see the code if possible, I'm using jquery myself
> but I'm sure it would be easy enough to adapt.

After a day of fiddling, I managed to come up with this:

http://gist.github.com/54989

One aspect that I haven't tackled yet is how to actually display the
custom created thumbnail elsewhere in my app.
Right now I set a boolean value has_custom on the image to true, but
this isn't very clean.

Any ideas on how to tackle this?

cheers,
bartz

[chris [at] thewebfellas.com]

Here you go

Two files - one is the model, the other some patches to paperclip to
support it. The UI submits 4 values from the JS component (hidden
fields) that give left, top, right and bottom crop amounts.

http://gist.github.com/55009

We crop the original itself and regenerate thumbnails off it - this is
because in the app we were working on they wanted a one-time crop.

Chris

[Jeff Smick]

Here's my solution to this: http://gist.github.com/60470

Instead of overriding Paperclip it works with it using a custom
processor. The processor doesn't differ from the original Thumbnail
process by much. The only difference, in fact, is that it puts the
convert_options at the beginning of the convert command.

The crop settings get saved in the model so they can be retrieved
later for reprocessing or modification on the frontend. The gist gives
a sense of how the crop settings are passed back to the view layer
where they can be applyed to Jcrop.

This also wont crop the original. Instead it creates a "cropped"
version of the image (@image_model.image.url(:cropped))

--Jeff


On Jan 30, 3:02 am, "chris [at] thewebfellas.com"

[JSchwindt]

I used many of the suggestions found in this thread and created a
sample application that uses the original Paperclip plugin but adds a
custom processor that inherits most of its functionality from the
original thumbnail.rb processor:

http://github.com/jschwindt/rjcrop/tree/master

I'd appreciate your comments.

Regards,
Juan Schwindt.

[two2twelve]

Hi JSchwindt,

I've been attempting to implement a solution for custom cropping based
off your rjcrop example.

It's almost working except for an issue with it not cropping/scaling
ALL the defined styles correctly. I've also had to add a if/else line
when defining the :processors, since it was using the :jcropper
processor even on standard uploads (without cropping) instead of the
default :thumbnail processor.

My paperclip instance is:

has_attached_file :avatar,
:styles => { :original =>
["600x420>", :jpg], :profile => ["180x140>", :jpg], :thumb =>
["80x60#", :jpg], :mini => ["48x48#", :jpg] },
:convert_options => { :profile => proc { |m|
m.avatar_crop_str }, :thumb => proc { |m| m.avatar_crop_str }, :mini
=> proc { |m| m.avatar_crop_str } },
:processors => lambda { |a|
a.avatar_crop_str == "" ? [:thumbnail] : [:jcropper] },
:path => "example/path",
:storage => :s3,
:s3_credentials => "#{RAILS_ROOT}/config/
s3.yml"

My crop page displays the "original" size for them to select a crop
area. Once, finished and submitted only the "profile" size is cropped
correctly. The "thumb" and "mini" sizes both are cropped in the wrong
area and scaled incorrectly.

Any ideas on that?

Thanks,
- Eric

[JSchwindt]

Hi Eric,

I think the problem occurs when using the # modifier in the styles
because it means that the image should be cropped centered. At the
same time the jcropper processor wants to crop at the desired position
and both instructions are not allowed at the same time in the convert
command line. Try the same example without de #s.

Hope it helps.

Regards,
Juan Schwindt.

[two2twelve]

Hi Juan,

That's indeed the problem! Works perfectly without the #'s.

However, the project this is implemented on requires the thumbnails to
be exact size's (80x60 and 48x48) after the user cropping is complete.
I've tried a few combination's in the transformation_command method to
achieve this, all without luck.

Is this somehow possible?

Thanks again,
- Eric

[JSchwindt]

Hi Eric,

I have a bigger problem now: in production environment the app doesn't
crop the the images correctly after calling reprocess! and it appears
to be the following instruction in production.rb

config.cache_classes = true

After changing that line to false everything works as intended. If I
don't find a better solution to setting cache_classes to false, I will
have to look for a complete different approach.

I'll keep you updated.

Regards,
Juan.

[Ian Drysdale]

Hi Juan,

I've incorporated your code into an app I'm developing and have run
into the same problem with the production environment.

You're right, and setting config.cache_classes = false makes it work,
but I wondered if you've found an alternative approach?

Any advice appreciated!

Kind regards,
Ian

[José Santos]

Same issue here, in production environment.

Any update on alternative solution?

Thanks

[mo]

jep.. i had the same problems and found a solution.

_MODEL

attr_accessor :crop_x, :crop_y, :crop_w, :crop_h

has_attached_file :image,
:styles => {
:normal => ["100x100#", :png],
:small => ["50x50#", :png]
},
:processors => [:cropper]

def crop_str
if !crop_x.blank? && !crop_y.blank? && !crop_w.blank? && !
crop_h.blank?
"-crop #{crop_w}x#{crop_h}+#{crop_x}+#{crop_y}"
else
""
end
end


_PROCESSOR

module Paperclip
class Cropper < Thumbnail
def transformation_command
scale, crop = @current_geometry.transformation_to
(@target_geometry, crop?)
trans = ''
if crop_string?
trans << " #{image_crop_string}"
trans << " -resize \"#{scale}\""
else
trans << " -resize \"#{scale}\""
trans << " -crop \"#{crop}\" +repage" if crop
end
trans
end

def crop_string
@attachment.instance.crop_str
end

def crop_string?
not crop_string.blank?
end

end
end

Hope this helps! :)

[JSchwindt]

Hi, mo.

What does @attachment refers to? Because I tried it and that variable
is not defined.

Regards,
Juan Schwindt.

[mo]

@attachment is set in the Paperclip-Processor class and refers to an
Paperclip-Attachment object.

..you have to inherit your own processor from Thumbnail or Processor.

module Paperclip
class YOUR_PROCESSOR < Thumbnail
...
end
end

[mo]

ahh.. i think you're using an older paperclip version, right?

I tested your example at github with the latest paperclip version
(2.2.8) and everything works fine.

[JSchwindt]

Yes, that was the problem! I didn't realize that paperclip added the
attachment parameter. That's the right way of accessing the model.

Thank you very much. I will update my project on github.com to make it
available for everybody.

Juan Schwindt.

[JSchwindt]

I update the github.com repository with my sample application:
http://github.com/jschwindt/rjcrop/tree/master

Regards,
Juan Schwindt

[Ian Drysdale]

Juan, thanks so much for this. Works a treat.

[mo]

..happy to have helped - thanks for the update.