Rails gem with Jquery and Jcrop
Crops an image and send to your form, when you update/create your model, the cropped image path is sent to your model. integrating with paperclip in a simple way.
Add Cropper to your Gemfile:
gem 'cropper', :git => 'git://github.com/reinaldomendes/cropper.git'
And run bundle install
within your app's directory.
#User
class User < ActiveRecord::Base
cropper :image
def image= file
FileUtils.copy(file,SOME_DIRECTORY)
#.. do something
super SOME_DIRECTORY
end
...
end
If you are using paperclip go to your active record model.
#User
class User < ActiveRecord::Base
has_attached_file :image
cropper :image
...
end
#new.html.erb
<%= form_for(@user) do |f| %>
<%= f.crop_field :file,:rel => 'prettyPhoto' do %>
.... Any Html Here
<%end%>
<%end %>
#new.html.erb
<iframe id="myIframe"></iframe>
<%= form_for(@user) do |f| %>
<%= f.crop_field :file,:target => 'myIframe' do %>
.... Any Html Here
<%end%>
<%end %>
also you can bind events with jQuery or other library, the inportant thing to observe is: the url of link created by "f.crop_field" method.
You can call methods of 'jcrop_api'
//new.html.erb
<script type="text/javascript">
//<![CDATA[
window.cropper = {
init: function(jcrop_api){// the init method of copper object expose the 'jcrop_api' object
jcrop_api.setOptions({
'aspectRatio' : 3/4,
'minSize' : [60,80]
});
},
finish:function(){//called when user crop an image and return from server
//do something
var iframe = document.getElementById('_iframe')
iframe.parentNode.removeChild(iframe)
}
}
//]]>
</script>
Cropper uses the rails temp dir/cropper to save temporary image files. Those files is auto excluded in certain time.
You can control this time by defining the following initializer
#config/initializers/cropper.rb
Cropper.setup do| config|
cropper.clean_tmp_time = 15.minutes #clean temporary files time
cropper.mount_at = "/" # scope for rails routes
end
http://deepliquid.com/content/Jcrop.html
- Create rails generators for more flexibility of user
- Simplify cropper views, separating embed js in other files when possible.