#182 Cropping Images

You keep surpassing my expectations every monday. Exactly what I was looking for in my on-going project, many thanks for the time you spend at creating these screencasts.

Ryan, thank you for another great cast. Even though it was a bit late, it was well worth the wait. Also thanks to jschwindt for creating a great tool.

Thanks again, Ryan. Anybody know of a similar plugin or jslib for drawing on an image?

Great cast! I didn't know that digging into the Paperclip processors was that accessible. I'd love to figure out how to rock some rounded corners or other such coolness.

This....is cool...

Great timing too; I was just thinking over the weekend that this would be a great feature for one of my projects.

Ryan, I'm not sure, but what happens if some evil attacker modifies the crop_* parameter to something like `dd if=/dev/zero of=/dev/hda` or any other evil stuff?

Wouldn't that lead to a remote command injection vulerability in cropper.rb, line 14?

Ryan, u r so awesome!!!!! seriously, I was looking for ways to do this last week and now you've done an episode for us.

@iblue, good point. I think a quick "to_i" in the processor should solve this problem. I'll update the code.

Hi, Ryan.

I couldn't believe my eyes when I saw my little rjcrop example in your screencast, it's a great honor. I learn so much from you every week that contributing back feels very good.

Greetings from Buenos Aires, Argentina.
 

Thanks for the screencast. I've been storing images directly in the databases in my current application, and have been looking for a good way to crop the images before saving.

But will Jcrop cause problems with prototype? I always seem to run into trouble when I use jquery plugins, although jquery works fine in noconflict mode.

Ryan,
One more time you made an awesome screencast!
Thanks a lot!

Wow...cropping gets into some more heavyweight stuff, this is great. Thanks Ryan!

Wow!

I am extremely impressed on the depth of this screencast. This is probably my new favorite. Please keep the more advanced screencasts coming. Outstanding job!

Hey Ryan,
Excellent screencast....really helpful and concise.

Also, why dont you add recaptcha to your comments section to avoid all the spammars!

Thanks again and great job.

Hi Ryan!

This is an amazing screencast. I didn't know that something like that is possible in such a cool ruby-on-rails way.
It is definitely a very useful feature and absolutely an eyecatcher on a website.

Ryan,

An excellent screencast as usual, which was actually quite timely as I was just wondering how to pass cropping parameters to Paperclip.

Also thanks for mentioning my Prototype & script.aculo.us cropper. It was very good timing as I was actually in the process of releasing a new version, which is now live.

@Nithin Bekal - if you don't want to use jQuery and prototype together then look into my cropper (mentioned in the screencast & linked to in the show notes) that is Prototype & script.aculo.us based.

Hi Ryan! that good news was to see the new railscast appear.
I was wondering do you have something happened to the idol of Monday?
I also take your time to thank and congratulate the videos of "Everyday ActiveRecord" and "Mastering Rails Forms" are excellent.
Thanks and best regards from Chile!
Sincerely, Nelson.

Thanks Ryan! Great stuff.

I use the prototype alternative for this, I'm not a jQuery guy :)

Hi Ryan,
Another useful screencast! I would like to personally volunteer to weed out the spam and moderate the comments. I would suggest shutting down comments after a given time period. The amount of spam is crazy!

Awesome RailsCast as always!

Ryan, you might want to check your mail, you've got 138 new messages! :)

Hey Ryan,

Thanks for this. I am in the middle of developing an application that requires users to upload images and this is exactly the screen-cast I needed.

Also in the middle of learning how to use that GeoKit plugin... it's amazing.

It's simple, it's elegant, and it's *awesome*! Best screencast ever! I'll recommend this episode to my PHP friends as well, I don't think they would mind :)

However, you should update your commenting system, because of the spam it collects.

I once had a simple commenting / voting system which was abandoned for a couple of years, and... umm... well, when I had a look on it, I had to remove about 20000 spam messages. And, the commenting feature.

For anyone who might be interested I have created a similar processor to handle rotation.

This was created because a) it seemed hacky using RMagick by hand when paperclip had all the bits available and b) it was the cleanest way to handle rotation with images hosted in S3 storage.

The required code can be found in the following gist: http://gist.github.com/206145

Enjoy!

Next weeks episode: filtering spam?

thanks

Big fan of what you are doing. As I noticed the spam you get here, maybe something like the URL I submitted as "Website URL" can help get rid of it?
Keep up the good work!

Yeap, I agree with #37. Stewie, filtering spam will be great.

