The image cropping and uploading is essential part of any web application now days. Recently, I was working on a web application built on ROR platform. Initially we were using attachment_fu gem for image uploading but later there were requirements of cropping the image. I looked for the option for cropping in the attachment_fu but couldn't found any option for image cropping in it. Finally after go through documentation for attachment_fu and googling for alternative, I found a gem called 'Paperclip'. Paperclip gem is used for image upload and cropping but no straight forward integration with attachment_fu. So, I come up with idea of integrating attachment_fu with image cropping feature and shall explain step to step implementation of image cropping using attachment_fu.
Image Crop:
There are many javascripts from hotscripts which can be used for image cropping and I have used one of the javasript "Javascript Image Cropper UI" .
Image Processing
The above javascript shall give us the dimensions for the cropped image and we need to process the image using gem 'RMagick'
=start rdoc This method takes crop image dimensions along with the original image path and re-sized the image to the desired size x: left most x coordinate of image for cropped image from JavaScript y: left most y coordinate of image for cropped image from JavaScript Width: width of image for cropped image from JavaScript Height: height of image for cropped image from JavaScript Path: Image path from JavaScript =enddef self.update_attributes_crop(x,y,width,height,path)
# Get the path of the Directory where Image should be stored path = File.dirname(__FILE__) + "/../../public/#{path}" orig_img = Magick::ImageList.new(path) scale = orig_img.crop(x.to_i,y.to_i,width.to_i,height.to_i, true) crop_img = Magick::Image.new(width.to_i,height.to_i) orig_img = crop_img.composite(scale,0,0,Magick::OverCompositeOp) orig_img.write(path)
end
Upload image to Amazon S3
If you want to upload the image to Amazon S3 then you can use :
S3_copy(source, destination, bucket) line of code in your controller=start rdoc This method upload the file from local drive to Amazon S3 bucket Source: source(path) of image from rails server Destination: destination (relative path) of Image on S3 server Bucket: your S3 bucket name for image upload =end def S3_copy(source, destination, bucket)AWS::S3::Base.establish_connection!(
:access_key_id => S3_access_key_id,
:secret_access_key => S3_secret_access_key
)
AWS::S3::S3Object.copy(source,destination,bucket,:access => :public_read)
policy = AWS::S3::S3Object.acl(destination,bucket)
policy.grants << AWS::S3::ACL::Grant.grant(:public_read)
policy.grants << AWS::S3::ACL::Grant.grant(:public_read_acp)begin
AWS::S3::S3Object.acl(destination, bucket, policy)
rescue
p 'Issue occurred while granting access for the file'
end
end
I hope using above approach you can do image cropping and uploading. Please let me know if you have any questions
Posted from my blog with : https://www.ipragmatech.com/image_croping_upload_ruby_on_rails/
Hi! I am a robot. I just upvoted you! I found similar content that readers might be interested in:
https://www.ipragmatech.com/image_croping_upload_ruby_on_rails/
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit