Garbage Burrito

JavaScript Image Cropping with jsCropperUI and Rails

JavaScript Image Cropping with jsCropperUI and Rails
Ben Kittrell - 11 13, 2006 @ 01:30PM
Comments: 12
We just added a cool new feature to doodlekit™ that lets users upload their own header image for their layout.  The obvious problem with this is resizing and cropping images is a pain, even if you happen to have photoshop.  There's a better way.  I knew I could do the cropping with RMagick, but how do I know what to crop?  Enter DEfusion's JavaScript Image Cropper UI.  This was just perfect, as it uses prototype and scriptaculous, which I'm already using through Rails.  Not only that but it supports ratio constraints, which is very important for my purposes.

As for the implementation, it was fairly simple.  I just looked at the example they had for fixed ratios, only changed a few things.

My javascript import looks like this...

<%= javascript_include_tag("prototype", "builder", "dragdrop", "cropper", "scriptaculous") %>

I changed the ratioDim line to use the size of the target space as the default dimensions.

ratioDim: { x: <%= @layout.header_width %>, y: <%= @layout.header_height %> },

This way, they can resize the cropping area, but only with respect to the target ratio.  I changed the text fields to hidden fields and just slapped a form tag around them that posts to a Rails action that looks like this.

  def crop_and_close
    @settings = @site.settings
    @layout = @site.layout
    if params[:x1]
      img = Magick::Image::read(@settings.header_image_file).first
      img.crop!(::Magick::CenterGravity, params[:x1].to_i, params[:y1].to_i,
         params[:width].to_i, params[:height].to_i, true)
      img.resize!(@layout.header_width, @layout.header_height)
      img.write @settings.header_image_file
    end
  end

I'm already using RMagick, and file_column to upload the image btw.  This simply uses RMagick to crop the file, and then resizes it to the target size for the layout.

This was so super easy, and so far it works in FF, IE, and Opera!  If you're looking to do something like this, I highly recommend this Javascript cropping UI. 
Comments: 12

Comments

1. Bitbutter - 12 17, 2006 @ 05:51AM

Thanks for this. Also useful for allowing users to choose which portion of an image will be used for a fixed width and height thumbnail.

2. Sam Coles - 01 30, 2007 @ 09:45PM

Hi,

Thanks for the article. I encounter this requirement often enough that <a href="(link) wrote a plugin</a> to set all this up using ActiveRecord validations. Let me know what you think.

3. Bobby - 06 18, 2007 @ 10:26PM

Hi - question about the way you implement the upload/crop process: do you save the image first, then crop and update? I use attachment_fu, and need to save thumbnails as well. What I did was after "create" in which the image is saved (along with its thumbnails), I redirect to another page where the uncropped image is displayed, and then sent to a "crop" action that uses your code snippet above. My problem is, how do I then update the thumbs as well?

4. Jens - 08 15, 2007 @ 02:38AM

Hi,

the tool is very nice. but what do I do with the backend code? I am using Asp but, when I use the code on my server. I can only see the picture in the small preview, the big preview is black where the square is.

I hope someone can help.. (link)

5. Patricia Miranda (link) - 07 22, 2008 @ 09:04AM

A Bermuda modeladora Anti Celulite Colter® é feita de poliamida e elastano, sendo que ao tecido é incorporada a biocerâmica emissora de raio infra vermelho longo que estimula o metabolismo celular e a micro circulação local dissolvendo o excesso de gordura, conheça
também outros produtos como calças, short, meias e camisas com biocerâmica

6. Leon (link) - 08 30, 2008 @ 09:17AM

This is really cool. Ta. I found a similar article which might also help others :

(link)

7. sanjai (link) - 09 22, 2008 @ 12:58AM

Hello Sir/Madam,

Pls Help me,

I want to crop a particular portion, and that portion is highlighted

B.Sanjai
VerveMedia
Chennai

8. sanjai (link) - 09 22, 2008 @ 01:27AM

Pls Help me,

I want to crop a particular portion, and that portion is highlighted

B.Sanjai
VerveMedia
Chennai

9. kroppr (link) - 11 18, 2008 @ 06:47AM

what about rotate and zoom the image then create the cropped picture for header?
like this script does:

<a href="(link) - image crop script</a>

:)

10. Andrew Forrest (link) - 01 30, 2009 @ 04:14PM

Crop it using ASP and Javascript

(link)

11. Pedro H Noronha (link) - 02 28, 2009 @ 07:42AM

O Lubrificador Automático de Graxa Easylube® é representado do Brasil pelo Grupo Franzen uma empresa que oferece suporte e assessoria,
nos trabalhos lubrificação e manutenção. Lubrificador mono ponto,recarregável, lubrificação automática e autônoma de pontos.

12. DropShip (link) - 04 06, 2009 @ 07:04PM

Very Good .

In China is the best !

Post a Comment




powered by Doodlekit™ Free Website Builder by Doodlebit™ Website Company