JavaScript Image Cropping with jsCropperUI and Rails
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.
@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
| 2. | Sam Coles | 01/30/2007 21:45:28 |
Hi,
Thanks for the article. I encounter this requirement often enough that <a href="web link wrote a plugin</a> to set all this up using ActiveRecord validations. Let me know what you think.
| 3. | Bobby | 06/18/2007 22:26:23 |
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:38:58 |
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.. web link
| 5. | Patricia Miranda | my website | 07/22/2008 09:04:58 |
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 | my website | 08/30/2008 09:17:46 |
This is really cool. Ta. I found a similar article which might also help others :
| 7. | sanjai | my website | 09/22/2008 00:58:18 |
Hello Sir/Madam,
Pls Help me,
I want to crop a particular portion, and that portion is highlighted
B.Sanjai
VerveMedia
Chennai
| 8. | sanjai | my website | 09/22/2008 01:27:27 |
Pls Help me,
I want to crop a particular portion, and that portion is highlighted
B.Sanjai
VerveMedia
Chennai
| 9. | kroppr | my website | 11/18/2008 06:47:16 |
what about rotate and zoom the image then create the cropped picture for header?
like this script does:
<a href="web link - image crop script</a>
:)
| 10. | Andrew Forrest | my website | 01/30/2009 16:14:05 |
Crop it using ASP and Javascript
Post a Comment