Hi,

Thanks for this great episode ! Just a tip for those who are wondering : I wanted to be able to re-crop the image without uploading it again, but the problem was that ":large" style was already cropped. I didn't found a clear documentation on this, but you can apply processors or other properties to some styles only. For instance :

:styles => { :small => "100x100#", :large => "500x500>" },
:processors => [:cropper]

could become :

:styles => {
  :small => {:geometry => "100x100#", :processors => [:cropper]},
  :large => {:geometry => "500x500>"}
}

This way ":large" image isn't cropped, but ":small" is. Then you can define an action to recrop your image, keeping the same code in the view.

Yeah, Jcrop is really nice. I recently used it to add user avatar cropping to one of our apps, but I set it up to work entirely from a single page. I didn't want an avatar change to lead the user away from the profile edit screen, so I used the responds_to_parent plugin to upload the image via ajax, and then immediately render the image for cropping. I'm pretty happy with how it turned out.

To validate images content types in IE you need to add to your validation 'image/pjpeg' and 'image/x-png'

I followed step by step as you explained in the tutorial. Its working for me till the form in crop view. I can choose the dimensions I want, but when click submit it don't crop the image. It gives the same only the small version(default thumbnail).

I get an error in the terminal,which is

[paperclip] An error was received while processing: #<Paperclip::PaperclipError:
 There was an error processing the thumbnail for paperclip-reprocess,4716,0>
Please help me with this issue.
Thanks

I also tried your project episode-182 but its giving the same error. I also installed the latest Imagemagick. But not working for me.

Hi! I have a very strange problem.

When I try to do this cast I end up getting with a page that loads forever and nothing in the log.

Any idea if this is caused by imagemagic or something else?

btw I updated imagemagic.

Thanks in advance!

I've spend the whole day trying to make this work. And implementing it in my app just doesn't work.

I've tried it on a side project and no problem.

Maybe it's something from my configuration... memcached or something... I am considering everything but still without getting any errors it's damn hard to know what the problem is.

Someone else experienced similar difficulties?

Hi everyone,

I am not certain if anyone is still monitoring this thread since the last post that did not appear to be spam was on the 29th of October, but I hoping someone can point me in the right direction if you are still listening.

I have run into a snag when trying this example out on an app I've deployed to the Heroku platform. I am using AWS S3 as my asset host because Heroku has a read-only filesystem. I am pretty sure the problem I am having is coming from the way AWS handles assets in the cloud.

Here is the pastie: http://pastie.org/681007

In my app, instead of having an user model with an avitar attribute, I have a submissions model with a photo attribute. I am able to create a submission via the new action and upload a photograph as the paperclip attachment, but when we move create action in the submissions controller, paperclip raises NotIdentifiedByImageMagickError

It would appear that the call to Paperclip::Geometry.from_file() was expecting submissions/1/large.JPG but the url to this photo on AWS S3 is submissions/1/large.JPG?1257217300. The appended 1257217300 appears to be a cache identifier.

Does it appear that I am on the right track here? Does anyone have any suggestions for a work around?

Great Ryan.. Amazing..........

@Michael Filbin

I had the same problem. To solve this I replaced "avatar.path(style)" with "avatar.to_file(style)" in the avatar_geometry method into the model... seems to work... With Heroku I've another problem with crop, the cropped image seems mantain the original ratio.

Thanks, very good...

Just a gotcha.. Windows/ImageMagick doesn't seem to like single quotes in the argument in the reprocessing.

" -crop '#{target.crop_w.to_i}x#{target.crop_h.to_i}+#{target.crop_x.to_i}+#{target.crop_y.to_i}'"

I changed the single quotes ' to \" (escaped double quote), and it worked right away.

I have just tried this tutorial, great walkthrough by the way.

