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 @ 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
| 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
| 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.
Post a Comment