JavaScript Image Cropping with jsCropperUI and Rails
Ben Kittrell
11/13/2006 03:30PM
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...
I changed the ratioDim line to use the size of the target space as the default dimensions.
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.
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.
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
@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
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.
Hi,
Thanks for the article. I encounter this requirement often enough that <a href="http://sam.isitva.com/articles/2007/01/29/cropping-images-with-rails">I wrote a plugin</a> to set all this up using ActiveRecord validations. Let me know what you think.
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?
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.. biip19@hotmail.com
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
This is really cool. Ta. I found a similar article which might also help others :
http://www.googleme.com.au/articles/how_to_crop_images_using_asp_and_javascript.asp
Hello Sir/Madam,
Pls Help me,
I want to crop a particular portion, and that portion is highlighted
B.Sanjai
VerveMedia
Chennai
Pls Help me,
I want to crop a particular portion, and that portion is highlighted
B.Sanjai
VerveMedia
Chennai
what about rotate and zoom the image then create the cropped picture for header?
like this script does:
<a href="http://kroppr.rborn.info">Kroppr - image crop script</a>
:)
Crop it using ASP and Javascript
http://www.imagecowboy.com/articles/how_to_crop_images_using_asp_and_javascript.asp
Very Good .
In China is the best !
Post a Comment