Overview

jcropper wraps jcrop 0.98, deepliquid.com/content/Jcrop.html, an in-browser cropping tool, to allow users to crop attached images. It currently only works with paperclip.

(note, there is also another jcrop plugin, github.com/jschwindt/rjcrop)

Installation

Install plugin or gem

script/plugin install git://github.com/syfo/jcropper.git

  or

gem install jcropper
in environment.rb: config.gem 'jcropper'
in config/preinitializer.rb or #{RAILS_ROOT}/Rakefile: require 'jcropper/tasks'

Include the jcropper processor in the paperclip style.

class User < ActiveRecord::Base
  has_attached_file :avatar, :styles => { :thumb => "100x100>", :processors => "jcropper" }
  ...
end

Tell jcropper to crop the paperclip attachment

jcrop :avatar, :thumb

Generate and install your migration

script/generate jcropper user avatar thumb
rake db:migrate

Install js/css/images for jcropper

rake jcropper:install

Add the headers to your view or layout (jquery required)

<%= javascript_include_tag 'jquery.Jcrop.min.js' %>
<%= javascript_include_tag 'jcropper.js' %>
<%= stylesheet_link_tag 'jquery.Jcrop.css' %>

Add the helpers to your view:

<%= croppable_image @user, :avatar, :thumb -%>
<%= croppable_image_preview @user, :avatar, :thumb -%>

Helper Options:
  :css_prefix => 'jcrop'
  :width => 100, :height => 100
  :js_object => 'croppedImage',
  :aspect_ratio => 2
  :aspect_ratio => false

Notes

  • jcropper currently only supports ONE cropped style per attachment, one cropped attachment per model

  • croppedImage.jcrop gets you the jcrop api object (see jcrop docs)

  • in helpers, :aspect_ratio defaults to the aspect ratio of the original image

  • in helpers, width and height default to the target geometry for the style

  • you’ll have to read the jcropper.js source for function docs there

  • tried only on rails 2.3.5 and ruby 1.8.7

  • test/code ratio is 0

Copyright © 2010 Symbolforce, LLC., released under the MIT license