I end up with the :large image outputting twice and no crop options overlaid .... the submit button works but .... doesnt seem to let me crop :(
anyone want to help me tackle this?

OK, Just fixed 50% of my own problem ....
(n00b = me) forgot to include jquery library
I get the crop options, however, It is not saving the cropped version :( and its still outputting 2 of the :large items ...

Never mind ... another N00B mistake ...
MY APOLOGIES TO ALL ..
there was a sneaky image output tag that was hiding ... and i didnt see it until after a good night sleep and a strong coffee in the morning ...

KEEP UP THE AWESOME RAILSCASTS ...

Have you tried the new kid in the block for image handling: dragonfly? I find it excellent, well done and very flexible. I update my RJCROP project to work with dragonfly: http://github.com/jschwindt/dragonfly_crop

Thank you for your great screencasts! i've already learned A LOT from you!

Unfortunately i got a problem with the cropping process in this screencast:

Everything works fine, the image can get cropped, it even crops the right section and it gets saved...

But then, after saving, the cropped image is in a wrong size. Even though i defined the size to be 100x100# (as in your movie)... It is 167x100 ... an STRECHED..

has anybody got an idea what this could be? i already looked 3 times through all files of this process..

Thanks for your answers! and sorry for my bad english, i'm from switzerland ;)

If you're using S3 as a storage mechanism, you can't use the avatar_geometry method as shown (it assumes a local file). Paperclip can convert from S3 file to local TempFile with the `Paperclip::Geometry.from_file`: http://gist.github.com/339380

Thank you for your answer Trek Glowacki.

But unfortunately i'm not using Amazon S3... The photos are stored on the local server..

i think the photos are in the right ratio, but the file-dimensions are calculated wrong.. so, avatar_gemoetry seems to work

I'm having the same problem as @Till, inspite of having the size given as 392x306# it is cropping image of size 392x392, which is something very weird, and help needed from the experts regarding this, I'm staring at the issue for quite sometime with no solution.

Thanks in advance

Awesome, thank you very much for the cast!

You rock! Thank You!

obviously the form can be hacked quite easily so i.e. a user can crop another users avatar/image by playing with HTML source,

I added an extra field to the model
photo.security_code

on creation assign security_code to Digest::SHA1.hexdigest("--#{Time.now.to_s}--#{rand(50000)}--")[0,18]

in the model
attr_accessor :crop_left, :crop_top, :crop_width, :crop_height, :security_code
   

def reprocess_image
     photo.reprocess! if self.security_code ==security_code
  end

in the crop image form ...

<%= form.hidden_field security_code, :value=>@current_user.photo.security_code %>

I'm sure you get the idea of the above code, its stops anyone from cropping/hacking the source for an image that they dont own :-)

@supriya

ad this in the environment:

Paperclip.options[:swallow_stderr] = false

if you get sth like: -crop *x*y+*w*h-
false argument. try to add an whitespace at the end of the processor command

in the crop_command method:

" -crop '#{target.crop_w.to_i}x#{target.crop_h.to_i}+#{target.crop_x.to_i}+#{target.crop_y.to_i}' "

in lib/paperclip_processors/cropper.rb

If you are having trouble getting the aspect ratio correct on Heroku, try adding a bang ("!") to the end of the geometry string in the crop_command method.

e.g. " -crop '...!'"

From the ImageMagick manual "Width and height emphatically given, original aspect ratio ignored", http://www.imagemagick.org/script/command-line-processing.php#geometry

I'm having some problem with the validation i had before the cropping. See, I'm validating the "group_id" of the user in the model. So when I try to crop, the validation raises errors. I tried this: validates_presence_of [:name, :group_id], :unless => :cropping?

but it doesnt work.
Anyone could help me out?

Nevermind, i figured it out

Hi all. I have tried to get this to work for hours but no luck. Everything goes smooth until I hit the crop button and I get a No Method Error:

NoMethodError in PeopleController#update

private method `sub' called for ["-resize", "200x", "-crop", "200x200+0+33", "+repage"]:Array

RAILS_ROOT: /Users/dale/code/event_log
Application Trace | Framework Trace | Full Trace

/Users/pasley/code/event_log/lib/paperclip_processors/cropper.rb:6:in `transformation_command'

I have checked my ImageMagick install and it works. I have triple checked all of my files against the screencast, but I keep getting the above. Any idea on what is going on here?

@Dale I had the same problem. It seems like paperclip has changed the way it handles processor command line arguments. They used to use a String for that, but now they're using an Array. This is why you get an error on super.sub, because it's trying to remove the -crop attributes using regular expressions which don't work on an array.

Below is my modified cropper.rb. That seems to be working. It's quickly hacked together, there may be a cleaner way to do it so anyone feel free to suggest a different approach.

http://pastie.org/988870

On another note I encountered some weird behavior. I don't seem to have to do the ratio adjustment. In fact when I do the ratio adjustment in the javascript code to the crop_x and crop_y etc, the thumbnail becomes extremely small (not visible anymore in fact). When I leave out the ratio factor, everything works great and I don't have a problem with the crop not being centered. I'm puzzled.

Thirdly, I haven't really researched this, but wouldn't it be a good idea to restrict those crop_x, crop_y etc attributes to be integers only? I think they get passed through unsanitized to cropper.rb and could therefore be used to execute commands. After all crop_x, crop_y etc can be set to any value by a malicious user.

Ryan, you're the man! Great job on the Railscasts. Keep it up!

My previous fix contained a bug. It makes sense, but it escaped me, of course you have to crop *before* you resize! Now the javascript ratio adapt is required as well, so ignore that in my previous comment.

Here's the updated fix for the cropper.rb: http://pastie.org/988870

@Michael @Dale @Ryan

I also encountered the Paperclip array returned in the transformation_command super method.

I simply joined the array returned from super, performed the substitution Ryan used in his screencast, then split it back into an array.

http://pastie.org/995357

@Chris That's a much cleaner way to do this. Thanks!

@Michael

No problem! Glad to help.

I have a doubt.

Suppose I want to make the crop in only two styles (:small, :large) and a third (:medium) I just wanted to use the resize without crop.

How can I do this?

Thanks for the great tutorial!

http://pastie.org/1041573

If you want to use this technique with heroku (and the S3) you'll need this gist instead:

http://gist.github.com/477586

The command needs to be an array for reasons unknown to me.

I've had trouble trying to get this to work on Heroku too, was working before a few days ago.

I've used Dan's code (Comment #128) which stops the crop from breaking but the aspect ratio is not being kept correctly.

Previously I was using Key Mayer's change (Comment #60), appending a bang on the end of the command, which was working but isn't working anymore.

I encountered 3 problems when I tried Paperclip + jcrop.

1. Paperclip has a dependency on ImageMagick, so you do have to install that first. http://www.imagemagick.org/

2. I'm using rails3 beta4, and papercli 2.3.3, when I created the Cropper class, it seems that it can't be auto-loaded. So if you have the same problem maybe you just need to require it explicitly.

3. You need to change the Cropper class because maybe there're some changes happened to paperclip so that neither Ryan or rjcrop's code will produce an error now. You can use 62.@Chris Your's code, thank you @Chris Your btw. If you use heroku or S3 so maybe you should check 65@Dan Hixon's code.

Great stuff!
How can I set a maximum width/height to be cropped?

I only want to crop the thumbnail and leave the original :large as is at 800x800>. Any ideas how to do this? Been staring blankly at the code and doesn't seem any obvious way to parse this info.

@kinopyo yes, you are right, Paperclip has changed so that the cropper processor of ryan is not working correctly. I am running on rails 3 and paperclip 2.3.4. and got this error:

undefined method `sub' for ["-resize", "\"x100\"", "-crop", "\"100x100+119+0\"", "+repage"]:Array

So, transformation_command returns an Array now instead of a String. I just changed super.sub to super.first.sub and it worked again.

Is there any solution not to modify (:large) style?

I'm a noob, so forgive me if what I write is not the correct procedure. After spending a couple of evenings on this, I managed to get this working for Rails 3 with the following changes (I'm trying to summarize all the experiences above).

1. Changed cropper.rb to this
http://pastie.org/995357
(From Chris Your)

2. Move cropper.rb to the folder config\initializers

3. Added missing '=' in crop.html.erb:
...
<%= form_for @user do |f| %>
...

4. Remember to add crop_x, crop_y, Crop_w and crop_h to the list of your accessible attributes IF you have such a list:
attr_accessible :avatar, :crop_x, :crop_y, :crop_w, :crop_h

5. Added this line to my gemfile:
gem 'paperclip'

6. bundle install

7. Being on windows, I added the path to ImageMagick in my development environment:
Paperclip.options[:command_path] = "C:\\Progra~1\\ImageMagick-6.6.5-Q16"

I used the SHORT path with ~1, because I read somewhere there was a problem with spaces here.

8. Added jquery.Jcrop.min.js, jquery-1.4.3.min.js in public\javascripts folder

9. added Jcrop.gif and jquery.Jcrop.css in public\stylesheets folder

10. Added <%= yield(:head) %> in the <head> section in the application.html.erb file (needed for sample above)

11. Restart your server

Pfeyy... Hope that helps someone, it took a while to sort all this out :)

@ Anders Heie - Thanks so much for the Rails3 tip! I've been pulling my hair out for half an hour on that cropper.rb change!

I'm trying to get this working with Rails 3, but whenever I try and crop an image, I get a "Completed 406 Not Acceptable" from my webrick log. It seems to be completing the page load just fine, but the page itself is totally blank, with no HTML at all be rendered. Does anyone know how to fix this?

would be great to have another railscast using carrier wave instead of paperclip for cropping

@Kevin Whitaker

I had that problem and it was due to rails not being able to resolve my shorthand notation in the form_for statement:

BAD:
<% form_for([@parent, @child], :html => { :multipart => true }) do |f| %>

FIX:
<% form_for(:child, @child, :url => parent_child_path(@parent), :html => { :method => "put", :multipart => true }) do |f| %>

tells the form you are working on an object of type :child, and specifically the object @child, and the path to the child. In this case parent has_one :child, that's why its route looks the way it does.

OK for those who switched to rails 3 and still have problemwith cropper.rb file: here is a fix a friend gave me.

https://gist.github.com/770789

@Rorsvort

Thanks for the Gist. This was the only solution I could find that solved all the problems with the cropper.rb.

I am trying to do this screencast as a form of update to an image not as an upload like the screencast shows... it returns saying it worked but the thumbnails have not changed...

I have :small, :medium and :large i want the :small and :medium to change first and leave :large and orginal

Any ideas why this may not be working? is there a particular version of paperclip required? Imagemagick etc? or should i modify the code in a particular way? any help much appreciated.

It looks like the posted versions of cropper.rb are not working with Paperclip 2.3.8. Does anyone have an updated version that works with the newest paperlcip?

Thanks to :

[quote]
73. Anders Heie Nov 03, 2010 at 22:59
I'm a noob, so forgive me if what I write is not the correct procedure. After spending a couple of evenings on this, I managed to get this working for Rails 3 with the following changes (I'm trying to summarize all the experiences above).

1. Changed cropper.rb to this
http://pastie.org/995357
(From Chris Your)

2. Move cropper.rb to the folder config\initializers

3. Added missing '=' in crop.html.erb:
...
<%= form_for @user do |f| %>
...

4. Remember to add crop_x, crop_y, Crop_w and crop_h to the list of your accessible attributes IF you have such a list:
attr_accessible :avatar, :crop_x, :crop_y, :crop_w, :crop_h

5. Added this line to my gemfile:
gem 'paperclip'

6. bundle install

7. Being on windows, I added the path to ImageMagick in my development environment:
Paperclip.options[:command_path] = "C:\\Progra~1\\ImageMagick-6.6.5-Q16"

I used the SHORT path with ~1, because I read somewhere there was a problem with spaces here.

8. Added jquery.Jcrop.min.js, jquery-1.4.3.min.js in public\javascripts folder

9. added Jcrop.gif and jquery.Jcrop.css in public\stylesheets folder

10. Added <%= yield(:head) %> in the <head> section in the application.html.erb file (needed for sample above)

11. Restart your server

Pfeyy... Hope that helps someone, it took a while to sort all this out :)[/quote]

WORK NICE NOW

This episode was very informative. A note about the "ratio" variable in JS. This shouldn't be necessary to embed into the JS since it can be done from the custom Cropper class that you created. I find this to be cleaner, safer, and lighter on the client side.

Wonderful episode. I just had minor hickups in Rails3, but found the answers in the comments.

http://pastie.org/1868192

Thanks!

I'm following this and it all goes well, image seems to process etc, but when I view the file it has just cropped from the center of the image and not the cropping area :(

Anybody had this? Does anyone have any ideas?

Thanks in advance!

Hi, I've ran into an interesting problem which I can't seem to find a solution for. Help is really appreciated.

http://stackoverflow.com/questions/8116314/rails-3-1-paperclip-error-with-custom-processors-and-cropping

I haven´t got the cropper module to work with Ryans code, but this works for me

module Paperclip
  class Cropper < Thumbnail
    def transformation_command
      if crop_command
        crop_command + super.join(' ').sub(/ -crop \S+/, '').split(' ') # super returns an array like this: ["-resize", "100x", "-crop", "100x100+0+0", "+repage"]
      else
        super
      end
    end

    def crop_command
      target = @attachment.instance
      if target.cropping?
        ["-crop", "#{target.crop_w}x#{target.crop_h}+#{target.crop_x}+#{target.crop_y}"]
      end
    end
  end
end

I had all sorts of trouble getting the cropper changes to work. Firstly, you'll need to restart your Rails server every time you change the Paperclip changes.

Secondly, I couldn't really get the cropping code to work without putting quotes around the resize and cropping amounts. Because I always crop to a certain size, I completely replaced the array used in the transformation command.

module Paperclip
  class Cropper < Thumbnail
    def transformation_command
      if @attachment.instance.cropping?
        crop_command
      else
        super
      end
    end
    
    def crop_command
      target = @attachment.instance
      if target.cropping?
        sTransform = "#{target.crop_w.to_i}x#{target.crop_h.to_i}+#{target.crop_x.to_i}+#{target.crop_y.to_i}"
        sTransform = ('"'+sTransform+'"')
        trans = []
        trans = trans << "-crop" << sTransform
        trans << "-resize" << "\"800x200\""
        trans 
      end
    end
  end
end

Apologies for the Hungarian notation. Old programmer & bad habits die hard.

I had a problem that, after cropping, all my styles were gone (all the cropped images had the same size). Before applying the cropper processor, they were sized correctly.

Solution was, if you apply a custom processor, processor :thumbnails isn't executed anymore, so you'd have to write
:processors => [:cropper, :thumbnails].

Hope that saves someone some googeling.

For anyone who is still having problems with the syntax for the inserted crop_command in cropper.rb, what worked for me (rails 2.3.5, ruby 1.8.7) was

"-crop #{target.crop_w.to_i}x#{target.crop_h.to_i}+#{target.crop_x.to_i}+#{target.crop_y.to_i} "

No additional quote marks

Hi,
I am New to rails.I have tried this one good examples through out the site.
But, Some Images are not cropping and default size is cropping an Image saving with defaults.
Plz Help?
Thanks for this Screen casts

So... after some tinkering I discovered a few things.
1. transform_command returns an array.
2. the resize is ahead of crop in the array, which means that the image is being resized, then cropped, which obviously won't work.

This very simple hack fixed the expected functionality:

def transformation_command
      if crop_command
        arr = super
        p "un modded #{arr}"
        arr[3] = crop_command

        p "modded #{arr}"
        [arr[2],arr[3],arr[0],arr[1],arr[4]]
      else
        super
      end
    end
    
    def crop_command
      target = @attachment.instance
      if target.cropping?
        "\"#{target.crop_w}x#{target.crop_h}+#{target.crop_x}+#{target.crop_y}\""
      end
    end

The array varies depending on the transform, so this is indeed an unreliable HACK.
I'd fix it, but I think I'll explore a CarrierWave solution instead.

I want to resize / crop image from the center. Exactly like what twitter is doing? Is it possible to do the same via paperclip + ImageMagick? If yes how? If someone can help.

thanks

In hindsight this was obvious, but dont apply any css width or height modifiers to the image the user is cropping. If you do this imagemagick will fail with "geometry does not contain image" since the coordinates you are giving it are not of the true image.

If you use S3 as storage

def profile_picture_geometry(style = :original)
    @geometry ||= {}
    profile_picture_path = (profile_picture.options[:storage] == :s3) ?   profile_picture.url(style) : profile_picture.path(style)
    @geometry[style] ||= Paperclip::Geometry.from_file(profile_picture_path)
end

I encountered a few issues using paperclip 3.2.0.

When using the after_update callback to update the images, it ran into an infinite loop, since paperclip updates the avatar_updated_at column on the model after it completes the crop, so the model gets updated again and re-kicks off the callback.

To resolve this I called @user.avatar.reprocess! directly in the controller if cropping.

Reference Thread: https://github.com/thoughtbot/paperclip/issues/866

I also had some issues with the Cropper Processor in this cast, so I used the code from here: http://viget.com/extend/manual-cropping-with-paperclip

Also, I created a crop_box style, which I explicitly exclude from my cropping processor, so that I can display an unaltered 250x250 image so the user can continually go back and edit their "original" image, and the cropping only applies to thumb nails and medium images. I simply did that by wrapping the logic in transformation_command with:

def transformation_command
if target.cropping? && ![CROP_BOX_PAPERCLIP_STYLE].include?(options[:geometry])
....
else
super
end
end

I declared CROP_BOX_PAPERCLIP_STYLE in environment.rb so that it is available across my application.

It does force me to give crop_box a very unique size so it wont bump into other styles I have!

Good luck and thanks for the cast!

Are the crop coordinates saved anywhere?

For example if you want to add a new style in future and reprocess it as the cropped version is that possible? Or would you have to save crop_x, crop_y etc. in the database.

For those using Bootstrap, note that the preview won't work correctly until you disable bootstrap's default CSS of img { max-width: 100% } by specifying img { max-width: none ).
See here.
https://github.com/twitter/bootstrap/issues/1649

Somehow I get nil values for crop_x, crop_y, crop_w, and crop_h,

I've put
"
attr_accessible :name, :email, :password, :password_confirmation, :avatar,
:crop_x, :crop_y, :crop_w, :crop_h
attr_accessor :crop_x, :crop_y, :crop_w, :crop_h
"
already.. it shows correct values in the hidden text field and the after-save debug dump on browser, but cropping? ALWAYS evaluate to false!..

Anyone know why this is?

If you're getting an endless loop of updating, change to:

  def reprocess_photo
    photo.assign(photo)
    photo.save
  end

Does anybody know how to use this with delayed_jobs and delayed_paperclip. I am getting a "ActionView::Template::Error (Paperclip::Errors::NotIdentifiedByImageMagickError)". It points to:

  def avatar_geometry(style = :original)
    @geometry ||= {}
    avatar_path = (avatar.options[:storage] == :s3) ?   avatar.url(style) : avatar.path(style)
    @geometry[style] ||= Paperclip::Geometry.from_file(avatar_path)
  end

I'm really surprised there isn't much documentation of delayed jobs with paperclip. Sure cropping is great but what is the point if it takes 10-15 seconds to process an image. Please help me!

Adjusting coordinates for the original resolution can also be done in the backend rather than in the javascript on the front-end. Which is particularly useful if you have your JS in an external CoffeeScript file and not in the view. To do so, modify your crop_command in cropper.rb processor:

module Paperclip
  class Cropper < Thumbnail

    ...

    def crop_command
      target = @attachment.instance
      if target.cropping?
        ratio = target.photo_geometry(:original).width  / target.photo_geometry(:large).width
        ["-crop", "#{(target.crop_w.to_i*ratio).round}x#{(target.crop_h.to_i*ratio).round}+#{(target.crop_x.to_i*ratio).round}+#{(target.crop_y.to_i*ratio).round}"]
      end
    end
  end
end

I did it all right but it´s not working.
Uploading and cropping images by giving values to the hidden inputs works right, but the dashed points to crop the selected area on the image doesn´t appear!

When a image is uploaded I get an error in javascript:

TypeError: $(...).Jcrop is not a function

heeeelp!

Hi I am getting this error. What i want to change

undefined method `sub' for #Array:0x007fcdcd27d678

if crop_command
crop_command + super.sub(/ -crop \S+/, '')
else
help me

Thanks in advance

Hello, I'm new in rails and I spend 4 hours to get it work :)

My addidions to this tutorial code:

In user model add

attr_accessible :avatar, :crop_x, :crop_y, :crop_w, :crop_h

In my controller (I'm using device, so in application_controller.rb)

class ApplicationController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :exception

  before_action :configure_devise_permitted_parameters, if: :devise_controller?

  protected

  def configure_devise_permitted_parameters
    registration_params = [:avatar, :name, :email, :password, :password_confirmation]
    update_params = [:avatar, :name, :email, :password, :password_confirmation, :crop_x, :crop_y, :crop_w, :crop_h]

    if params[:action] == 'update'
      devise_parameter_sanitizer.for(:account_update) { 
        |u| u.permit(update_params)
      }
    elsif params[:action] == 'create'
      devise_parameter_sanitizer.for(:sign_up) { 
        |u| u.permit(registration_params) 
      }
    end
  end

end

Replace reprocess_avatar method with this

def reprocess_avatar
  avatar.assign(avatar)
  avatar.save
end

And finally replace cropper.rb as said before on this thread

module Paperclip
  class Cropper < Thumbnail
    def transformation_command
      if crop_command
        crop_command + super.join(' ').sub(/ -crop \S+/, '').split(' ') # super returns an array like this: ["-resize", "100x", "-crop", "100x100+0+0", "+repage"]
      else
        super
      end
    end

    def crop_command
      target = @attachment.instance
      if target.cropping?
        ["-crop", "#{target.crop_w}x#{target.crop_h}+#{target.crop_x}+#{target.crop_y}"]
      end
    end
  end
end

May be it'll help somebody.

Thanks to the help of the latest comments, I got it running again. However, paperclip apparently does not reprocess the original picture anymore (see e.g. https://github.com/thoughtbot/paperclip/issues/1055). This will break the functionality when cropping a second time, as your image is then cropped from the real original, but you're actually cropping a cropped one.

To solve this, you could display the "original" when cropping. However, this may result in very unhandy displays.. any hints on that? Passing in the :original in the styles-params in the model will break the image.

How to reprocess image for a style only i need?
Because i need manualy crop image for thumb4 and thumb6 ?

Model

class Post < ActiveRecord::Base
  
  attr_accessor :crop_x, :crop_y, :crop_w, :crop_h, :crop_style
  
  after_update :reprocess_image, :if => :cropping?

  has_attached_file :image, :styles => {
    :thumb1 => ["300x200#", :jpg],
    :thumb4 => { :geometry => "270x340#",  :processors => [:cropper]},
    :thumb5 => ["50x50#", :jpg],
    :thumb6 => { :geometry => "740x276#",  :processors => [:cropper]}
  }


  def cropping?
    !crop_x.blank? && !crop_y.blank? && !crop_w.blank? && !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.assign(image)
      image.save
    end

end

Copper

module Paperclip
  class Cropper < Thumbnail
    def transformation_command
      if crop_command && crop_this_style?
        puts ">>>>> CROP THIS STYLE "
         crop_command + super.join(' ').sub(/ -crop \S+/, '').split(' ')
      elsif crop_command && !crop_this_style?
        puts ">>>>> NO CORP"
      else
        puts ">>>>> STANDART CROP"
        super
      end
    end

    def crop_command
      target = @attachment.instance
      if target.cropping?
        ["-crop", "#{target.crop_w}x#{target.crop_h}+#{target.crop_x}+#{target.crop_y}"]
      end
    end

    def crop_this_style?
      @attachment.instance.crop_style.present? && (@attachment.options[:styles][@attachment.instance.crop_style.to_sym][:geometry].to_s == @target_geometry.to_s)
    end

  end
end

Slim template

- selected_style = params[:selected_style].to_sym

- content_for(:head) do
  = stylesheet_link_tag "jquery.Jcrop"
  = javascript_include_tag "jquery.Jcrop.min"
  javascript:
    $(function() {
      $('#cropbox').Jcrop({
        onChange: update_crop,
        onSelect: update_crop,
        setSelect: [0, 0, #{@post.image_geometry(selected_style).width}, #{@post.image_geometry(selected_style).height}],
        aspectRatio: #{@post.image_geometry(selected_style).width}/#{@post.image_geometry(selected_style).height}
      });
    });

    function update_crop(coords) {
      var rx = #{@post.image_geometry(selected_style).width}/coords.w;
      var ry = #{@post.image_geometry(selected_style).height}/coords.h;
      $('#preview').css({
        width: Math.round(rx * #{@post.image_geometry(:real).width}) + 'px',
        height: Math.round(ry * #{@post.image_geometry(:real).height}) + 'px',
        marginLeft: '-' + Math.round(rx * coords.x) + 'px',
        marginTop: '-' + Math.round(ry * coords.y) + 'px'
      });
      var ratio = #{@post.image_geometry(:original).width} / #{@post.image_geometry(:real).width};
      $("#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));
    }


div style="width:#{@post.image_geometry(selected_style).width}px; height:#{@post.image_geometry(selected_style).height}px; overflow:hidden"
  = image_tag @post.image.url(:real), :id => "preview"

= image_tag @post.image.url(:real), :id => "cropbox"

= form_for @post, :url => admin_post_path(@post), :method => :put do |f|
  - for attribute in [:crop_x, :crop_y, :crop_w, :crop_h]
    = f.hidden_field attribute, :id => attribute
    br
  = f.hidden_field :crop_style, :value => selected_style
  p
    = f.submit

Note, there is now a gem to do some of this in helpers...

https://github.com/rsantamaria/papercrop

This episode has been updated to Rails 5 as a blog post Cropping Images using jCrop jQuery plugin in Rails 5

I'm looking for something like that . I'll check.

Kami adalah DISTRIBUTOR KERTAS NASI ala/seperti KFC/McD
yang telah memiliki SERTIFIKAT FOODGRADE
{ISEGA for Food Grade Paper Code of Federal Regulations, Food and Drugs ( FDA),
21 CFR Ch. I ( April 1, 2010 edition )},
yang utama dan terpercaya di Indonesia berkedudukan di DKI Jakarta.