INTRODUCTION
Rails Ajax Image Editor is an ajaxified application for image manipulation using Rails technologies. This application has been derived from Peter Frueh (http://www.ajaxprogrammer.com) which originally existed in PHP. The PHP application has been modified to support Rails framework by Heurion Consulting (http://www.heurionconsulting.com) for the benefit of the Rails programmers to extend this application. The original application is available at http://ajaxian.com/archives/open-source-php-based-ajax-image-editor for use The features supported by this application are:
- Loading an temporary image (which already exists in our server)
- Perform Image cropping (using a crop area)
- Perform Image Resize (with and without constraints)
- Perform Rotation (90 degrees CW and CCW )
- Save image
- View Saved image
- View Original Image
This application has been built by and for Ruby on Rails Technology enthusiasts and also involves the following technologies:
- Ajax for postback activity
-
JSON(JavaScript object notation) for updating JavaScript image
- Rmagick for the image manipulation.
We would like to credit Mr. Peter Frueh (http://www.ajaxprogrammer.com) for having developed this application and also providing us the opportunity to modify the code to suit the Ruby on Rails needs. All credits of Java Script and CSS code belongs to Peter where as all Code of Ajaxification and Ruby on Rails Codes shall belong to Heurion Consulting (http://www.heurionconsulting.com). This code is under LGPL license and you are allowed to do any modifications or extension to this code to suit your requirements. However you are not allowed to change the credits of either Mr. Peter Frueh (http://www.ajaxprogrammer.com) or Heurion Consulting (http://www.heurionconsulting.com) and they shall remain always. This library is free software. You can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version. This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
DOWNLOAD AND SETUP
- Currently the wordpress does not give the option to download the Zip file. To receive the source code, please send an E-Mail to info@heurionconsulting.com
- Unzip the source file to a suitable location
- Run “ruby script/server” (for windows) or ./script/server (for others)
Code Walkthrough
The main parts of the application are javascripts and the ruby controller. The notable files are explained as follows:
- ImageEditor.js – Contains all the code that is necessary to do the image manipulations activity and also to send the post back to the server. This code uses Ajax.Request method to send data to the server. Also the Response is a JSON object which is used to update the client JavaScript image object.
- PageInfo.js – Helper code for tracking mouse position, used to provide JavaScript Crop border.
- Imagecontroller_controller.rb – Contains all server code where image manipulation is performed using RMagick and the resulting images are stored and picked from the respective (edit / active / original) folders.
#Create the directories originalDirectory = “#{RAILS_ROOT}/public/images/original/” activeDirectory = “#{RAILS_ROOT}/public/images/active/” editDirectory = “#{RAILS_ROOT}/public/images/edit/” #Identify the original Image name imageName = ‘parrots.jpg’ #Prepare the new image name extn = imageName.split(‘.’).last newimagename = imageName.gsub(/.jpg/,”) #new image name @image2Name = newimagename +”_”+ Time.now.to_i.to_s+”.”+extn #identify what action to be performed action = params[:actiontype] Part B: Final Preperations Once the images are ready and saved we have to update the javascript with these images. The controller shall get all information of the processed image and sends it to its corresponding view to prepare the JSON object. Code Snippet: Controller #check if the new image is saved, if not then replace the old image name to be the #new image. This occurs for View original and view active cases. unless File.exists?(File.join(editDirectory,@image2Name)) @image2Name = imageName end #get the image and it positions and serialize them to the view img = with_image() @w= img.columns @h= img.rows View {imageFound:true,imageName:”<%= @image2Name %>”,x:<%= @x %>,y:<%= @y %>,w:<%= @w %>,h: <%= @h %>} JSON Variables
- ImageFound : Boolean test that the view was called
- ImageName: Holds the new image name
- X: top left- x position of the new image
- Y: top left – y position of the new image
- W: width of the new image
- H: height of the new image
a) View Original # copies the image from original directory to edit directory to show the image from the edit directory FileUtils.cp(originalDirectory+imageName, editDirectory+imageName) b) View Active # copies the image from active directory to edit directory to show the image from # the edit directory FileUtils.cp(activeDirectory+imageName, editDirectory+@image2Name) c) Save as Active img = with_image() # saving the image with the time stamp in edit directory save_image(img,@image2Name) # writing that image in active directory img.write(File.join(“#{RAILS_ROOT}
/public/images/active/parrots.jpg”)) d) Resize out_w= params[:w].to_i out_h = params[:h].to_i img = with_image() # resizing the image by the given dimensions img = img.resize(out_w,out_h) #saving the resized image to active folder save_image(img,@image2Name) e) Crop @x = params[:x].to_i @y = params[:y].to_i @w = params[:w].to_i @h = params[:h].to_i img = with_image() unless @w == 0 or @h == 0 # cropping the image by its x and y postions with width and height img = img.crop(@x,@y,@w,@h) end # saving the croped image to active folder save_image(img,@image2Name) f) Rotate degrees = params[:degrees].to_i img = with_image() # rotaing the image by particular degrees img=img.rotate!(degrees) # saving the rotated image to active folder save_image(img,@image2Name)
EXTENSIONS TO CODE
- In this application the image shown in the browser is already in the server. We are taking a single image and modifying around it. We can extend this application by loading user images by using any standard upload methodology. One of the notable Ajax upload feature is what is available in the photo gallery application available in the book “Ajax on Rails” by O’reilly Publications. The code for uploading files from client side is:
<div class=”upload_container”>
<% form_for :photo, Photo.new,
:url => photos_url(:usertemplate_id => @usertemplate),
:html => { :multipart => true, :target => “uploader”,
:id => “photo_upload” } do |f| %>
<%= f.file_field :file, :size=>”17″ %><br />
<%= submit_tag “Upload”,:onClick => “Photo.upload();” %>
<%= hidden_field_tag “photo_id”, photoposition %>
<% end %>
</div>
- In this application we are currently providing editing the image by crop, resize and rotate using Rmagick. Image rotation is done for 90 degrees clockwise and anticlockwise directions only. We can extend this application by rotating the image in any degrees by Rmagick.
- In this application we are currently resizing the image by giving values in the text. We can extend this application by using grips on the edges of image instead of using text. We can resize the image by dragging the grips in and out.
- HEURION CONSULTING INFORMATION RELEASE
Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
