This post expects you to have basic knowledge in image upload to S3 using RoR. Here we mainly focus on grabbing the edited image from aviary and saving to S3.
Aviary
Aviary is one of the best Photo Editing SDK.Aviary is a customisable editor that can be plugged into application in very short time.
1. Get-Key From Aviary
Get your key from http://www.aviary.com/web-key
2. Create a view to display the image to be edited.
[php]
<%= javascript_include_tag ‘https://dme0ih8comzn4.cloudfront.net/js/feather.js’ %>
<%= image_tag("/images/image_to_edit.png", :id=>"image_to_edit") %>
<%= image_tag ("/images/edit.png"),:onclick => "return launchEditor(\’image_to_edit’ , \’/images/image_to_edit.png\’);" ) %>
<% content_for :scripts do %>
<script>
var featherEditor = new Aviary.Feather({
apiKey: ‘Your Key’,
apiVersion: 2,
tools: ‘all’,
onSave: function(imageID, newURL) {
var img = document.getElementById(imageID);
img.src = newURL;
},
postUrl: "<%= url_for :controller => ‘your_controller_name’, :action => ‘your action name’%>",
postData:"<%= any_variable value to be needed at controller%>"
});
function launchEditor(id, src) {
$(‘.fancybox-close’).click();
featherEditor.launch({image: id, url: src});
jQuery(‘html, body’).animate({scrollTop:0}, ‘fast’);
return false;
}
</script>
<%end%>
[/php]
3. Create a model named images
The db migrate file for images model can be something similar to the below one.
[php]
class CreateImages < ActiveRecord::Migration
def self.up
create_table :images do |t|
t.string "photo_file_name"
t.string "photo_content_type"
t.integer "photo_file_size"
t.datetime "photo_updated_at"
t.timestamps
end
end
def self.down
drop_table :images
end
end
[/php]
The app/model/image.rb file content is similar to the below
[php]
class Image < ActiveRecord::Base
has_attached_file :photo,
:storage => :s3,
:s3_credentials => "#{RAILS_ROOT}/config/s3.yml", #S3.yml is the file where the S3 credentials are saved
:path => ":attachment/:id/:style.:extension",
:url => ":s3_orginal_url"
end
[/php]
4. Create s3.yml
[php]
development:
access_key_id: <Your Access Id to S3>
secret_access_key: <Your Secret Access Key>
bucket: <Your Buckets Name>
[/php]
5. In controller action we can read the edited image as follows
[php]
@images = Image.new()
contents = Magick::Image.read(params[:url]).first
file = Tempfile.new(["Edited_By_Aviary", ".jpg"])
contents.write(file.path)
@images =Image.new(:photo=> file)
@images.save
[/php]
6. Done !!!
Aviary provides the flexibility of opting the required tools.
We had a nice time with Aviary 🙂 Expect you too will …
